eui documentation
  1. Components
  2. EuiCalendarWeeklyComponent

File

packages/components/eui-calendar/eui-calendar-weekly.component.ts

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector eui-calendar-weekly
imports CdkDropList CdkDrag EuiCalendarWeeklyDayHeaderComponent EuiCalendarWeeklyDayContentComponent NgTemplateOutlet NgClass
styleUrls ./eui-calendar-weekly.component.scss
templateUrl ./eui-calendar-weekly.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

date
Type : Date
Default value : new Date()

The reference date for the week. The component will display the week that contains this date. For example, if date is Friday 07/01 and startingDay is Monday, it will show the week from 03/01 to 09/01.
dayHeaderTemplate
Type : TemplateRef<EuiCalendarDay>

Optional custom template for day headers The template will receive the day object as $implicit in the context
disabledDays
Type : Date[]
Default value : []

Array of disabled days (Date objects)
dragAndDrop
Type : boolean, BooleanInput
Default value : true, { transform: booleanAttribute }

Whether drag-and-drop is enabled for events (defaults to true)
eventContentTemplate
Type : TemplateRef<any>

Optional custom template for event content The template will receive the event object as $implicit in the context
events
Type : EuiCalendarEvent[]
Default value : []

Events for the week. Each event should have a date property. The date property should be a Date object. Other properties can be added as needed.
showWeekends
Type : boolean, BooleanInput
Default value : false, { transform: booleanAttribute }

Whether to show weekends in the calendar (defaults to true)
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

date
Type : Date

The reference date for the week. The component will display the week that contains this date. For example, if date is Friday 07/01 and startingDay is Monday, it will show the week from 03/01 to 09/01.
dayAction
Type : { $event: MouseEvent | KeyboardEvent, day: EuiCalendarDay }

Emits when a day header action is triggered
eventMoved
Type : { event: EuiCalendarEvent; newDate: Date }

Emits when an event is moved to a different day
events
Type : EuiCalendarEvent[]

Events for the week. Each event should have a date property. The date property should be a Date object. Other properties can be added as needed.

Methods

drop
drop(dropEvent: CdkDragDrop<EuiCalendarDay>)

Handles drop event when an event is moved between days

Parameters :
Name Type Optional Description
dropEvent CdkDragDrop<EuiCalendarDay> No

The CDK drag-drop event
Returns : void

Properties

daysInWeek
Type : unknown
Default value : computed((): EuiCalendarDay[] => { const referenceDate = this.date(); const startingDay = this.startingDay(); // Calculate the first day of the week containing the reference date const firstDayOfWeek = this.getWeekStartDate(referenceDate, startingDay); const days: EuiCalendarDay[] = []; for (let i = 0; i < 7; i++) { const date = new Date(firstDayOfWeek); date.setDate(firstDayOfWeek.getDate() + i); // Skip weekends if showWeekends is false if (!this.showWeekends() && (date.getDay() === 0 || date.getDay() === 6)) { continue; } days.push({ id: i, isToday: date.toDateString() === new Date().toDateString(), isWeekend: date.getDay() === 0 || date.getDay() === 6, date, disabled: this.disabledDays().some(disabledDate => disabledDate.toDateString() === date.toDateString(), ), metadata: computed(() => { return this.events().filter(event => { const eventDate = event.date(); return eventDate.getFullYear() === date.getFullYear() && eventDate.getMonth() === date.getMonth() && eventDate.getDate() === date.getDate(); }); }), }); } return days; })
dropListIds
Type : unknown
Default value : computed(() => { return this.daysInWeek().map((_, index) => `${this.id}_${_.date.getTime()}`); })

Computed signal that generates IDs for all drop lists to enable drag-and-drop between days

results matching ""

    No results matching ""