### File

`packages/components/eui-calendar/eui-calendar-monthly.component.ts`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `eui-calendar-monthly`
imports | `EuiCalendarDayComponent` `NgClass` `NgTemplateOutlet`
templateUrl | `./eui-calendar-monthly.component.html`
styleUrl | `./eui-calendar-monthly.scss`

### Index

###### Properties
daysHeaderArray monthlyCalendar
###### Methods
addNewItemClicked compareDatesAtDayPrecision createEnhancedDayCell generateCalendarGrid getDaysInMonth getFirstDayOfMonth getISOWeekNumber onMouseEnterDay onMouseLeaveDay trackByDay
###### Inputs
date dayTemplate disabledDaysNotInMonth disableFutureDates disablePastDates disableWeekends events fillNextMonth fillPreviousMonth hasEmptyValue headerTemplate mode startingDay
###### Outputs
newEventAddClicked

### Inputs

date
Type : `Date`
Default value : `new Date()`
The reference date for the month. The component will display the month that contains this date.

dayTemplate
Type : `TemplateRef<any>`
Template for rendering each day cell

disabledDaysNotInMonth
Type : `boolean, BooleanInput`
Default value : `true, { transform: booleanAttribute }`
Disable days that are not in the current selected month

disableFutureDates
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`
Disable selection of future dates

disablePastDates
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`
Disable selection of past dates

disableWeekends
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`
Disable selection of weekend dates

events
Type : `EuiCalendarEvent[]`
Default value : `[]`

fillNextMonth
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`
Fill with next month days

fillPreviousMonth
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`
Fill with previous month days

hasEmptyValue
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

headerTemplate
Type : `TemplateRef<{ date: Date }>`
Template for rendering each day cell

mode
Type : `"compact" | "truncated"`
Default value : `'truncated'`
Display mode of the calendar ('compact' or 'truncated')

startingDay
Type : `number, NumberInput`
Default value : `EuiCalendarDayOfWeek.MONDAY, { transform: this.startingDayTransformer }`
Starting day of the week (0=Monday, 1=Tuesday, ..., 6=Sunday or 'monday', 'tue', 'wed', etc.)

### Outputs

newEventAddClicked
Type : `EuiCalendarDayCell`

### Methods

addNewItemClicked
`addNewItemClicked(day: EuiCalendarDayCell)`
Parameters :
Name | Type | Optional
day | `EuiCalendarDayCell` | No
Returns : `void`

compareDatesAtDayPrecision
`compareDatesAtDayPrecision(date1: Date, date2: Date)`
Compares two dates at day precision Parameters :
Name | Type | Optional | Description
date1 | `Date` | No | First date
date2 | `Date` | No | Second date
Returns : `"0" | "1" | unknown` -1 if date1 < date2, 0 if equal, 1 if date1 > date2

createEnhancedDayCell
`createEnhancedDayCell(day: number, month: number, year: number, isCurrentMonth: boolean, options: object)`
Creates an enhanced day cell object with comprehensive metadata Parameters :
Name | Type | Optional | Default value | Description
day | `number` | No |  | Day of the month
month | `number` | No |  | Month (1-12)
year | `number` | No |  | Year
isCurrentMonth | `boolean` | No |  | Whether this day belongs to the displayed month
options | `object` | No | `{}` | Configuration options
Returns : `EuiCalendarDayCell` Enhanced day cell object

generateCalendarGrid
`generateCalendarGrid(month: number, startingDay: number, options: EuiCalendarMonthlyCalendarOptions)`
Generates a calendar grid for a given month Parameters :
Name | Type | Optional | Default value | Description
month | `number` | No |  | Month (1-12)
startingDay | `number` | No |  | First day of the week (configurable)
options | `EuiCalendarMonthlyCalendarOptions` | No | `{}` | Additional options
Returns : `[][]` 6x7 grid representing the calendar month

getDaysInMonth
`getDaysInMonth(month: number, year: number)`
Calculates the number of days in a given month Parameters :
Name | Type | Optional | Default value | Description
month | `number` | No |  | Month (1-12)
year | `number` | No | `new Date().getFullYear()` | Year (optional, defaults to current year)
Returns : `number` Number of days in the month

getFirstDayOfMonth
`getFirstDayOfMonth(month: number, year: number)`
Calculates the day of week for the first day of a month Parameters :
Name | Type | Optional | Default value | Description
month | `number` | No |  | Month (1-12)
year | `number` | No | `new Date().getFullYear()` | Year (optional, defaults to current year)
Returns : `number` Day of week (0=Sunday, 1=Monday, ..., 6=Saturday)

getISOWeekNumber
`getISOWeekNumber(date: Date)`
Calculates the ISO week number for a given date Parameters :
Name | Type | Optional | Description
date | `Date` | No | Date object
Returns : `number` ISO week number (1-53)

onMouseEnterDay
`onMouseEnterDay(day: any)`
Parameters :
Name | Type | Optional
day | `any` | No
Returns : `void`

onMouseLeaveDay
`onMouseLeaveDay(day: any)`
Parameters :
Name | Type | Optional
day | `any` | No
Returns : `void`

trackByDay
`trackByDay(index: number, day: EuiCalendarDayCell)`
Parameters :
Name | Type | Optional
index | `number` | No
day | `EuiCalendarDayCell` | No
Returns : `string | number`

### Properties

daysHeaderArray
Type : `unknown`
Default value : `computed(() => { const days = Array.from({ length: 7 }, (_, i) => { const date = new Date(2024, 0, 1 + i); // Start from Monday (Jan 1, 2024 was a Monday) return date; }); // Rotate array based on startingDay return days.slice(this.startingDay()).concat(days.slice(0, this.startingDay())).map(day => ({ short: day.toLocaleDateString(this.locale(), { weekday: 'short' }), date: day, })); })`

monthlyCalendar
Type : `Signal<[][]>`
Default value : `computed(() => { const currentEvents = this.events(); // Access the signal directly in computed // take into account the disableFutureDates, disablePastDates, disableWeekends and isCurrentMonth flags // to set the isDisabled flag on the DayCell objects return this.generateCalendarGrid(this.date().getMonth() + 1, this.startingDay(), { year: this.date().getFullYear(), emptyValue: this.hasEmptyValue() ? null : undefined, fillPreviousMonth: this.fillPreviousMonth(), fillNextMonth: this.fillNextMonth(), }) .filter(week => week.some(day => (typeof day === 'number') || (typeof day === 'object' && day?.isCurrentMonth))) .map(week => week.map(day => { if (day && typeof day === 'object') { // Determine if the day should be disabled let isDisabled = false; if (this.disableFutureDates() && day.isFuture) { isDisabled = true; } if (this.disablePastDates() && day.isPast) { isDisabled = true; } if (this.disableWeekends() && day.isWeekend) { isDisabled = true; } if (this.disabledDaysNotInMonth() && !day.isCurrentMonth) { isDisabled = true; } day.isDisabled = isDisabled; const dayEvents: EuiCalendarEvent[] = currentEvents.filter(event => { // More complex filtering logic return event.date().getDate() === day.day && (event.date().getMonth() + 1) === day.month && event.date().getFullYear() === day.year; }).map(v => ({ label: v.label, id: v.id, type: v?.type, date: v.date, ...v, })); if (dayEvents.length > 0) { day.events = dayEvents; } } return day; })); })`

# results matching ""

# No results matching ""