### 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

- date
- daysHeaderArray
- dayTemplate
- disabledDaysNotInMonth
- disableFutureDates
- disablePastDates
- disableWeekends
- events
- fillNextMonth
- fillPreviousMonth
- hasEmptyValue
- headerTemplate
- mode
- monthlyCalendar
- newEventAddClicked
- startingDay

###### Methods

- addNewItemClicked
- compareDatesAtDayPrecision
- createEnhancedDayCell
- generateCalendarGrid
- getDaysInMonth
- getFirstDayOfMonth
- getISOWeekNumber
- onMouseEnterDay
- onMouseLeaveDay
- trackByDay

###### Outputs

- newEventAddClicked

### Outputs

newEventAddClicked

### 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" |`

-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

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

daysHeaderArray

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, })); })`

dayTemplate
Default value : `input<TemplateRef<any>>()`
Template for rendering each day cell

disabledDaysNotInMonth
Default value : `input<boolean, BooleanInput>(true, { transform: booleanAttribute })`
Disable days that are not in the current selected month

disableFutureDates
Default value : `input<boolean, BooleanInput>(false, { transform: booleanAttribute })`
Disable selection of future dates

disablePastDates
Default value : `input<boolean, BooleanInput>(false, { transform: booleanAttribute })`
Disable selection of past dates

disableWeekends
Default value : `input<boolean, BooleanInput>(false, { transform: booleanAttribute })`
Disable selection of weekend dates

events
Default value : `input<EuiCalendarEvent[]>([])`

fillNextMonth
Default value : `input<boolean, BooleanInput>(false, { transform: booleanAttribute })`
Fill with next month days

fillPreviousMonth
Default value : `input<boolean, BooleanInput>(false, { transform: booleanAttribute })`
Fill with previous month days

hasEmptyValue
Default value : `input<boolean, BooleanInput>(false, { transform: booleanAttribute })`

headerTemplate
Default value : `input<TemplateRef<{ date: Date }>>()`
Template for rendering each day cell

mode
Default value : `input<'compact' | 'truncated'>('truncated')`
Display mode of the calendar ('compact' or 'truncated')

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; })); })`

newEventAddClicked

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

# results matching ""

# No results matching ""