eui documentation
  1. Components
  2. EuiCalendarMonthlyComponent

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
Methods
Inputs
Outputs

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
disabledDays
Type : Date[]
Default value : []

Array of disabled days (Date objects)
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; } const date = new Date(day.year, day.month - 1, day.day); if (this.disabledDays().some(disabledDate => disabledDate.toDateString() === date.toDateString(), )) { 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 ""