feat(calendar): add day template by teodosiah · Pull Request #17846 · IgniteUI/igniteui-angular

teodosiah · 2026-10-23T11:45:24Z

IgxCalendar, IgxDatePicker and IgxDateRangePicker Specifications have been updated.

Description

Add the igxCalendarDay directive and the dayTemplate input to customize the content of the calendar day cells. The template receives the date and the day states through IgxCalendarDayTemplateContext, while the cells keep their selection, keyboard navigation, ARIA and styling. The date picker and date range picker pass the template to their calendar.

Motivation / Context

Type of Change (check all that apply):

Component(s) / Area(s) Affected:

How Has This Been Tested?

Unit tests
Manual testing
Automated e2e tests

Test Configuration:

Angular version:
Browser(s):
OS:

Screenshots / Recordings

Checklist:

Add the igxCalendarDay directive and the dayTemplate input to customize the content of the calendar day cells. The template receives the date and the day states through IgxCalendarDayTemplateContext, while the cells keep their selection, keyboard navigation, ARIA and styling. The date picker and date range picker pass the template to their calendar. Closes #17822 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Copilot

🟡 Changes recommended

Template context values need correction, and both picker import collections must expose the new directive.

3 open issues

What changed in this PR

Adds customizable calendar day content for #17822, with typed date and state context and integration into both date pickers.

Changes:

Introduces igxCalendarDay and dayTemplate while retaining existing cell interaction and styling.
Adds calendar behavior tests and picker integration tests.
Documents the API and adds event-indicator and pricing samples.

File	Description
src/app/calendar/calendar.sample.ts	Adds template directive imports and sample data helpers.
src/app/calendar/calendar.sample.scss	Styles event indicators and prices.
src/app/calendar/calendar.sample.html	Demonstrates calendar and range-picker templates.
skills/igniteui-angular-components/references/form-controls.md	Documents template usage and constraints.
projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts	Forwards projected day templates to the calendar.
projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts	Tests range-picker template rendering.
projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts	Forwards projected day templates to the calendar.
projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts	Tests date-picker template rendering.
projects/igniteui-angular/calendar/src/calendar/public_api.ts	Adds the directive to the calendar import collection.
projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts	Accepts a typed day template.
projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.html	Renders custom content for visible days.
projects/igniteui-angular/calendar/src/calendar/days-view/day-item.component.ts	Builds the date and state context.
projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts	Defines the directive and typed context.
projects/igniteui-angular/calendar/src/calendar/calendar.component.ts	Resolves input and projected templates.
projects/igniteui-angular/calendar/src/calendar/calendar.component.spec.ts	Tests context, interaction, precedence, and multiple views.
projects/igniteui-angular/calendar/src/calendar/calendar.component.html	Passes the template to each days view.
projects/igniteui-angular/calendar/README.md	Documents the API, context, and accessibility constraints.
CHANGELOG.md	Announces day-template support.

_{Review effort: Balanced}

…late

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Copilot

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.

Copilot

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.

…late

Copilot

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.

Copilot

🟡 Changes recommended

Projected day templates can become stale while a picker is open, and meaningful custom day content is unavailable to screen-reader users.

3 open issues

_{Review effort: Balanced}

…late

Announce the day template text as the day cell description through aria-describedby, and pass projected igxCalendarDay template changes to the calendar of an open date picker or date range picker. Reuse the day template context without extra allocations. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…late

mddragnev

Could you also update the Specification of the calendar,date/date-range pickers?

…late

Rename the projected day template query to contentDayTemplate, drop the unneeded forwardRef, markForCheck, standalone flag and internal doc tags, and keep the same date reference in the day template context until the day changes. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Do not hide the templated day content from assistive technologies, so hidden parts of the template stay out of the day cell description. Document the IgxCalendarDayTemplateDirective import in the README and make the day template date reference test cover a reused day cell. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…late

Copilot AI balanced review requested due to automatic review settings October 23, 2026 11:45

