Info

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

Methods

drop

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

date

Default value : model<Date>(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.

dayAction

Default value : output<{ $event: MouseEvent | KeyboardEvent, day: EuiCalendarDay }>()

Emits when a day header action is triggered

dayHeaderTemplate

Default value : input<TemplateRef<EuiCalendarDay>>()

Optional custom template for day headers The template will receive the day object as $implicit in the context

daysInWeek

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

dragAndDrop

Default value : input<boolean, BooleanInput>(true, { transform: booleanAttribute })

Whether drag-and-drop is enabled for events (defaults to true)

dropListIds

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

eventContentTemplate

Default value : input<TemplateRef<any>>()

Optional custom template for event content The template will receive the event object as $implicit in the context

eventMoved

Default value : output<{ event: EuiCalendarEvent; newDate: Date }>()

Emits when an event is moved to a different day

events

Default value : model<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.

showWeekends

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

Whether to show weekends in the calendar (defaults to true)

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.)

File

Metadata

Index

Properties

Methods

Methods

Properties

results matching ""

No results matching ""