Calendar (Angular 22.3): custom day cell template (igxCalendarDay) #1004

Task type

• New topic / component documentation
• Update existing topic (new release, API change, new feature)
• Add missing platform variant (Angular / React / WebComponents / Blazor)
• Improve existing content (clarity, examples, structure)
• Add or update code samples
• Other

Platform(s)

• Angular
• React
• WebComponents
• Blazor
• All platforms

Description

Ignite UI for Angular 22.3 adds a custom template for the content of the calendar day cells, for example to show event indicators, availability or prices (IgniteUI/igniteui-angular#17822, merged in IgniteUI/igniteui-angular#17846). The "Day template" section that the PR adds to the calendar README is a good starting point.

To document:

• Mark an ng-template inside igx-calendar with the igxCalendarDay directive, or pass a template to the dayTemplate input.
• Import IgxCalendarDayTemplateDirective (or IGX_CALENDAR_DIRECTIVES). Without it, the attribute is ignored and the default day content renders.
• The template context, IgxCalendarDayTemplateContext, has the date and the day states: selected, disabled, special, today, weekend, currentMonth, active and the range states.
• The template replaces only the day number. The cell keeps its selection, keyboard navigation, ARIA attributes and state styling. Decorations that use currentColor stay visible on the selected background.
• The template is not rendered for hidden days (hideOutsideDays), and it is used in every month view when monthsViewNumber is greater than 1.
• igx-date-picker and igx-date-range-picker pass an igxCalendarDay template to their calendar. The directive is in IGX_DATE_PICKER_DIRECTIVES and IGX_DATE_RANGE_PICKER_DIRECTIVES.

Topics:

• docs/angular/src/content/en/components/calendar.mdx: a new section with a sample, for example next to "Special dates".
• docs/angular/src/content/en/components/date-picker.mdx ("Calendar Specific settings") and docs/angular/src/content/en/components/date-range-picker.mdx ("Templating"): the pickers take an igxCalendarDay template.
• API References: IgxCalendarDayTemplateDirective, IgxCalendarDayTemplateContext and dayTemplate.

Acceptance criteria

• The calendar topic has a section with a live sample of a day template.
• The date picker and date range picker topics say how to pass the template to their calendar.
• The API References sections list the new directive, context and input.

Related resources

• Issue: [Calendar] Support custom day cell templates igniteui-angular#17822
• PR: feat(calendar): add day template igniteui-angular#17846
• Specifications, updated in the PR: Calendar, Date Picker, Date Range Picker