### 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
daysInWeek dropListIds
###### Methods
drop
###### Inputs
date dayHeaderTemplate dragAndDrop eventContentTemplate events showWeekends startingDay
###### Outputs
date dayAction eventMoved events

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

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, 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 ""