import { type IEventEmitter } from '@breadstone/mosaik-elements'; import type { ISchedulerBeforeEventActivateEventDetail, ISchedulerBeforeSelectRangeEventDetail, ISchedulerEventActivateEventDetail, ISchedulerRangeChangeEventDetail, ISchedulerSelectRangeEventDetail, SchedulerEventActivateTrigger } from '../../../events/SchedulerEvents'; import { AllDayVisibility } from '../../../Types/AllDayVisibility'; import { DayOfWeek } from '../../../Types/DayOfWeek'; import { SchedulerView } from '../../../Types/SchedulerView'; import { CustomElement } from '../../Abstracts/CustomElement'; import { SchedulerElementIntl } from './Intl/SchedulerElementIntl'; import { ISchedulerElementProps } from './ISchedulerElementProps'; import { IAllDayEvent } from './models/IAllDayEvent'; import { ICollectedEvent } from './models/ICollectedEvent'; import { IPositionedEvent } from './models/IPositionedEvent'; declare const SchedulerElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Localeable").ILocaleableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Sizeable").ISizeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Slottable").ISlottableProps & import("../../../Behaviors/Slottable").ISlottable) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Scheduler - A calendar-like time grid component with day and week views. * * @description * The Scheduler component provides a calendar-like interface for displaying and managing * time-based events. It supports day view (single column) and week view (multiple columns), * with features like event positioning, overlap handling, selection, and a "now" indicator. * The scheduler supports vertical scrolling with a fixed header row containing day headers. * Uses a table-based layout for consistent row heights between the timescale and grid. * * @name Scheduler * @element mosaik-scheduler * @category Inputs * * @slot - Default slot for mosaik-scheduler-event elements * * @csspart container - The main scheduler container * @csspart toolbar - The toolbar container * @csspart header - The fixed header row * @csspart header-table - The table containing day headers * @csspart header-spacer - The spacer cell (aligned with timescale width) * @csspart header-cell - Individual day header cells * @csspart header-weekday - The weekday name in the header * @csspart header-day - The day number in the header * @csspart body - The scrollable body area * @csspart timescale - The time labels on the left * @csspart grid-wrapper - Container for grid and appointments overlay * @csspart grid - The table containing time slot cells * @csspart grid-row - A single row in the grid * @csspart grid-cell - Individual grid cells * @csspart appointments - Overlay container for positioned events * @csspart appointment-column - Column container for events of a day * @csspart event - Individual event items * * @cssprop {Color} --scheduler-background-color - Background color of the scheduler * @cssprop {Color} --scheduler-border-color - Border color * @cssprop {String} --scheduler-border-radius - Border radius * @cssprop {String} --scheduler-border-style - Border style * @cssprop {String} --scheduler-border-width - Border width * @cssprop {Color} --scheduler-cell-border-color - Border color for time cells * @cssprop {String} --scheduler-cell-border-radius - Border radius for time cells * @cssprop {String} --scheduler-cell-border-style - Border style for time cells * @cssprop {String} --scheduler-cell-border-width - Border width for time cells * @cssprop {String} --scheduler-cell-height - Height of each time slot cell * @cssprop {String} --scheduler-column-min-width - Minimum width of day columns * @cssprop {String} --scheduler-event-padding-bottom - Bottom padding for events * @cssprop {String} --scheduler-event-padding-left - Left padding for events * @cssprop {String} --scheduler-event-padding-right - Right padding for events * @cssprop {String} --scheduler-event-padding-top - Top padding for events * @cssprop {String} --scheduler-font-family - Font family * @cssprop {String} --scheduler-font-letter-spacing - Letter spacing * @cssprop {String} --scheduler-font-line-height - Line height * @cssprop {String} --scheduler-font-size - Font size * @cssprop {String} --scheduler-font-text-decoration - Text decoration * @cssprop {String} --scheduler-font-text-transform - Text transform * @cssprop {String} --scheduler-font-weight - Font weight * @cssprop {Color} --scheduler-foreground-color - Foreground/text color * @cssprop {String} --scheduler-header-cell-padding-bottom - Bottom padding for header cells * @cssprop {String} --scheduler-header-cell-padding-left - Left padding for header cells * @cssprop {String} --scheduler-header-cell-padding-right - Right padding for header cells * @cssprop {String} --scheduler-header-cell-padding-top - Top padding for header cells * @cssprop {String} --scheduler-header-day-font-family - Font family for day numbers in header * @cssprop {String} --scheduler-header-day-font-letter-spacing - Letter spacing for day numbers * @cssprop {String} --scheduler-header-day-font-line-height - Line height for day numbers * @cssprop {String} --scheduler-header-day-font-size - Font size for day numbers * @cssprop {String} --scheduler-header-day-font-text-decoration - Text decoration for day numbers * @cssprop {String} --scheduler-header-day-font-text-transform - Text transform for day numbers * @cssprop {String} --scheduler-header-day-font-weight - Font weight for day numbers * @cssprop {String} --scheduler-header-font-family - Font family for header * @cssprop {String} --scheduler-header-font-letter-spacing - Letter spacing for header * @cssprop {String} --scheduler-header-font-line-height - Line height for header * @cssprop {String} --scheduler-header-font-size - Font size for header * @cssprop {String} --scheduler-header-font-text-decoration - Text decoration for header * @cssprop {String} --scheduler-header-font-text-transform - Text transform for header * @cssprop {String} --scheduler-header-font-weight - Font weight for header * @cssprop {String} --scheduler-header-weekday-font-family - Font family for weekday labels * @cssprop {String} --scheduler-header-weekday-font-letter-spacing - Letter spacing for weekday labels * @cssprop {String} --scheduler-header-weekday-font-line-height - Line height for weekday labels * @cssprop {String} --scheduler-header-weekday-font-size - Font size for weekday labels * @cssprop {String} --scheduler-header-weekday-font-text-decoration - Text decoration for weekday labels * @cssprop {String} --scheduler-header-weekday-font-text-transform - Text transform for weekday labels * @cssprop {String} --scheduler-header-weekday-font-weight - Font weight for weekday labels * @cssprop {Color} --scheduler-hour-border-color - Border color for hour boundaries * @cssprop {String} --scheduler-hour-border-radius - Border radius for hour boundaries * @cssprop {String} --scheduler-hour-border-style - Border style for hour boundaries * @cssprop {String} --scheduler-hour-border-width - Border width for hour boundaries * @cssprop {String} --scheduler-timescale-width - Width of the timescale * @cssprop {Color} --scheduler-today-background-color - Background color for today's column * @cssprop {String} --scheduler-transition-duration - Duration for transitions * @cssprop {String} --scheduler-transition-mode - Timing function for transitions * @cssprop {Array} --scheduler-transition-property - CSS properties to transition * * @dependency {SchedulerTimescaleElement} - Timescale component * @dependency {SchedulerNowIndicatorElement} - Now indicator component * @dependency {SchedulerEventElement} - Event definition component * @dependency {ToolbarElement} - For the header toolbar * @dependency {ButtonGroupElement} - For grouping navigation buttons * @dependency {ButtonElement} - For individual buttons in the toolbar * * @fires schedulerBeforeEventActivate {SchedulerBeforeEventActivateEvent} - Before event activation (cancelable) * @fires schedulerEventActivate {SchedulerEventActivateEvent} - After event activation * @fires schedulerBeforeSelectRange {SchedulerBeforeSelectRangeEvent} - Before range selection (cancelable) * @fires schedulerSelectRange {SchedulerSelectRangeEvent} - After range selection * @fires schedulerRangeChange {SchedulerRangeChangeEvent} - When visible range changes * * @example * Day view: * ```html * * *
Team Meeting
* * * ``` * * @public */ export declare class SchedulerElement extends SchedulerElement_base implements ISchedulerElementProps { private readonly _intl; private readonly _schedulerBeforeEventActivate; private readonly _schedulerEventActivate; private readonly _schedulerBeforeSelectRange; private readonly _schedulerSelectRange; private readonly _schedulerRangeChange; private _view; private _startDate; private _days; private _hourStart; private _hourEnd; private _stepMinutes; private _timezone; private _blackoutDates; private _specialDates; private _firstDayOfWeek; private _isTodayHighlighted; private _isWeekendHighlighted; private _showWeekNumbers; private _showAdjacent; private _daysAhead; private _visibleDates; private _collectedEvents; private _eventsByDay; private _allDayEventsByDay; private _allDayVisibility; private _mutationObserver; private _nowIndicatorIntervalId; private _weekdayFormat; private _dayFormat; private _timeFormat; private _monthDayFormat; constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the current view mode of the scheduler. * * @remarks * Available views: * - `timeGrid` - Time grid view with configurable day columns (default) * - `month` - Month calendar view with event chips * - `agenda` - Chronological list view of events * * @public * @attr */ get view(): SchedulerView; set view(value: SchedulerView); /** * Gets or sets the start date for the visible range. * When null, defaults to today. * * @public * @attr */ get startDate(): Date | null; set startDate(value: Date | null); /** * Gets the effective start date, defaulting to today if startDate is null. * * @private * @readonly */ private get effectiveStartDate(); /** * Gets or sets the number of days to display. * * @public * @attr */ get days(): number; set days(value: number); /** * Gets or sets the start hour of the time range. * * @public * @attr */ get hourStart(): number; set hourStart(value: number); /** * Gets or sets the end hour of the time range. * * @public * @attr */ get hourEnd(): number; set hourEnd(value: number); /** * Gets or sets the step interval in minutes. * * @public * @attr */ get stepMinutes(): number; set stepMinutes(value: number); /** * Gets or sets the timezone for calculations. * * @public * @attr */ get timezone(): string; set timezone(value: string); /** * Gets or sets the blackout dates that should be disabled. * * @public */ get blackoutDates(): Array; set blackoutDates(value: Array); /** * Gets or sets the special dates that should be highlighted. * * @public */ get specialDates(): Array; set specialDates(value: Array); /** * Gets or sets the first day of the week. * * @public * @attr */ get firstDayOfWeek(): DayOfWeek; set firstDayOfWeek(value: DayOfWeek); /** * Gets or sets whether today is highlighted. * * @public * @attr */ get isTodayHighlighted(): boolean; set isTodayHighlighted(value: boolean); /** * Gets or sets whether weekends are highlighted. * * @public * @attr */ get isWeekendHighlighted(): boolean; set isWeekendHighlighted(value: boolean); /** * Gets or sets the visibility mode for all-day events. * * @public * @attr */ get allDayVisibility(): AllDayVisibility; set allDayVisibility(value: AllDayVisibility); /** * Gets or sets whether to show week numbers in month view. * * @remarks * Applies to: `month` view only. * * @public * @attr */ get showWeekNumbers(): boolean; set showWeekNumbers(value: boolean); /** * Gets or sets whether to show days from adjacent months in month view. * * @remarks * Applies to: `month` view only. * * @public * @attr */ get showAdjacent(): boolean; set showAdjacent(value: boolean); /** * Gets or sets the number of days ahead to show in agenda view. * * @remarks * Applies to: `agenda` view only. * * @public * @attr */ get daysAhead(): number; set daysAhead(value: number); /** * Gets or sets the format string for weekday headers. * * @remarks * Supports: `d` (day number 1-7), `dd` (01-07), `ddd` (Mon), `dddd` (Monday). * Default: `ddd`. * * @public * @attr */ get weekdayFormat(): string; set weekdayFormat(value: string); /** * Gets or sets the format string for day numbers. * * @remarks * Supports: `d` (1-31), `dd` (01-31). * Default: `d`. * * @public * @attr */ get dayFormat(): string; set dayFormat(value: string); /** * Gets or sets the format string for time display. * * @remarks * Supports: `H` (0-23), `HH` (00-23), `h` (1-12), `hh` (01-12), `m` (0-59), `mm` (00-59), `tt` (AM/PM). * Default: `HH:mm`. * * @public * @attr */ get timeFormat(): string; set timeFormat(value: string); /** * Gets or sets the format string for month-day display. * * @remarks * Supports: `M` (1-12), `MM` (01-12), `MMM` (Jan), `MMMM` (January), `d` (1-31), `dd` (01-31). * Default: `MMM d`. * * @public * @attr */ get monthDayFormat(): string; set monthDayFormat(value: string); /** * Gets the visible dates array. * * @public * @readonly */ get visibleDates(): Array; /** * Gets the collected events. * * @public * @readonly */ get collectedEvents(): Array; /** * Gets the events organized by day. * * @public * @readonly */ get eventsByDay(): Map>; /** * Gets the time slots for rendering the grid. * * @public * @readonly */ get timeSlots(): Array<{ time: string; label: string; isHour: boolean; isLastOfHour: boolean; }>; /** * Gets the internationalization helper. * * @public * @readonly */ get intl(): SchedulerElementIntl; /** * Called before an event is activated (cancelable). * Provides reference to `ISchedulerBeforeEventActivateEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get schedulerBeforeEventActivate(): IEventEmitter; /** * Called after an event is activated. * Provides reference to `ISchedulerEventActivateEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get schedulerEventActivate(): IEventEmitter; /** * Called before a range is selected (cancelable). * Provides reference to `ISchedulerBeforeSelectRangeEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get schedulerBeforeSelectRange(): IEventEmitter; /** * Called after a range is selected. * Provides reference to `ISchedulerSelectRangeEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get schedulerSelectRange(): IEventEmitter; /** * Called when the visible date range changes. * Provides reference to `ISchedulerRangeChangeEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get schedulerRangeChange(): IEventEmitter; /** * @public * @override */ connectedCallback(): void; /** * @public * @override */ disconnectedCallback(): void; /** * @protected * @override */ protected updated(changedProperties: Map): void; /** * Returns true when a date is configured as blackout date. * * @public * @param date The date to check. */ isBlackoutDate(date: Date): boolean; /** * Returns true when a date is configured as special date. * * @public * @param date The date to check. */ isSpecialDate(date: Date): boolean; /** * Returns true when the given date is weekend. * * @public * @param date The date to check. */ isWeekend(date: Date): boolean; /** * Returns true when the given date is today. * * @public * @param date The date to check. */ isToday(date: Date): boolean; /** * Handles default slot changes to update events. * * @private */ onDefaultSlotChange(_event: Event): void; /** * Gets events for a specific day. * * @public * @param dayKey - The day key (YYYY-MM-DD). * @returns Array of positioned events for that day. */ getEventsForDay(dayKey: string): Array; /** * Gets all-day events for a specific day. * * @public * @param dayKey - The day key (YYYY-MM-DD). * @returns Array of all-day events for that day. */ getAllDayEventsForDay(dayKey: string): Array; /** * Gets all all-day events across all visible days. * * @public * @returns Array of all all-day events. */ getAllDayEvents(): Array; /** * Returns whether there are any all-day events. * * @public * @readonly */ get hasAllDayEvents(): boolean; /** * Calculates the now indicator top position as percentage. * * @public * @returns The top position percentage (0-100), or -1 if outside visible range. */ getNowIndicatorTop(): number; /** * Activates an event programmatically. * * @public * @param eventKey - The event key to activate. * @param trigger - The activation trigger. * @returns True if activation succeeded. */ activateEvent(eventKey: string, trigger?: SchedulerEventActivateTrigger): boolean; /** * Navigates to a specific date. * * @public * @param date - The date to navigate to. */ navigateToDate(date: Date): void; /** * Navigates to today. * * @public */ navigateToday(): void; /** * Navigates to the previous period. * * @public */ navigatePrevious(): void; /** * Navigates to the next period. * * @public */ navigateNext(): void; protected onStartDateChanged(): void; protected onDaysChanged(): void; protected onHourStartChanged(): void; protected onHourEndChanged(): void; protected onStepMinutesChanged(): void; protected onFirstDayOfWeekChanged(): void; protected onLocaleChanged(): void; protected onSizeChanged(): void; private updateVisibleDates; /** * Collects events from the Light DOM and parses their data. * This method only reads the DOM and stores raw event data. * * @private */ private collectEvents; /** * Calculates positions for all collected events. * This method uses the previously collected events and calculates * their visual positions based on the current hour range and visible dates. * * @private */ private positionEvents; /** * @private */ private assignEventsToSlots; private emitRangeChange; private emitSelectRange; private startNowIndicatorSync; private stopNowIndicatorSync; /** * Calculates lane positions for overlapping events. * * @private * @param events - Array of events with start/end times. * @param hourStart - The visible start hour. * @param hourEnd - The visible end hour. * @param stepMinutes - The step interval in minutes (used for minimum height calculation). * @returns Array of positioned events with lane information. */ private calculateEventLanes; } /** * @public */ export declare namespace SchedulerElement { type Props = ISchedulerElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-scheduler': SchedulerElement; } } export {}; //# sourceMappingURL=SchedulerElement.d.ts.map