Copilot started reviewing on behalf of teodosiah October 23, 2026 11:45

View session

Copilot AI reviewed Oct 23, 2026

View reviewed changes

teodosiah and others added 3 commits October 23, 2026 14:57

Merge branch 'master' into thristodorova/feat-17822-calendar-day-temp…

ed701b0

…late

Merge branch 'master' into thristodorova/feat-17822-calendar-day-temp…

84b35aa

…late

fix(calendar): fix day template context and picker collections

1d1dcc3

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

teodosiah requested a balanced review from Copilot October 25, 2026 11:30

Copilot started reviewing on behalf of teodosiah October 25, 2026 11:30

View session

Copilot AI reviewed Oct 25, 2026

viktorkombov requested a balanced review from Copilot October 26, 2026 07:19

Copilot started reviewing on behalf of viktorkombov October 26, 2026 07:19

View session

Copilot AI reviewed Oct 26, 2026

Merge branch 'master' into thristodorova/feat-17822-calendar-day-temp…

ec06b02

…late

teodosiah requested a balanced review from Copilot October 28, 2026 06:57

Copilot started reviewing on behalf of teodosiah October 28, 2026 06:58

View session

Copilot AI reviewed Oct 28, 2026

teodosiah added ❌ status: awaiting-test PRs awaiting manual verification 📆 calendar labels Oct 28, 2026

dkamburov requested a balanced review from Copilot October 28, 2026 11:43

Copilot started reviewing on behalf of dkamburov October 28, 2026 11:43

View session

Copilot AI reviewed Oct 28, 2026

View reviewed changes

Comment thread projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.html Resolved

Comment thread projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts Resolved

teodosiah and others added 3 commits October 28, 2026 13:52

Merge branch 'master' into thristodorova/feat-17822-calendar-day-temp…

f4f50f3

…late

Merge branch 'master' into thristodorova/feat-17822-calendar-day-temp…

8d5ef4f

…late

teodosiah assigned viktorkombov Oct 28, 2026

teodosiah requested a review from mddragnev October 28, 2026 14:14

mddragnev requested changes Oct 28, 2026

View reviewed changes

teodosiah and others added 2 commits October 29, 2026 11:26

Merge branch 'master' into thristodorova/feat-17822-calendar-day-temp…

78fe1b5

…late

teodosiah requested a review from mddragnev October 29, 2026 11:39

viktorkombov added 💥 status: in-test PRs currently being tested and removed ❌ status: awaiting-test PRs awaiting manual verification labels Oct 29, 2026

viktorkombov requested changes Oct 29, 2026

View reviewed changes

Comment thread projects/igniteui-angular/calendar/src/calendar/days-view/day-item.component.ts Resolved

Comment thread projects/igniteui-angular/calendar/README.md Resolved

viktorkombov added awaiting author When the reviewer/verifier has some confusions about the scenario/behavior and wait author's action and removed 💥 status: in-test PRs currently being tested labels Oct 29, 2026

teodosiah requested a review from viktorkombov October 30, 2026 08:59

teodosiah added ❌ status: awaiting-test PRs awaiting manual verification and removed awaiting author When the reviewer/verifier has some confusions about the scenario/behavior and wait author's action labels Oct 30, 2026

mddragnev approved these changes Oct 30, 2026

View reviewed changes

viktorkombov approved these changes Oct 30, 2026

View reviewed changes

viktorkombov added ✅ status: verified Applies to PRs that have passed manual verification and removed ❌ status: awaiting-test PRs awaiting manual verification labels Oct 30, 2026

Merge branch 'master' into thristodorova/feat-17822-calendar-day-temp…

135cfdf

…late

ChronosSF enabled auto-merge (squash) October 30, 2026 17:28

Conversation

teodosiah commented Oct 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation / Context

Type of Change (check all that apply):

Component(s) / Area(s) Affected:

How Has This Been Tested?

Test Configuration:

Screenshots / Recordings

Checklist:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

mddragnev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

teodosiah commented Oct 23, 2026 •

edited

Loading