Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@schedule-x/calendar-controls
Advanced tools
@schedule-x/calendar-controls - npm Package Compare versions
Comparing version 1.58.1 to 1.59.0
@@ -1,56 +0,56 @@ | ||
| import { Signal, ReadonlySignal } from '@preact/signals' | ||
| import { JSXInternal } from 'preact/src/jsx' | ||
| import { Signal, ReadonlySignal } from "@preact/signals"; | ||
| import { JSXInternal } from "preact/src/jsx"; | ||
| declare enum WeekDay { | ||
| SUNDAY = 0, | ||
| MONDAY = 1, | ||
| TUESDAY = 2, | ||
| WEDNESDAY = 3, | ||
| THURSDAY = 4, | ||
| FRIDAY = 5, | ||
| SATURDAY = 6, | ||
| SUNDAY = 0, | ||
| MONDAY = 1, | ||
| TUESDAY = 2, | ||
| WEDNESDAY = 3, | ||
| THURSDAY = 4, | ||
| FRIDAY = 5, | ||
| SATURDAY = 6 | ||
| } | ||
| type WeekWithDates = Date[] | ||
| type MonthWithDates = Date[][] | ||
| type WeekWithDates = Date[]; | ||
| type MonthWithDates = Date[][]; | ||
| declare enum Month { | ||
| JANUARY = 0, | ||
| FEBRUARY = 1, | ||
| MARCH = 2, | ||
| APRIL = 3, | ||
| MAY = 4, | ||
| JUNE = 5, | ||
| JULY = 6, | ||
| AUGUST = 7, | ||
| SEPTEMBER = 8, | ||
| OCTOBER = 9, | ||
| NOVEMBER = 10, | ||
| DECEMBER = 11, | ||
| JANUARY = 0, | ||
| FEBRUARY = 1, | ||
| MARCH = 2, | ||
| APRIL = 3, | ||
| MAY = 4, | ||
| JUNE = 5, | ||
| JULY = 6, | ||
| AUGUST = 7, | ||
| SEPTEMBER = 8, | ||
| OCTOBER = 9, | ||
| NOVEMBER = 10, | ||
| DECEMBER = 11 | ||
| } | ||
| interface TimeUnits { | ||
| firstDayOfWeek: WeekDay | ||
| getMonthWithTrailingAndLeadingDays(year: number, month: Month): MonthWithDates | ||
| getWeekFor(date: Date): WeekWithDates | ||
| getMonthsFor(year: number): Date[] | ||
| firstDayOfWeek: WeekDay; | ||
| getMonthWithTrailingAndLeadingDays(year: number, month: Month): MonthWithDates; | ||
| getWeekFor(date: Date): WeekWithDates; | ||
| getMonthsFor(year: number): Date[]; | ||
| } | ||
| declare enum DatePickerView { | ||
| MONTH_DAYS = 'month-days', | ||
| YEARS = 'years', | ||
| MONTH_DAYS = "month-days", | ||
| YEARS = "years" | ||
| } | ||
| interface DatePickerState { | ||
| isOpen: Signal<boolean> | ||
| isDisabled: Signal<boolean> | ||
| selectedDate: Signal<string> | ||
| inputDisplayedValue: Signal<string> | ||
| datePickerDate: Signal<string> | ||
| datePickerView: Signal<DatePickerView> | ||
| inputWrapperElement: Signal<HTMLDivElement | undefined> | ||
| isDark: Signal<boolean> | ||
| open(): void | ||
| close(): void | ||
| toggle(): void | ||
| setView(view: DatePickerView): void | ||
| isOpen: Signal<boolean>; | ||
| isDisabled: Signal<boolean>; | ||
| selectedDate: Signal<string>; | ||
| inputDisplayedValue: Signal<string>; | ||
| datePickerDate: Signal<string>; | ||
| datePickerView: Signal<DatePickerView>; | ||
| inputWrapperElement: Signal<HTMLDivElement | undefined>; | ||
| isDark: Signal<boolean>; | ||
| open(): void; | ||
| close(): void; | ||
| toggle(): void; | ||
| setView(view: DatePickerView): void; | ||
| } | ||
| type TranslationVariables = { | ||
| [key: string]: string | number | ||
| } | ||
| type TranslateFn = (key: string, variables?: TranslationVariables) => string | ||
| [key: string]: string | number; | ||
| }; | ||
| type TranslateFn = (key: string, variables?: TranslationVariables) => string; | ||
| /** | ||
@@ -60,5 +60,5 @@ * This interface serves as a bridge between the AppSingleton for the date picker and calendar | ||
| interface AppSingleton { | ||
| timeUnitsImpl: TimeUnits | ||
| datePickerState: DatePickerState | ||
| translate: TranslateFn | ||
| timeUnitsImpl: TimeUnits; | ||
| datePickerState: DatePickerState; | ||
| translate: TranslateFn; | ||
| } | ||
@@ -69,358 +69,327 @@ /** | ||
| interface Config { | ||
| locale: string | ||
| firstDayOfWeek: WeekDay | ||
| locale: string; | ||
| firstDayOfWeek: WeekDay; | ||
| } | ||
| declare enum Placement { | ||
| TOP_START = 'top-start', | ||
| TOP_END = 'top-end', | ||
| BOTTOM_START = 'bottom-start', | ||
| BOTTOM_END = 'bottom-end', | ||
| TOP_START = "top-start", | ||
| TOP_END = "top-end", | ||
| BOTTOM_START = "bottom-start", | ||
| BOTTOM_END = "bottom-end" | ||
| } | ||
| interface DatePickerAppSingleton extends AppSingleton { | ||
| config: DatePickerConfigInternal | ||
| config: DatePickerConfigInternal; | ||
| } | ||
| type DatePickerListeners = { | ||
| onChange?: (date: string) => void | ||
| onEscapeKeyDown?: ($app: DatePickerAppSingleton) => void | ||
| } | ||
| onChange?: (date: string) => void; | ||
| onEscapeKeyDown?: ($app: DatePickerAppSingleton) => void; | ||
| }; | ||
| type DatePickerStyle = { | ||
| dark?: boolean | ||
| fullWidth?: boolean | ||
| } | ||
| dark?: boolean; | ||
| fullWidth?: boolean; | ||
| }; | ||
| interface DatePickerConfigInternal extends Config { | ||
| min: string | ||
| max: string | ||
| placement: Placement | ||
| listeners: DatePickerListeners | ||
| style: DatePickerStyle | ||
| teleportTo?: HTMLElement | ||
| label?: string | ||
| name?: string | ||
| disabled?: boolean | ||
| min: string; | ||
| max: string; | ||
| placement: Placement; | ||
| listeners: DatePickerListeners; | ||
| style: DatePickerStyle; | ||
| teleportTo?: HTMLElement; | ||
| label?: string; | ||
| name?: string; | ||
| disabled?: boolean; | ||
| } | ||
| // This enum is used to represent names of all internally built views of the calendar | ||
| declare enum InternalViewName { | ||
| Day = 'day', | ||
| Week = 'week', | ||
| MonthGrid = 'month-grid', | ||
| MonthAgenda = 'month-agenda', | ||
| Day = "day", | ||
| Week = "week", | ||
| MonthGrid = "month-grid", | ||
| MonthAgenda = "month-agenda" | ||
| } | ||
| // Since implementers can use custom views, we need to have a type that combines the internal views with these custom views | ||
| type ViewName = InternalViewName | string | ||
| type ViewName = InternalViewName | string; | ||
| type DateRange = { | ||
| start: string | ||
| end: string | ||
| } | ||
| start: string; | ||
| end: string; | ||
| }; | ||
| interface RangeSetterConfig { | ||
| date: string | ||
| timeUnitsImpl: TimeUnits | ||
| calendarConfig: CalendarConfigInternal | ||
| range: Signal<DateRange | null> | ||
| date: string; | ||
| timeUnitsImpl: TimeUnits; | ||
| calendarConfig: CalendarConfigInternal; | ||
| range: Signal<DateRange | null>; | ||
| } | ||
| type PreactViewComponent = (props: { | ||
| $app: CalendarAppSingleton | ||
| id: string | ||
| }) => JSXInternal.Element | ||
| declare const addMonths: (to: string, nMonths: number) => string | ||
| declare const addDays: (to: string, nDays: number) => string | ||
| $app: CalendarAppSingleton; | ||
| id: string; | ||
| }) => JSXInternal.Element; | ||
| declare const addMonths: (to: string, nMonths: number) => string; | ||
| declare const addDays: (to: string, nDays: number) => string; | ||
| type ViewConfig<FrameworkComponent = PreactViewComponent> = { | ||
| /** | ||
| * a unique identifier for the view | ||
| * */ | ||
| name: ViewName | ||
| /** | ||
| * text that will be displayed in the view dropdown | ||
| * */ | ||
| label: string | ||
| /** | ||
| * function that is called when a new date is selected | ||
| * */ | ||
| setDateRange: (config: RangeSetterConfig) => DateRange | ||
| /** | ||
| * should the view be displayed on small screens (< 700px calendar width) | ||
| * */ | ||
| hasSmallScreenCompat: boolean | ||
| /** | ||
| * should the view be displayed on wide screens (> 700px calendar width) | ||
| * */ | ||
| hasWideScreenCompat: boolean | ||
| /** | ||
| * The component you want to render | ||
| * */ | ||
| Component: FrameworkComponent | ||
| /** | ||
| * function that is called when the user clicks the backward/forward button | ||
| * */ | ||
| backwardForwardFn: typeof addDays | typeof addMonths | ||
| /** | ||
| * number of units to add into the backwardForwardFn function. Result behind the scenes for example: | ||
| * backwardForwardFn = addDays | ||
| * backwardForwardUnits = 1 | ||
| * result (behind the scenes) = addDays(date, 1) | ||
| * */ | ||
| backwardForwardUnits: number | ||
| } | ||
| type View<FrameworkComponent = PreactViewComponent> = | ||
| ViewConfig<FrameworkComponent> & { | ||
| render(onElement: HTMLElement, $app: CalendarAppSingleton): void | ||
| destroy(): void | ||
| } | ||
| type EventId = number | string | ||
| type startDate = string | ||
| type nDays = number | ||
| type EventFragments = Record<startDate, nDays> | ||
| /** | ||
| * a unique identifier for the view | ||
| * */ | ||
| name: ViewName; | ||
| /** | ||
| * text that will be displayed in the view dropdown | ||
| * */ | ||
| label: string; | ||
| /** | ||
| * function that is called when a new date is selected | ||
| * */ | ||
| setDateRange: (config: RangeSetterConfig) => DateRange; | ||
| /** | ||
| * should the view be displayed on small screens (< 700px calendar width) | ||
| * */ | ||
| hasSmallScreenCompat: boolean; | ||
| /** | ||
| * should the view be displayed on wide screens (> 700px calendar width) | ||
| * */ | ||
| hasWideScreenCompat: boolean; | ||
| /** | ||
| * The component you want to render | ||
| * */ | ||
| Component: FrameworkComponent; | ||
| /** | ||
| * function that is called when the user clicks the backward/forward button | ||
| * */ | ||
| backwardForwardFn: typeof addDays | typeof addMonths; | ||
| /** | ||
| * number of units to add into the backwardForwardFn function. Result behind the scenes for example: | ||
| * backwardForwardFn = addDays | ||
| * backwardForwardUnits = 1 | ||
| * result (behind the scenes) = addDays(date, 1) | ||
| * */ | ||
| backwardForwardUnits: number; | ||
| }; | ||
| type View<FrameworkComponent = PreactViewComponent> = ViewConfig<FrameworkComponent> & { | ||
| render(onElement: HTMLElement, $app: CalendarAppSingleton): void; | ||
| destroy(): void; | ||
| }; | ||
| type EventId = number | string; | ||
| type startDate = string; | ||
| type nDays = number; | ||
| type EventFragments = Record<startDate, nDays>; | ||
| type CalendarEventOptions = { | ||
| disableDND?: boolean | ||
| disableResize?: boolean | ||
| additionalClasses?: string[] | ||
| } | ||
| disableDND?: boolean; | ||
| disableResize?: boolean; | ||
| additionalClasses?: string[]; | ||
| }; | ||
| interface CalendarEventExternal { | ||
| id: EventId | ||
| start: string | ||
| end: string | ||
| title?: string | ||
| people?: string[] | ||
| location?: string | ||
| description?: string | ||
| calendarId?: string | ||
| _options?: CalendarEventOptions | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| [key: string]: any | ||
| id: EventId; | ||
| start: string; | ||
| end: string; | ||
| title?: string; | ||
| people?: string[]; | ||
| location?: string; | ||
| description?: string; | ||
| calendarId?: string; | ||
| _options?: CalendarEventOptions; | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| [key: string]: any; | ||
| } | ||
| interface CalendarEventInternal extends CalendarEventExternal { | ||
| // event duration | ||
| _isSingleDayTimed: boolean | ||
| _isSingleDayFullDay: boolean | ||
| _isSingleHybridDayTimed: boolean | ||
| _isMultiDayTimed: boolean | ||
| _isMultiDayFullDay: boolean | ||
| // week time grid | ||
| _previousConcurrentEvents: number | undefined | ||
| _totalConcurrentEvents: number | undefined | ||
| // week date grid | ||
| _nDaysInGrid: number | undefined | ||
| // month grid | ||
| _eventFragments: EventFragments | ||
| _color: string | ||
| _getForeignProperties(): Record<string, unknown> | ||
| _getExternalEvent(): CalendarEventExternal | ||
| // event duration | ||
| _isSingleDayTimed: boolean; | ||
| _isSingleDayFullDay: boolean; | ||
| _isSingleHybridDayTimed: boolean; | ||
| _isMultiDayTimed: boolean; | ||
| _isMultiDayFullDay: boolean; | ||
| // week time grid | ||
| _previousConcurrentEvents: number | undefined; | ||
| _totalConcurrentEvents: number | undefined; | ||
| // week date grid | ||
| _nDaysInGrid: number | undefined; | ||
| // month grid | ||
| _eventFragments: EventFragments; | ||
| _color: string; | ||
| _getForeignProperties(): Record<string, unknown>; | ||
| _getExternalEvent(): CalendarEventExternal; | ||
| } | ||
| type DayBoundariesInternal = { | ||
| start: number | ||
| end: number | ||
| start: number; | ||
| end: number; | ||
| }; | ||
| interface TimeGridDragHandler { | ||
| } | ||
| interface TimeGridDragHandler {} | ||
| type DayBoundariesDateTime = { | ||
| start: string | ||
| end: string | ||
| start: string; | ||
| end: string; | ||
| }; | ||
| interface DateGridDragHandler { | ||
| } | ||
| interface DateGridDragHandler {} | ||
| interface EventCoordinates { | ||
| clientX: number | ||
| clientY: number | ||
| clientX: number; | ||
| clientY: number; | ||
| } | ||
| interface DragHandlerDependencies { | ||
| $app: CalendarAppSingleton | ||
| eventCoordinates: EventCoordinates | ||
| eventCopy: CalendarEventInternal | ||
| updateCopy: (newCopy: CalendarEventInternal | undefined) => void | ||
| $app: CalendarAppSingleton; | ||
| eventCoordinates: EventCoordinates; | ||
| eventCopy: CalendarEventInternal; | ||
| updateCopy: (newCopy: CalendarEventInternal | undefined) => void; | ||
| } | ||
| interface MonthGridDragHandler {} | ||
| interface MonthGridDragHandler { | ||
| } | ||
| interface DragAndDropPlugin extends PluginBase { | ||
| createTimeGridDragHandler( | ||
| dependencies: DragHandlerDependencies, | ||
| dayBoundariesDateTime: DayBoundariesDateTime | ||
| ): TimeGridDragHandler | ||
| createDateGridDragHandler( | ||
| dependencies: DragHandlerDependencies | ||
| ): DateGridDragHandler | ||
| createMonthGridDragHandler( | ||
| calendarEvent: CalendarEventInternal, | ||
| $app: CalendarAppSingleton | ||
| ): MonthGridDragHandler | ||
| createTimeGridDragHandler(dependencies: DragHandlerDependencies, dayBoundariesDateTime: DayBoundariesDateTime): TimeGridDragHandler; | ||
| createDateGridDragHandler(dependencies: DragHandlerDependencies): DateGridDragHandler; | ||
| createMonthGridDragHandler(calendarEvent: CalendarEventInternal, $app: CalendarAppSingleton): MonthGridDragHandler; | ||
| } | ||
| type EventModalProps = { | ||
| $app: CalendarAppSingleton | ||
| } | ||
| $app: CalendarAppSingleton; | ||
| }; | ||
| interface EventModalPlugin extends PluginBase { | ||
| calendarEvent: Signal<CalendarEventInternal | null> | ||
| calendarEventDOMRect: Signal<DOMRect | null> | ||
| calendarEventElement: Signal<HTMLElement | null> | ||
| close(): void | ||
| setCalendarEvent( | ||
| event: CalendarEventInternal | null, | ||
| eventTargetDOMRect: DOMRect | null | ||
| ): void | ||
| ComponentFn(props: EventModalProps): JSXInternal.Element | ||
| calendarEvent: Signal<CalendarEventInternal | null>; | ||
| calendarEventDOMRect: Signal<DOMRect | null>; | ||
| calendarEventElement: Signal<HTMLElement | null>; | ||
| close(): void; | ||
| setCalendarEvent(event: CalendarEventInternal | null, eventTargetDOMRect: DOMRect | null): void; | ||
| ComponentFn(props: EventModalProps): JSXInternal.Element; | ||
| } | ||
| interface CalendarCallbacks { | ||
| onEventUpdate?: (event: CalendarEventExternal) => void | ||
| onEventClick?: (event: CalendarEventExternal) => void | ||
| onRangeUpdate?: (range: DateRange) => void | ||
| onSelectedDateUpdate?: (date: string) => void | ||
| onClickDate?: (date: string) => void | ||
| onDoubleClickDate?: (date: string) => void | ||
| onClickDateTime?: (dateTime: string) => void | ||
| onDoubleClickDateTime?: (dateTime: string) => void | ||
| onClickAgendaDate?: (date: string) => void | ||
| onClickPlusEvents?: (date: string) => void | ||
| isCalendarSmall?: ($app: CalendarAppSingleton) => boolean | ||
| onEventUpdate?: (event: CalendarEventExternal) => void; | ||
| onEventClick?: (event: CalendarEventExternal) => void; | ||
| onRangeUpdate?: (range: DateRange) => void; | ||
| onSelectedDateUpdate?: (date: string) => void; | ||
| onClickDate?: (date: string) => void; | ||
| onDoubleClickDate?: (date: string) => void; | ||
| onClickDateTime?: (dateTime: string) => void; | ||
| onDoubleClickDateTime?: (dateTime: string) => void; | ||
| onClickAgendaDate?: (date: string) => void; | ||
| onClickPlusEvents?: (date: string) => void; | ||
| isCalendarSmall?: ($app: CalendarAppSingleton) => boolean; | ||
| } | ||
| type CustomComponentFns = { | ||
| timeGridEvent?: CustomComponentFn | ||
| dateGridEvent?: CustomComponentFn | ||
| monthGridEvent?: CustomComponentFn | ||
| monthAgendaEvent?: CustomComponentFn | ||
| eventModal?: CustomComponentFn | ||
| headerContentLeftPrepend?: CustomComponentFn | ||
| headerContentLeftAppend?: CustomComponentFn | ||
| headerContentRightPrepend?: CustomComponentFn | ||
| headerContentRightAppend?: CustomComponentFn | ||
| } | ||
| timeGridEvent?: CustomComponentFn; | ||
| dateGridEvent?: CustomComponentFn; | ||
| monthGridEvent?: CustomComponentFn; | ||
| monthAgendaEvent?: CustomComponentFn; | ||
| eventModal?: CustomComponentFn; | ||
| headerContentLeftPrepend?: CustomComponentFn; | ||
| headerContentLeftAppend?: CustomComponentFn; | ||
| headerContentRightPrepend?: CustomComponentFn; | ||
| headerContentRightAppend?: CustomComponentFn; | ||
| }; | ||
| interface EventsFacade { | ||
| get(id: EventId): CalendarEventExternal | undefined | ||
| getAll(): CalendarEventExternal[] | ||
| add(event: CalendarEventExternal): void | ||
| update(event: CalendarEventExternal): void | ||
| remove(id: EventId): void | ||
| set(events: CalendarEventExternal[]): void | ||
| get(id: EventId): CalendarEventExternal | undefined; | ||
| getAll(): CalendarEventExternal[]; | ||
| add(event: CalendarEventExternal): void; | ||
| update(event: CalendarEventExternal): void; | ||
| remove(id: EventId): void; | ||
| set(events: CalendarEventExternal[]): void; | ||
| } | ||
| interface EventRecurrencePlugin extends PluginBase { | ||
| updateRecurrenceDND( | ||
| eventId: EventId, | ||
| oldEventStart: string, | ||
| newEventStart: string | ||
| ): void | ||
| updateRecurrenceOnResize( | ||
| eventId: EventId, | ||
| oldEventEnd: string, | ||
| newEventEnd: string | ||
| ): void | ||
| eventsFacade: EventsFacade | ||
| updateRecurrenceDND(eventId: EventId, oldEventStart: string, newEventStart: string): void; | ||
| updateRecurrenceOnResize(eventId: EventId, oldEventEnd: string, newEventEnd: string): void; | ||
| eventsFacade: EventsFacade; | ||
| } | ||
| interface ResizePlugin extends PluginBase { | ||
| createTimeGridEventResizer( | ||
| calendarEvent: CalendarEventInternal, | ||
| updateCopy: (newCopy: CalendarEventInternal | undefined) => void, | ||
| mouseDownEvent: MouseEvent, | ||
| dayBoundariesDateTime: { | ||
| start: string | ||
| end: string | ||
| } | ||
| ): void | ||
| createDateGridEventResizer( | ||
| calendarEvent: CalendarEventInternal, | ||
| updateCopy: (newCopy: CalendarEventInternal | undefined) => void, | ||
| mouseDownEvent: MouseEvent | ||
| ): void | ||
| createTimeGridEventResizer(calendarEvent: CalendarEventInternal, updateCopy: (newCopy: CalendarEventInternal | undefined) => void, mouseDownEvent: MouseEvent, dayBoundariesDateTime: { | ||
| start: string; | ||
| end: string; | ||
| }): void; | ||
| createDateGridEventResizer(calendarEvent: CalendarEventInternal, updateCopy: (newCopy: CalendarEventInternal | undefined) => void, mouseDownEvent: MouseEvent): void; | ||
| } | ||
| type WeekOptions = { | ||
| gridHeight: number | ||
| nDays: number | ||
| eventWidth: number | ||
| } | ||
| gridHeight: number; | ||
| nDays: number; | ||
| eventWidth: number; | ||
| }; | ||
| type MonthGridOptions = { | ||
| nEventsPerDay: number | ||
| } | ||
| nEventsPerDay: number; | ||
| }; | ||
| type ColorDefinition = { | ||
| main: string | ||
| container: string | ||
| onContainer: string | ||
| } | ||
| main: string; | ||
| container: string; | ||
| onContainer: string; | ||
| }; | ||
| type CalendarType = { | ||
| colorName: string | ||
| label?: string | ||
| lightColors?: ColorDefinition | ||
| darkColors?: ColorDefinition | ||
| } | ||
| colorName: string; | ||
| label?: string; | ||
| lightColors?: ColorDefinition; | ||
| darkColors?: ColorDefinition; | ||
| }; | ||
| type Plugins = { | ||
| dragAndDrop?: DragAndDropPlugin | ||
| eventModal?: EventModalPlugin | ||
| scrollController?: PluginBase | ||
| eventRecurrence?: EventRecurrencePlugin | ||
| resize?: ResizePlugin | ||
| [key: string]: PluginBase | undefined | ||
| } | ||
| type CustomComponentFn = ( | ||
| wrapperElement: HTMLElement, | ||
| props: Record<string, unknown> | ||
| ) => void | ||
| dragAndDrop?: DragAndDropPlugin; | ||
| eventModal?: EventModalPlugin; | ||
| scrollController?: PluginBase; | ||
| eventRecurrence?: EventRecurrencePlugin; | ||
| resize?: ResizePlugin; | ||
| [key: string]: PluginBase | undefined; | ||
| }; | ||
| type CustomComponentFn = (wrapperElement: HTMLElement, props: Record<string, unknown>) => void; | ||
| interface CalendarConfigInternal extends Config { | ||
| defaultView: ViewName | ||
| views: View[] | ||
| dayBoundaries: DayBoundariesInternal | ||
| weekOptions: WeekOptions | ||
| monthGridOptions: MonthGridOptions | ||
| calendars: Signal<Record<string, CalendarType>> | ||
| plugins: Plugins | ||
| isDark: boolean | ||
| isResponsive: boolean | ||
| callbacks: CalendarCallbacks | ||
| _customComponentFns: CustomComponentFns | ||
| minDate?: string | ||
| maxDate?: string | ||
| // Getters | ||
| isHybridDay: boolean | ||
| timePointsPerDay: number | ||
| defaultView: ViewName; | ||
| views: View[]; | ||
| dayBoundaries: DayBoundariesInternal; | ||
| weekOptions: WeekOptions; | ||
| monthGridOptions: MonthGridOptions; | ||
| calendars: Signal<Record<string, CalendarType>>; | ||
| plugins: Plugins; | ||
| isDark: boolean; | ||
| isResponsive: boolean; | ||
| callbacks: CalendarCallbacks; | ||
| _customComponentFns: CustomComponentFns; | ||
| minDate?: string; | ||
| maxDate?: string; | ||
| // Getters | ||
| isHybridDay: boolean; | ||
| timePointsPerDay: number; | ||
| } | ||
| interface CalendarState { | ||
| isCalendarSmall: Signal<boolean | undefined> | ||
| view: ReadonlySignal<ViewName> | ||
| setView: (view: ViewName, selectedDate: string) => void | ||
| range: Signal<DateRange | null> | ||
| isDark: Signal<boolean> | ||
| setRange: (date: string) => void | ||
| isCalendarSmall: Signal<boolean | undefined>; | ||
| view: ReadonlySignal<ViewName>; | ||
| setView: (view: ViewName, selectedDate: string) => void; | ||
| range: Signal<DateRange | null>; | ||
| isDark: Signal<boolean>; | ||
| setRange: (date: string) => void; | ||
| } | ||
| type EventsFilterPredicate = | ||
| | ((event: CalendarEventInternal) => boolean) | ||
| | undefined | ||
| type EventsFilterPredicate = ((event: CalendarEventInternal) => boolean) | undefined; | ||
| interface CalendarEvents { | ||
| list: Signal<CalendarEventInternal[]> | ||
| filterPredicate: Signal<EventsFilterPredicate> | ||
| list: Signal<CalendarEventInternal[]>; | ||
| filterPredicate: Signal<EventsFilterPredicate>; | ||
| } | ||
| interface CalendarElements { | ||
| calendarWrapper: HTMLDivElement | undefined | ||
| calendarWrapper: HTMLDivElement | undefined; | ||
| } | ||
| interface CalendarAppSingleton extends AppSingleton { | ||
| config: CalendarConfigInternal | ||
| datePickerConfig: DatePickerConfigInternal | ||
| calendarState: CalendarState | ||
| calendarEvents: CalendarEvents | ||
| elements: CalendarElements | ||
| config: CalendarConfigInternal; | ||
| datePickerConfig: DatePickerConfigInternal; | ||
| calendarState: CalendarState; | ||
| calendarEvents: CalendarEvents; | ||
| elements: CalendarElements; | ||
| } | ||
| interface PluginBase { | ||
| name: string | ||
| // TODO v2: change to `beforeRender` | ||
| /** | ||
| * Allow implementers to dynamically add any properties to the global app object as they see fit. | ||
| * In order to avoid conflict with future properties added to the library, we recommend | ||
| * using the unique prefix `$` for any custom properties added to the global app object. | ||
| * for example $app['$websocketService'] = new WebsocketService(). | ||
| * Adding properties to existing sub-objects is discouraged, since this will make your application more | ||
| * brittle to future changes in the library. | ||
| * */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| beforeInit?($app: CalendarAppSingleton | any): void | ||
| // TODO v2: change to `onRender` and remove $app parameter | ||
| /** | ||
| * Allow implementers to dynamically add any properties to the global app object as they see fit. | ||
| * In order to avoid conflict with future properties added to the library, we recommend | ||
| * using the unique prefix `$` for any custom properties added to the global app object. | ||
| * for example $app['$websocketService'] = new WebsocketService(). | ||
| * Adding properties to existing sub-objects is discouraged, since this will make your application more | ||
| * brittle to future changes in the library. | ||
| * */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| init?($app: CalendarAppSingleton | any): void | ||
| destroy?(): void | ||
| name: string; | ||
| // TODO v2: change to `beforeRender` | ||
| /** | ||
| * Allow implementers to dynamically add any properties to the global app object as they see fit. | ||
| * In order to avoid conflict with future properties added to the library, we recommend | ||
| * using the unique prefix `$` for any custom properties added to the global app object. | ||
| * for example $app['$websocketService'] = new WebsocketService(). | ||
| * Adding properties to existing sub-objects is discouraged, since this will make your application more | ||
| * brittle to future changes in the library. | ||
| * */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| beforeInit?($app: CalendarAppSingleton | any): void; | ||
| // TODO v2: change to `onRender` and remove $app parameter | ||
| /** | ||
| * Allow implementers to dynamically add any properties to the global app object as they see fit. | ||
| * In order to avoid conflict with future properties added to the library, we recommend | ||
| * using the unique prefix `$` for any custom properties added to the global app object. | ||
| * for example $app['$websocketService'] = new WebsocketService(). | ||
| * Adding properties to existing sub-objects is discouraged, since this will make your application more | ||
| * brittle to future changes in the library. | ||
| * */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| init?($app: CalendarAppSingleton | any): void; | ||
| destroy?(): void; | ||
| } | ||
| interface CalendarControlsPlugin extends PluginBase { | ||
| init($app: CalendarAppSingleton): void | ||
| setDate(date: string): void | ||
| setView(view: string): void | ||
| getDate(): string | ||
| getView(): string | ||
| getRange(): DateRange | null | ||
| init($app: CalendarAppSingleton): void; | ||
| setDate(date: string): void; | ||
| setView(view: string): void; | ||
| getDate(): string; | ||
| getView(): string; | ||
| getRange(): DateRange | null; | ||
| } | ||
| declare const createCalendarControlsPlugin: () => CalendarControlsPlugin | ||
| export { createCalendarControlsPlugin } | ||
| declare const createCalendarControlsPlugin: () => CalendarControlsPlugin; | ||
| export { createCalendarControlsPlugin }; |
@@ -1,70 +0,65 @@ | ||
| 'use strict' | ||
| 'use strict'; | ||
| var PluginName | ||
| ;(function (PluginName) { | ||
| PluginName['DragAndDrop'] = 'dragAndDrop' | ||
| PluginName['EventModal'] = 'eventModal' | ||
| PluginName['ScrollController'] = 'scrollController' | ||
| PluginName['EventRecurrence'] = 'eventRecurrence' | ||
| PluginName['Resize'] = 'resize' | ||
| PluginName['CalendarControls'] = 'calendarControls' | ||
| })(PluginName || (PluginName = {})) | ||
| var PluginName; | ||
| (function (PluginName) { | ||
| PluginName["DragAndDrop"] = "dragAndDrop"; | ||
| PluginName["EventModal"] = "eventModal"; | ||
| PluginName["ScrollController"] = "scrollController"; | ||
| PluginName["EventRecurrence"] = "eventRecurrence"; | ||
| PluginName["Resize"] = "resize"; | ||
| PluginName["CalendarControls"] = "calendarControls"; | ||
| })(PluginName || (PluginName = {})); | ||
| // regex for strings between 00:00 and 23:59 | ||
| const dateStringRegex = /^(\d{4})-(\d{2})-(\d{2})$/ | ||
| const dateStringRegex = /^(\d{4})-(\d{2})-(\d{2})$/; | ||
| class CalendarControlsPluginImpl { | ||
| constructor() { | ||
| Object.defineProperty(this, 'name', { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: PluginName.CalendarControls, | ||
| }) | ||
| Object.defineProperty(this, '$app', { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: void 0, | ||
| }) | ||
| } | ||
| beforeInit($app) { | ||
| this.$app = $app | ||
| } | ||
| /** | ||
| * TODO v2: remove this method | ||
| * */ | ||
| init($app) { | ||
| this.$app = $app | ||
| } | ||
| setDate(date) { | ||
| if (!dateStringRegex.test(date)) | ||
| throw new Error('Invalid date. Expected format YYYY-MM-DD') | ||
| this.$app.datePickerState.selectedDate.value = date | ||
| } | ||
| setView(view) { | ||
| const viewToSet = this.$app.config.views.find((v) => v.name === view) | ||
| if (!viewToSet) | ||
| throw new Error( | ||
| `Invalid view name. Expected one of ${this.$app.config.views.map((v) => v.name).join(', ')}` | ||
| ) | ||
| this.$app.calendarState.setView( | ||
| view, | ||
| this.$app.datePickerState.selectedDate.value | ||
| ) | ||
| } | ||
| getDate() { | ||
| return this.$app.datePickerState.selectedDate.value | ||
| } | ||
| getView() { | ||
| return this.$app.calendarState.view.value | ||
| } | ||
| getRange() { | ||
| return this.$app.calendarState.range.value | ||
| } | ||
| constructor() { | ||
| Object.defineProperty(this, "name", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: PluginName.CalendarControls | ||
| }); | ||
| Object.defineProperty(this, "$app", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: void 0 | ||
| }); | ||
| } | ||
| beforeInit($app) { | ||
| this.$app = $app; | ||
| } | ||
| /** | ||
| * TODO v2: remove this method | ||
| * */ | ||
| init($app) { | ||
| this.$app = $app; | ||
| } | ||
| setDate(date) { | ||
| if (!dateStringRegex.test(date)) | ||
| throw new Error('Invalid date. Expected format YYYY-MM-DD'); | ||
| this.$app.datePickerState.selectedDate.value = date; | ||
| } | ||
| setView(view) { | ||
| const viewToSet = this.$app.config.views.find((v) => v.name === view); | ||
| if (!viewToSet) | ||
| throw new Error(`Invalid view name. Expected one of ${this.$app.config.views.map((v) => v.name).join(', ')}`); | ||
| this.$app.calendarState.setView(view, this.$app.datePickerState.selectedDate.value); | ||
| } | ||
| getDate() { | ||
| return this.$app.datePickerState.selectedDate.value; | ||
| } | ||
| getView() { | ||
| return this.$app.calendarState.view.value; | ||
| } | ||
| getRange() { | ||
| return this.$app.calendarState.range.value; | ||
| } | ||
| } | ||
| const createCalendarControlsPlugin = () => { | ||
| return new CalendarControlsPluginImpl() | ||
| } | ||
| return new CalendarControlsPluginImpl(); | ||
| }; | ||
| exports.createCalendarControlsPlugin = createCalendarControlsPlugin | ||
| exports.createCalendarControlsPlugin = createCalendarControlsPlugin; |
@@ -1,56 +0,56 @@ | ||
| import { Signal, ReadonlySignal } from '@preact/signals' | ||
| import { JSXInternal } from 'preact/src/jsx' | ||
| import { Signal, ReadonlySignal } from "@preact/signals"; | ||
| import { JSXInternal } from "preact/src/jsx"; | ||
| declare enum WeekDay { | ||
| SUNDAY = 0, | ||
| MONDAY = 1, | ||
| TUESDAY = 2, | ||
| WEDNESDAY = 3, | ||
| THURSDAY = 4, | ||
| FRIDAY = 5, | ||
| SATURDAY = 6, | ||
| SUNDAY = 0, | ||
| MONDAY = 1, | ||
| TUESDAY = 2, | ||
| WEDNESDAY = 3, | ||
| THURSDAY = 4, | ||
| FRIDAY = 5, | ||
| SATURDAY = 6 | ||
| } | ||
| type WeekWithDates = Date[] | ||
| type MonthWithDates = Date[][] | ||
| type WeekWithDates = Date[]; | ||
| type MonthWithDates = Date[][]; | ||
| declare enum Month { | ||
| JANUARY = 0, | ||
| FEBRUARY = 1, | ||
| MARCH = 2, | ||
| APRIL = 3, | ||
| MAY = 4, | ||
| JUNE = 5, | ||
| JULY = 6, | ||
| AUGUST = 7, | ||
| SEPTEMBER = 8, | ||
| OCTOBER = 9, | ||
| NOVEMBER = 10, | ||
| DECEMBER = 11, | ||
| JANUARY = 0, | ||
| FEBRUARY = 1, | ||
| MARCH = 2, | ||
| APRIL = 3, | ||
| MAY = 4, | ||
| JUNE = 5, | ||
| JULY = 6, | ||
| AUGUST = 7, | ||
| SEPTEMBER = 8, | ||
| OCTOBER = 9, | ||
| NOVEMBER = 10, | ||
| DECEMBER = 11 | ||
| } | ||
| interface TimeUnits { | ||
| firstDayOfWeek: WeekDay | ||
| getMonthWithTrailingAndLeadingDays(year: number, month: Month): MonthWithDates | ||
| getWeekFor(date: Date): WeekWithDates | ||
| getMonthsFor(year: number): Date[] | ||
| firstDayOfWeek: WeekDay; | ||
| getMonthWithTrailingAndLeadingDays(year: number, month: Month): MonthWithDates; | ||
| getWeekFor(date: Date): WeekWithDates; | ||
| getMonthsFor(year: number): Date[]; | ||
| } | ||
| declare enum DatePickerView { | ||
| MONTH_DAYS = 'month-days', | ||
| YEARS = 'years', | ||
| MONTH_DAYS = "month-days", | ||
| YEARS = "years" | ||
| } | ||
| interface DatePickerState { | ||
| isOpen: Signal<boolean> | ||
| isDisabled: Signal<boolean> | ||
| selectedDate: Signal<string> | ||
| inputDisplayedValue: Signal<string> | ||
| datePickerDate: Signal<string> | ||
| datePickerView: Signal<DatePickerView> | ||
| inputWrapperElement: Signal<HTMLDivElement | undefined> | ||
| isDark: Signal<boolean> | ||
| open(): void | ||
| close(): void | ||
| toggle(): void | ||
| setView(view: DatePickerView): void | ||
| isOpen: Signal<boolean>; | ||
| isDisabled: Signal<boolean>; | ||
| selectedDate: Signal<string>; | ||
| inputDisplayedValue: Signal<string>; | ||
| datePickerDate: Signal<string>; | ||
| datePickerView: Signal<DatePickerView>; | ||
| inputWrapperElement: Signal<HTMLDivElement | undefined>; | ||
| isDark: Signal<boolean>; | ||
| open(): void; | ||
| close(): void; | ||
| toggle(): void; | ||
| setView(view: DatePickerView): void; | ||
| } | ||
| type TranslationVariables = { | ||
| [key: string]: string | number | ||
| } | ||
| type TranslateFn = (key: string, variables?: TranslationVariables) => string | ||
| [key: string]: string | number; | ||
| }; | ||
| type TranslateFn = (key: string, variables?: TranslationVariables) => string; | ||
| /** | ||
@@ -60,5 +60,5 @@ * This interface serves as a bridge between the AppSingleton for the date picker and calendar | ||
| interface AppSingleton { | ||
| timeUnitsImpl: TimeUnits | ||
| datePickerState: DatePickerState | ||
| translate: TranslateFn | ||
| timeUnitsImpl: TimeUnits; | ||
| datePickerState: DatePickerState; | ||
| translate: TranslateFn; | ||
| } | ||
@@ -69,358 +69,327 @@ /** | ||
| interface Config { | ||
| locale: string | ||
| firstDayOfWeek: WeekDay | ||
| locale: string; | ||
| firstDayOfWeek: WeekDay; | ||
| } | ||
| declare enum Placement { | ||
| TOP_START = 'top-start', | ||
| TOP_END = 'top-end', | ||
| BOTTOM_START = 'bottom-start', | ||
| BOTTOM_END = 'bottom-end', | ||
| TOP_START = "top-start", | ||
| TOP_END = "top-end", | ||
| BOTTOM_START = "bottom-start", | ||
| BOTTOM_END = "bottom-end" | ||
| } | ||
| interface DatePickerAppSingleton extends AppSingleton { | ||
| config: DatePickerConfigInternal | ||
| config: DatePickerConfigInternal; | ||
| } | ||
| type DatePickerListeners = { | ||
| onChange?: (date: string) => void | ||
| onEscapeKeyDown?: ($app: DatePickerAppSingleton) => void | ||
| } | ||
| onChange?: (date: string) => void; | ||
| onEscapeKeyDown?: ($app: DatePickerAppSingleton) => void; | ||
| }; | ||
| type DatePickerStyle = { | ||
| dark?: boolean | ||
| fullWidth?: boolean | ||
| } | ||
| dark?: boolean; | ||
| fullWidth?: boolean; | ||
| }; | ||
| interface DatePickerConfigInternal extends Config { | ||
| min: string | ||
| max: string | ||
| placement: Placement | ||
| listeners: DatePickerListeners | ||
| style: DatePickerStyle | ||
| teleportTo?: HTMLElement | ||
| label?: string | ||
| name?: string | ||
| disabled?: boolean | ||
| min: string; | ||
| max: string; | ||
| placement: Placement; | ||
| listeners: DatePickerListeners; | ||
| style: DatePickerStyle; | ||
| teleportTo?: HTMLElement; | ||
| label?: string; | ||
| name?: string; | ||
| disabled?: boolean; | ||
| } | ||
| // This enum is used to represent names of all internally built views of the calendar | ||
| declare enum InternalViewName { | ||
| Day = 'day', | ||
| Week = 'week', | ||
| MonthGrid = 'month-grid', | ||
| MonthAgenda = 'month-agenda', | ||
| Day = "day", | ||
| Week = "week", | ||
| MonthGrid = "month-grid", | ||
| MonthAgenda = "month-agenda" | ||
| } | ||
| // Since implementers can use custom views, we need to have a type that combines the internal views with these custom views | ||
| type ViewName = InternalViewName | string | ||
| type ViewName = InternalViewName | string; | ||
| type DateRange = { | ||
| start: string | ||
| end: string | ||
| } | ||
| start: string; | ||
| end: string; | ||
| }; | ||
| interface RangeSetterConfig { | ||
| date: string | ||
| timeUnitsImpl: TimeUnits | ||
| calendarConfig: CalendarConfigInternal | ||
| range: Signal<DateRange | null> | ||
| date: string; | ||
| timeUnitsImpl: TimeUnits; | ||
| calendarConfig: CalendarConfigInternal; | ||
| range: Signal<DateRange | null>; | ||
| } | ||
| type PreactViewComponent = (props: { | ||
| $app: CalendarAppSingleton | ||
| id: string | ||
| }) => JSXInternal.Element | ||
| declare const addMonths: (to: string, nMonths: number) => string | ||
| declare const addDays: (to: string, nDays: number) => string | ||
| $app: CalendarAppSingleton; | ||
| id: string; | ||
| }) => JSXInternal.Element; | ||
| declare const addMonths: (to: string, nMonths: number) => string; | ||
| declare const addDays: (to: string, nDays: number) => string; | ||
| type ViewConfig<FrameworkComponent = PreactViewComponent> = { | ||
| /** | ||
| * a unique identifier for the view | ||
| * */ | ||
| name: ViewName | ||
| /** | ||
| * text that will be displayed in the view dropdown | ||
| * */ | ||
| label: string | ||
| /** | ||
| * function that is called when a new date is selected | ||
| * */ | ||
| setDateRange: (config: RangeSetterConfig) => DateRange | ||
| /** | ||
| * should the view be displayed on small screens (< 700px calendar width) | ||
| * */ | ||
| hasSmallScreenCompat: boolean | ||
| /** | ||
| * should the view be displayed on wide screens (> 700px calendar width) | ||
| * */ | ||
| hasWideScreenCompat: boolean | ||
| /** | ||
| * The component you want to render | ||
| * */ | ||
| Component: FrameworkComponent | ||
| /** | ||
| * function that is called when the user clicks the backward/forward button | ||
| * */ | ||
| backwardForwardFn: typeof addDays | typeof addMonths | ||
| /** | ||
| * number of units to add into the backwardForwardFn function. Result behind the scenes for example: | ||
| * backwardForwardFn = addDays | ||
| * backwardForwardUnits = 1 | ||
| * result (behind the scenes) = addDays(date, 1) | ||
| * */ | ||
| backwardForwardUnits: number | ||
| } | ||
| type View<FrameworkComponent = PreactViewComponent> = | ||
| ViewConfig<FrameworkComponent> & { | ||
| render(onElement: HTMLElement, $app: CalendarAppSingleton): void | ||
| destroy(): void | ||
| } | ||
| type EventId = number | string | ||
| type startDate = string | ||
| type nDays = number | ||
| type EventFragments = Record<startDate, nDays> | ||
| /** | ||
| * a unique identifier for the view | ||
| * */ | ||
| name: ViewName; | ||
| /** | ||
| * text that will be displayed in the view dropdown | ||
| * */ | ||
| label: string; | ||
| /** | ||
| * function that is called when a new date is selected | ||
| * */ | ||
| setDateRange: (config: RangeSetterConfig) => DateRange; | ||
| /** | ||
| * should the view be displayed on small screens (< 700px calendar width) | ||
| * */ | ||
| hasSmallScreenCompat: boolean; | ||
| /** | ||
| * should the view be displayed on wide screens (> 700px calendar width) | ||
| * */ | ||
| hasWideScreenCompat: boolean; | ||
| /** | ||
| * The component you want to render | ||
| * */ | ||
| Component: FrameworkComponent; | ||
| /** | ||
| * function that is called when the user clicks the backward/forward button | ||
| * */ | ||
| backwardForwardFn: typeof addDays | typeof addMonths; | ||
| /** | ||
| * number of units to add into the backwardForwardFn function. Result behind the scenes for example: | ||
| * backwardForwardFn = addDays | ||
| * backwardForwardUnits = 1 | ||
| * result (behind the scenes) = addDays(date, 1) | ||
| * */ | ||
| backwardForwardUnits: number; | ||
| }; | ||
| type View<FrameworkComponent = PreactViewComponent> = ViewConfig<FrameworkComponent> & { | ||
| render(onElement: HTMLElement, $app: CalendarAppSingleton): void; | ||
| destroy(): void; | ||
| }; | ||
| type EventId = number | string; | ||
| type startDate = string; | ||
| type nDays = number; | ||
| type EventFragments = Record<startDate, nDays>; | ||
| type CalendarEventOptions = { | ||
| disableDND?: boolean | ||
| disableResize?: boolean | ||
| additionalClasses?: string[] | ||
| } | ||
| disableDND?: boolean; | ||
| disableResize?: boolean; | ||
| additionalClasses?: string[]; | ||
| }; | ||
| interface CalendarEventExternal { | ||
| id: EventId | ||
| start: string | ||
| end: string | ||
| title?: string | ||
| people?: string[] | ||
| location?: string | ||
| description?: string | ||
| calendarId?: string | ||
| _options?: CalendarEventOptions | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| [key: string]: any | ||
| id: EventId; | ||
| start: string; | ||
| end: string; | ||
| title?: string; | ||
| people?: string[]; | ||
| location?: string; | ||
| description?: string; | ||
| calendarId?: string; | ||
| _options?: CalendarEventOptions; | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| [key: string]: any; | ||
| } | ||
| interface CalendarEventInternal extends CalendarEventExternal { | ||
| // event duration | ||
| _isSingleDayTimed: boolean | ||
| _isSingleDayFullDay: boolean | ||
| _isSingleHybridDayTimed: boolean | ||
| _isMultiDayTimed: boolean | ||
| _isMultiDayFullDay: boolean | ||
| // week time grid | ||
| _previousConcurrentEvents: number | undefined | ||
| _totalConcurrentEvents: number | undefined | ||
| // week date grid | ||
| _nDaysInGrid: number | undefined | ||
| // month grid | ||
| _eventFragments: EventFragments | ||
| _color: string | ||
| _getForeignProperties(): Record<string, unknown> | ||
| _getExternalEvent(): CalendarEventExternal | ||
| // event duration | ||
| _isSingleDayTimed: boolean; | ||
| _isSingleDayFullDay: boolean; | ||
| _isSingleHybridDayTimed: boolean; | ||
| _isMultiDayTimed: boolean; | ||
| _isMultiDayFullDay: boolean; | ||
| // week time grid | ||
| _previousConcurrentEvents: number | undefined; | ||
| _totalConcurrentEvents: number | undefined; | ||
| // week date grid | ||
| _nDaysInGrid: number | undefined; | ||
| // month grid | ||
| _eventFragments: EventFragments; | ||
| _color: string; | ||
| _getForeignProperties(): Record<string, unknown>; | ||
| _getExternalEvent(): CalendarEventExternal; | ||
| } | ||
| type DayBoundariesInternal = { | ||
| start: number | ||
| end: number | ||
| start: number; | ||
| end: number; | ||
| }; | ||
| interface TimeGridDragHandler { | ||
| } | ||
| interface TimeGridDragHandler {} | ||
| type DayBoundariesDateTime = { | ||
| start: string | ||
| end: string | ||
| start: string; | ||
| end: string; | ||
| }; | ||
| interface DateGridDragHandler { | ||
| } | ||
| interface DateGridDragHandler {} | ||
| interface EventCoordinates { | ||
| clientX: number | ||
| clientY: number | ||
| clientX: number; | ||
| clientY: number; | ||
| } | ||
| interface DragHandlerDependencies { | ||
| $app: CalendarAppSingleton | ||
| eventCoordinates: EventCoordinates | ||
| eventCopy: CalendarEventInternal | ||
| updateCopy: (newCopy: CalendarEventInternal | undefined) => void | ||
| $app: CalendarAppSingleton; | ||
| eventCoordinates: EventCoordinates; | ||
| eventCopy: CalendarEventInternal; | ||
| updateCopy: (newCopy: CalendarEventInternal | undefined) => void; | ||
| } | ||
| interface MonthGridDragHandler {} | ||
| interface MonthGridDragHandler { | ||
| } | ||
| interface DragAndDropPlugin extends PluginBase { | ||
| createTimeGridDragHandler( | ||
| dependencies: DragHandlerDependencies, | ||
| dayBoundariesDateTime: DayBoundariesDateTime | ||
| ): TimeGridDragHandler | ||
| createDateGridDragHandler( | ||
| dependencies: DragHandlerDependencies | ||
| ): DateGridDragHandler | ||
| createMonthGridDragHandler( | ||
| calendarEvent: CalendarEventInternal, | ||
| $app: CalendarAppSingleton | ||
| ): MonthGridDragHandler | ||
| createTimeGridDragHandler(dependencies: DragHandlerDependencies, dayBoundariesDateTime: DayBoundariesDateTime): TimeGridDragHandler; | ||
| createDateGridDragHandler(dependencies: DragHandlerDependencies): DateGridDragHandler; | ||
| createMonthGridDragHandler(calendarEvent: CalendarEventInternal, $app: CalendarAppSingleton): MonthGridDragHandler; | ||
| } | ||
| type EventModalProps = { | ||
| $app: CalendarAppSingleton | ||
| } | ||
| $app: CalendarAppSingleton; | ||
| }; | ||
| interface EventModalPlugin extends PluginBase { | ||
| calendarEvent: Signal<CalendarEventInternal | null> | ||
| calendarEventDOMRect: Signal<DOMRect | null> | ||
| calendarEventElement: Signal<HTMLElement | null> | ||
| close(): void | ||
| setCalendarEvent( | ||
| event: CalendarEventInternal | null, | ||
| eventTargetDOMRect: DOMRect | null | ||
| ): void | ||
| ComponentFn(props: EventModalProps): JSXInternal.Element | ||
| calendarEvent: Signal<CalendarEventInternal | null>; | ||
| calendarEventDOMRect: Signal<DOMRect | null>; | ||
| calendarEventElement: Signal<HTMLElement | null>; | ||
| close(): void; | ||
| setCalendarEvent(event: CalendarEventInternal | null, eventTargetDOMRect: DOMRect | null): void; | ||
| ComponentFn(props: EventModalProps): JSXInternal.Element; | ||
| } | ||
| interface CalendarCallbacks { | ||
| onEventUpdate?: (event: CalendarEventExternal) => void | ||
| onEventClick?: (event: CalendarEventExternal) => void | ||
| onRangeUpdate?: (range: DateRange) => void | ||
| onSelectedDateUpdate?: (date: string) => void | ||
| onClickDate?: (date: string) => void | ||
| onDoubleClickDate?: (date: string) => void | ||
| onClickDateTime?: (dateTime: string) => void | ||
| onDoubleClickDateTime?: (dateTime: string) => void | ||
| onClickAgendaDate?: (date: string) => void | ||
| onClickPlusEvents?: (date: string) => void | ||
| isCalendarSmall?: ($app: CalendarAppSingleton) => boolean | ||
| onEventUpdate?: (event: CalendarEventExternal) => void; | ||
| onEventClick?: (event: CalendarEventExternal) => void; | ||
| onRangeUpdate?: (range: DateRange) => void; | ||
| onSelectedDateUpdate?: (date: string) => void; | ||
| onClickDate?: (date: string) => void; | ||
| onDoubleClickDate?: (date: string) => void; | ||
| onClickDateTime?: (dateTime: string) => void; | ||
| onDoubleClickDateTime?: (dateTime: string) => void; | ||
| onClickAgendaDate?: (date: string) => void; | ||
| onClickPlusEvents?: (date: string) => void; | ||
| isCalendarSmall?: ($app: CalendarAppSingleton) => boolean; | ||
| } | ||
| type CustomComponentFns = { | ||
| timeGridEvent?: CustomComponentFn | ||
| dateGridEvent?: CustomComponentFn | ||
| monthGridEvent?: CustomComponentFn | ||
| monthAgendaEvent?: CustomComponentFn | ||
| eventModal?: CustomComponentFn | ||
| headerContentLeftPrepend?: CustomComponentFn | ||
| headerContentLeftAppend?: CustomComponentFn | ||
| headerContentRightPrepend?: CustomComponentFn | ||
| headerContentRightAppend?: CustomComponentFn | ||
| } | ||
| timeGridEvent?: CustomComponentFn; | ||
| dateGridEvent?: CustomComponentFn; | ||
| monthGridEvent?: CustomComponentFn; | ||
| monthAgendaEvent?: CustomComponentFn; | ||
| eventModal?: CustomComponentFn; | ||
| headerContentLeftPrepend?: CustomComponentFn; | ||
| headerContentLeftAppend?: CustomComponentFn; | ||
| headerContentRightPrepend?: CustomComponentFn; | ||
| headerContentRightAppend?: CustomComponentFn; | ||
| }; | ||
| interface EventsFacade { | ||
| get(id: EventId): CalendarEventExternal | undefined | ||
| getAll(): CalendarEventExternal[] | ||
| add(event: CalendarEventExternal): void | ||
| update(event: CalendarEventExternal): void | ||
| remove(id: EventId): void | ||
| set(events: CalendarEventExternal[]): void | ||
| get(id: EventId): CalendarEventExternal | undefined; | ||
| getAll(): CalendarEventExternal[]; | ||
| add(event: CalendarEventExternal): void; | ||
| update(event: CalendarEventExternal): void; | ||
| remove(id: EventId): void; | ||
| set(events: CalendarEventExternal[]): void; | ||
| } | ||
| interface EventRecurrencePlugin extends PluginBase { | ||
| updateRecurrenceDND( | ||
| eventId: EventId, | ||
| oldEventStart: string, | ||
| newEventStart: string | ||
| ): void | ||
| updateRecurrenceOnResize( | ||
| eventId: EventId, | ||
| oldEventEnd: string, | ||
| newEventEnd: string | ||
| ): void | ||
| eventsFacade: EventsFacade | ||
| updateRecurrenceDND(eventId: EventId, oldEventStart: string, newEventStart: string): void; | ||
| updateRecurrenceOnResize(eventId: EventId, oldEventEnd: string, newEventEnd: string): void; | ||
| eventsFacade: EventsFacade; | ||
| } | ||
| interface ResizePlugin extends PluginBase { | ||
| createTimeGridEventResizer( | ||
| calendarEvent: CalendarEventInternal, | ||
| updateCopy: (newCopy: CalendarEventInternal | undefined) => void, | ||
| mouseDownEvent: MouseEvent, | ||
| dayBoundariesDateTime: { | ||
| start: string | ||
| end: string | ||
| } | ||
| ): void | ||
| createDateGridEventResizer( | ||
| calendarEvent: CalendarEventInternal, | ||
| updateCopy: (newCopy: CalendarEventInternal | undefined) => void, | ||
| mouseDownEvent: MouseEvent | ||
| ): void | ||
| createTimeGridEventResizer(calendarEvent: CalendarEventInternal, updateCopy: (newCopy: CalendarEventInternal | undefined) => void, mouseDownEvent: MouseEvent, dayBoundariesDateTime: { | ||
| start: string; | ||
| end: string; | ||
| }): void; | ||
| createDateGridEventResizer(calendarEvent: CalendarEventInternal, updateCopy: (newCopy: CalendarEventInternal | undefined) => void, mouseDownEvent: MouseEvent): void; | ||
| } | ||
| type WeekOptions = { | ||
| gridHeight: number | ||
| nDays: number | ||
| eventWidth: number | ||
| } | ||
| gridHeight: number; | ||
| nDays: number; | ||
| eventWidth: number; | ||
| }; | ||
| type MonthGridOptions = { | ||
| nEventsPerDay: number | ||
| } | ||
| nEventsPerDay: number; | ||
| }; | ||
| type ColorDefinition = { | ||
| main: string | ||
| container: string | ||
| onContainer: string | ||
| } | ||
| main: string; | ||
| container: string; | ||
| onContainer: string; | ||
| }; | ||
| type CalendarType = { | ||
| colorName: string | ||
| label?: string | ||
| lightColors?: ColorDefinition | ||
| darkColors?: ColorDefinition | ||
| } | ||
| colorName: string; | ||
| label?: string; | ||
| lightColors?: ColorDefinition; | ||
| darkColors?: ColorDefinition; | ||
| }; | ||
| type Plugins = { | ||
| dragAndDrop?: DragAndDropPlugin | ||
| eventModal?: EventModalPlugin | ||
| scrollController?: PluginBase | ||
| eventRecurrence?: EventRecurrencePlugin | ||
| resize?: ResizePlugin | ||
| [key: string]: PluginBase | undefined | ||
| } | ||
| type CustomComponentFn = ( | ||
| wrapperElement: HTMLElement, | ||
| props: Record<string, unknown> | ||
| ) => void | ||
| dragAndDrop?: DragAndDropPlugin; | ||
| eventModal?: EventModalPlugin; | ||
| scrollController?: PluginBase; | ||
| eventRecurrence?: EventRecurrencePlugin; | ||
| resize?: ResizePlugin; | ||
| [key: string]: PluginBase | undefined; | ||
| }; | ||
| type CustomComponentFn = (wrapperElement: HTMLElement, props: Record<string, unknown>) => void; | ||
| interface CalendarConfigInternal extends Config { | ||
| defaultView: ViewName | ||
| views: View[] | ||
| dayBoundaries: DayBoundariesInternal | ||
| weekOptions: WeekOptions | ||
| monthGridOptions: MonthGridOptions | ||
| calendars: Signal<Record<string, CalendarType>> | ||
| plugins: Plugins | ||
| isDark: boolean | ||
| isResponsive: boolean | ||
| callbacks: CalendarCallbacks | ||
| _customComponentFns: CustomComponentFns | ||
| minDate?: string | ||
| maxDate?: string | ||
| // Getters | ||
| isHybridDay: boolean | ||
| timePointsPerDay: number | ||
| defaultView: ViewName; | ||
| views: View[]; | ||
| dayBoundaries: DayBoundariesInternal; | ||
| weekOptions: WeekOptions; | ||
| monthGridOptions: MonthGridOptions; | ||
| calendars: Signal<Record<string, CalendarType>>; | ||
| plugins: Plugins; | ||
| isDark: boolean; | ||
| isResponsive: boolean; | ||
| callbacks: CalendarCallbacks; | ||
| _customComponentFns: CustomComponentFns; | ||
| minDate?: string; | ||
| maxDate?: string; | ||
| // Getters | ||
| isHybridDay: boolean; | ||
| timePointsPerDay: number; | ||
| } | ||
| interface CalendarState { | ||
| isCalendarSmall: Signal<boolean | undefined> | ||
| view: ReadonlySignal<ViewName> | ||
| setView: (view: ViewName, selectedDate: string) => void | ||
| range: Signal<DateRange | null> | ||
| isDark: Signal<boolean> | ||
| setRange: (date: string) => void | ||
| isCalendarSmall: Signal<boolean | undefined>; | ||
| view: ReadonlySignal<ViewName>; | ||
| setView: (view: ViewName, selectedDate: string) => void; | ||
| range: Signal<DateRange | null>; | ||
| isDark: Signal<boolean>; | ||
| setRange: (date: string) => void; | ||
| } | ||
| type EventsFilterPredicate = | ||
| | ((event: CalendarEventInternal) => boolean) | ||
| | undefined | ||
| type EventsFilterPredicate = ((event: CalendarEventInternal) => boolean) | undefined; | ||
| interface CalendarEvents { | ||
| list: Signal<CalendarEventInternal[]> | ||
| filterPredicate: Signal<EventsFilterPredicate> | ||
| list: Signal<CalendarEventInternal[]>; | ||
| filterPredicate: Signal<EventsFilterPredicate>; | ||
| } | ||
| interface CalendarElements { | ||
| calendarWrapper: HTMLDivElement | undefined | ||
| calendarWrapper: HTMLDivElement | undefined; | ||
| } | ||
| interface CalendarAppSingleton extends AppSingleton { | ||
| config: CalendarConfigInternal | ||
| datePickerConfig: DatePickerConfigInternal | ||
| calendarState: CalendarState | ||
| calendarEvents: CalendarEvents | ||
| elements: CalendarElements | ||
| config: CalendarConfigInternal; | ||
| datePickerConfig: DatePickerConfigInternal; | ||
| calendarState: CalendarState; | ||
| calendarEvents: CalendarEvents; | ||
| elements: CalendarElements; | ||
| } | ||
| interface PluginBase { | ||
| name: string | ||
| // TODO v2: change to `beforeRender` | ||
| /** | ||
| * Allow implementers to dynamically add any properties to the global app object as they see fit. | ||
| * In order to avoid conflict with future properties added to the library, we recommend | ||
| * using the unique prefix `$` for any custom properties added to the global app object. | ||
| * for example $app['$websocketService'] = new WebsocketService(). | ||
| * Adding properties to existing sub-objects is discouraged, since this will make your application more | ||
| * brittle to future changes in the library. | ||
| * */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| beforeInit?($app: CalendarAppSingleton | any): void | ||
| // TODO v2: change to `onRender` and remove $app parameter | ||
| /** | ||
| * Allow implementers to dynamically add any properties to the global app object as they see fit. | ||
| * In order to avoid conflict with future properties added to the library, we recommend | ||
| * using the unique prefix `$` for any custom properties added to the global app object. | ||
| * for example $app['$websocketService'] = new WebsocketService(). | ||
| * Adding properties to existing sub-objects is discouraged, since this will make your application more | ||
| * brittle to future changes in the library. | ||
| * */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| init?($app: CalendarAppSingleton | any): void | ||
| destroy?(): void | ||
| name: string; | ||
| // TODO v2: change to `beforeRender` | ||
| /** | ||
| * Allow implementers to dynamically add any properties to the global app object as they see fit. | ||
| * In order to avoid conflict with future properties added to the library, we recommend | ||
| * using the unique prefix `$` for any custom properties added to the global app object. | ||
| * for example $app['$websocketService'] = new WebsocketService(). | ||
| * Adding properties to existing sub-objects is discouraged, since this will make your application more | ||
| * brittle to future changes in the library. | ||
| * */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| beforeInit?($app: CalendarAppSingleton | any): void; | ||
| // TODO v2: change to `onRender` and remove $app parameter | ||
| /** | ||
| * Allow implementers to dynamically add any properties to the global app object as they see fit. | ||
| * In order to avoid conflict with future properties added to the library, we recommend | ||
| * using the unique prefix `$` for any custom properties added to the global app object. | ||
| * for example $app['$websocketService'] = new WebsocketService(). | ||
| * Adding properties to existing sub-objects is discouraged, since this will make your application more | ||
| * brittle to future changes in the library. | ||
| * */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| init?($app: CalendarAppSingleton | any): void; | ||
| destroy?(): void; | ||
| } | ||
| interface CalendarControlsPlugin extends PluginBase { | ||
| init($app: CalendarAppSingleton): void | ||
| setDate(date: string): void | ||
| setView(view: string): void | ||
| getDate(): string | ||
| getView(): string | ||
| getRange(): DateRange | null | ||
| init($app: CalendarAppSingleton): void; | ||
| setDate(date: string): void; | ||
| setView(view: string): void; | ||
| getDate(): string; | ||
| getView(): string; | ||
| getRange(): DateRange | null; | ||
| } | ||
| declare const createCalendarControlsPlugin: () => CalendarControlsPlugin | ||
| export { createCalendarControlsPlugin } | ||
| declare const createCalendarControlsPlugin: () => CalendarControlsPlugin; | ||
| export { createCalendarControlsPlugin }; |
117
dist/core.js
@@ -1,68 +0,63 @@ | ||
| var PluginName | ||
| ;(function (PluginName) { | ||
| PluginName['DragAndDrop'] = 'dragAndDrop' | ||
| PluginName['EventModal'] = 'eventModal' | ||
| PluginName['ScrollController'] = 'scrollController' | ||
| PluginName['EventRecurrence'] = 'eventRecurrence' | ||
| PluginName['Resize'] = 'resize' | ||
| PluginName['CalendarControls'] = 'calendarControls' | ||
| })(PluginName || (PluginName = {})) | ||
| var PluginName; | ||
| (function (PluginName) { | ||
| PluginName["DragAndDrop"] = "dragAndDrop"; | ||
| PluginName["EventModal"] = "eventModal"; | ||
| PluginName["ScrollController"] = "scrollController"; | ||
| PluginName["EventRecurrence"] = "eventRecurrence"; | ||
| PluginName["Resize"] = "resize"; | ||
| PluginName["CalendarControls"] = "calendarControls"; | ||
| })(PluginName || (PluginName = {})); | ||
| // regex for strings between 00:00 and 23:59 | ||
| const dateStringRegex = /^(\d{4})-(\d{2})-(\d{2})$/ | ||
| const dateStringRegex = /^(\d{4})-(\d{2})-(\d{2})$/; | ||
| class CalendarControlsPluginImpl { | ||
| constructor() { | ||
| Object.defineProperty(this, 'name', { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: PluginName.CalendarControls, | ||
| }) | ||
| Object.defineProperty(this, '$app', { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: void 0, | ||
| }) | ||
| } | ||
| beforeInit($app) { | ||
| this.$app = $app | ||
| } | ||
| /** | ||
| * TODO v2: remove this method | ||
| * */ | ||
| init($app) { | ||
| this.$app = $app | ||
| } | ||
| setDate(date) { | ||
| if (!dateStringRegex.test(date)) | ||
| throw new Error('Invalid date. Expected format YYYY-MM-DD') | ||
| this.$app.datePickerState.selectedDate.value = date | ||
| } | ||
| setView(view) { | ||
| const viewToSet = this.$app.config.views.find((v) => v.name === view) | ||
| if (!viewToSet) | ||
| throw new Error( | ||
| `Invalid view name. Expected one of ${this.$app.config.views.map((v) => v.name).join(', ')}` | ||
| ) | ||
| this.$app.calendarState.setView( | ||
| view, | ||
| this.$app.datePickerState.selectedDate.value | ||
| ) | ||
| } | ||
| getDate() { | ||
| return this.$app.datePickerState.selectedDate.value | ||
| } | ||
| getView() { | ||
| return this.$app.calendarState.view.value | ||
| } | ||
| getRange() { | ||
| return this.$app.calendarState.range.value | ||
| } | ||
| constructor() { | ||
| Object.defineProperty(this, "name", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: PluginName.CalendarControls | ||
| }); | ||
| Object.defineProperty(this, "$app", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: void 0 | ||
| }); | ||
| } | ||
| beforeInit($app) { | ||
| this.$app = $app; | ||
| } | ||
| /** | ||
| * TODO v2: remove this method | ||
| * */ | ||
| init($app) { | ||
| this.$app = $app; | ||
| } | ||
| setDate(date) { | ||
| if (!dateStringRegex.test(date)) | ||
| throw new Error('Invalid date. Expected format YYYY-MM-DD'); | ||
| this.$app.datePickerState.selectedDate.value = date; | ||
| } | ||
| setView(view) { | ||
| const viewToSet = this.$app.config.views.find((v) => v.name === view); | ||
| if (!viewToSet) | ||
| throw new Error(`Invalid view name. Expected one of ${this.$app.config.views.map((v) => v.name).join(', ')}`); | ||
| this.$app.calendarState.setView(view, this.$app.datePickerState.selectedDate.value); | ||
| } | ||
| getDate() { | ||
| return this.$app.datePickerState.selectedDate.value; | ||
| } | ||
| getView() { | ||
| return this.$app.calendarState.view.value; | ||
| } | ||
| getRange() { | ||
| return this.$app.calendarState.range.value; | ||
| } | ||
| } | ||
| const createCalendarControlsPlugin = () => { | ||
| return new CalendarControlsPluginImpl() | ||
| } | ||
| return new CalendarControlsPluginImpl(); | ||
| }; | ||
| export { createCalendarControlsPlugin } | ||
| export { createCalendarControlsPlugin }; |
@@ -1,56 +0,56 @@ | ||
| import { Signal, ReadonlySignal } from '@preact/signals' | ||
| import { JSXInternal } from 'preact/src/jsx' | ||
| import { Signal, ReadonlySignal } from "@preact/signals"; | ||
| import { JSXInternal } from "preact/src/jsx"; | ||
| declare enum WeekDay { | ||
| SUNDAY = 0, | ||
| MONDAY = 1, | ||
| TUESDAY = 2, | ||
| WEDNESDAY = 3, | ||
| THURSDAY = 4, | ||
| FRIDAY = 5, | ||
| SATURDAY = 6, | ||
| SUNDAY = 0, | ||
| MONDAY = 1, | ||
| TUESDAY = 2, | ||
| WEDNESDAY = 3, | ||
| THURSDAY = 4, | ||
| FRIDAY = 5, | ||
| SATURDAY = 6 | ||
| } | ||
| type WeekWithDates = Date[] | ||
| type MonthWithDates = Date[][] | ||
| type WeekWithDates = Date[]; | ||
| type MonthWithDates = Date[][]; | ||
| declare enum Month { | ||
| JANUARY = 0, | ||
| FEBRUARY = 1, | ||
| MARCH = 2, | ||
| APRIL = 3, | ||
| MAY = 4, | ||
| JUNE = 5, | ||
| JULY = 6, | ||
| AUGUST = 7, | ||
| SEPTEMBER = 8, | ||
| OCTOBER = 9, | ||
| NOVEMBER = 10, | ||
| DECEMBER = 11, | ||
| JANUARY = 0, | ||
| FEBRUARY = 1, | ||
| MARCH = 2, | ||
| APRIL = 3, | ||
| MAY = 4, | ||
| JUNE = 5, | ||
| JULY = 6, | ||
| AUGUST = 7, | ||
| SEPTEMBER = 8, | ||
| OCTOBER = 9, | ||
| NOVEMBER = 10, | ||
| DECEMBER = 11 | ||
| } | ||
| interface TimeUnits { | ||
| firstDayOfWeek: WeekDay | ||
| getMonthWithTrailingAndLeadingDays(year: number, month: Month): MonthWithDates | ||
| getWeekFor(date: Date): WeekWithDates | ||
| getMonthsFor(year: number): Date[] | ||
| firstDayOfWeek: WeekDay; | ||
| getMonthWithTrailingAndLeadingDays(year: number, month: Month): MonthWithDates; | ||
| getWeekFor(date: Date): WeekWithDates; | ||
| getMonthsFor(year: number): Date[]; | ||
| } | ||
| declare enum DatePickerView { | ||
| MONTH_DAYS = 'month-days', | ||
| YEARS = 'years', | ||
| MONTH_DAYS = "month-days", | ||
| YEARS = "years" | ||
| } | ||
| interface DatePickerState { | ||
| isOpen: Signal<boolean> | ||
| isDisabled: Signal<boolean> | ||
| selectedDate: Signal<string> | ||
| inputDisplayedValue: Signal<string> | ||
| datePickerDate: Signal<string> | ||
| datePickerView: Signal<DatePickerView> | ||
| inputWrapperElement: Signal<HTMLDivElement | undefined> | ||
| isDark: Signal<boolean> | ||
| open(): void | ||
| close(): void | ||
| toggle(): void | ||
| setView(view: DatePickerView): void | ||
| isOpen: Signal<boolean>; | ||
| isDisabled: Signal<boolean>; | ||
| selectedDate: Signal<string>; | ||
| inputDisplayedValue: Signal<string>; | ||
| datePickerDate: Signal<string>; | ||
| datePickerView: Signal<DatePickerView>; | ||
| inputWrapperElement: Signal<HTMLDivElement | undefined>; | ||
| isDark: Signal<boolean>; | ||
| open(): void; | ||
| close(): void; | ||
| toggle(): void; | ||
| setView(view: DatePickerView): void; | ||
| } | ||
| type TranslationVariables = { | ||
| [key: string]: string | number | ||
| } | ||
| type TranslateFn = (key: string, variables?: TranslationVariables) => string | ||
| [key: string]: string | number; | ||
| }; | ||
| type TranslateFn = (key: string, variables?: TranslationVariables) => string; | ||
| /** | ||
@@ -60,5 +60,5 @@ * This interface serves as a bridge between the AppSingleton for the date picker and calendar | ||
| interface AppSingleton { | ||
| timeUnitsImpl: TimeUnits | ||
| datePickerState: DatePickerState | ||
| translate: TranslateFn | ||
| timeUnitsImpl: TimeUnits; | ||
| datePickerState: DatePickerState; | ||
| translate: TranslateFn; | ||
| } | ||
@@ -69,358 +69,327 @@ /** | ||
| interface Config { | ||
| locale: string | ||
| firstDayOfWeek: WeekDay | ||
| locale: string; | ||
| firstDayOfWeek: WeekDay; | ||
| } | ||
| declare enum Placement { | ||
| TOP_START = 'top-start', | ||
| TOP_END = 'top-end', | ||
| BOTTOM_START = 'bottom-start', | ||
| BOTTOM_END = 'bottom-end', | ||
| TOP_START = "top-start", | ||
| TOP_END = "top-end", | ||
| BOTTOM_START = "bottom-start", | ||
| BOTTOM_END = "bottom-end" | ||
| } | ||
| interface DatePickerAppSingleton extends AppSingleton { | ||
| config: DatePickerConfigInternal | ||
| config: DatePickerConfigInternal; | ||
| } | ||
| type DatePickerListeners = { | ||
| onChange?: (date: string) => void | ||
| onEscapeKeyDown?: ($app: DatePickerAppSingleton) => void | ||
| } | ||
| onChange?: (date: string) => void; | ||
| onEscapeKeyDown?: ($app: DatePickerAppSingleton) => void; | ||
| }; | ||
| type DatePickerStyle = { | ||
| dark?: boolean | ||
| fullWidth?: boolean | ||
| } | ||
| dark?: boolean; | ||
| fullWidth?: boolean; | ||
| }; | ||
| interface DatePickerConfigInternal extends Config { | ||
| min: string | ||
| max: string | ||
| placement: Placement | ||
| listeners: DatePickerListeners | ||
| style: DatePickerStyle | ||
| teleportTo?: HTMLElement | ||
| label?: string | ||
| name?: string | ||
| disabled?: boolean | ||
| min: string; | ||
| max: string; | ||
| placement: Placement; | ||
| listeners: DatePickerListeners; | ||
| style: DatePickerStyle; | ||
| teleportTo?: HTMLElement; | ||
| label?: string; | ||
| name?: string; | ||
| disabled?: boolean; | ||
| } | ||
| // This enum is used to represent names of all internally built views of the calendar | ||
| declare enum InternalViewName { | ||
| Day = 'day', | ||
| Week = 'week', | ||
| MonthGrid = 'month-grid', | ||
| MonthAgenda = 'month-agenda', | ||
| Day = "day", | ||
| Week = "week", | ||
| MonthGrid = "month-grid", | ||
| MonthAgenda = "month-agenda" | ||
| } | ||
| // Since implementers can use custom views, we need to have a type that combines the internal views with these custom views | ||
| type ViewName = InternalViewName | string | ||
| type ViewName = InternalViewName | string; | ||
| type DateRange = { | ||
| start: string | ||
| end: string | ||
| } | ||
| start: string; | ||
| end: string; | ||
| }; | ||
| interface RangeSetterConfig { | ||
| date: string | ||
| timeUnitsImpl: TimeUnits | ||
| calendarConfig: CalendarConfigInternal | ||
| range: Signal<DateRange | null> | ||
| date: string; | ||
| timeUnitsImpl: TimeUnits; | ||
| calendarConfig: CalendarConfigInternal; | ||
| range: Signal<DateRange | null>; | ||
| } | ||
| type PreactViewComponent = (props: { | ||
| $app: CalendarAppSingleton | ||
| id: string | ||
| }) => JSXInternal.Element | ||
| declare const addMonths: (to: string, nMonths: number) => string | ||
| declare const addDays: (to: string, nDays: number) => string | ||
| $app: CalendarAppSingleton; | ||
| id: string; | ||
| }) => JSXInternal.Element; | ||
| declare const addMonths: (to: string, nMonths: number) => string; | ||
| declare const addDays: (to: string, nDays: number) => string; | ||
| type ViewConfig<FrameworkComponent = PreactViewComponent> = { | ||
| /** | ||
| * a unique identifier for the view | ||
| * */ | ||
| name: ViewName | ||
| /** | ||
| * text that will be displayed in the view dropdown | ||
| * */ | ||
| label: string | ||
| /** | ||
| * function that is called when a new date is selected | ||
| * */ | ||
| setDateRange: (config: RangeSetterConfig) => DateRange | ||
| /** | ||
| * should the view be displayed on small screens (< 700px calendar width) | ||
| * */ | ||
| hasSmallScreenCompat: boolean | ||
| /** | ||
| * should the view be displayed on wide screens (> 700px calendar width) | ||
| * */ | ||
| hasWideScreenCompat: boolean | ||
| /** | ||
| * The component you want to render | ||
| * */ | ||
| Component: FrameworkComponent | ||
| /** | ||
| * function that is called when the user clicks the backward/forward button | ||
| * */ | ||
| backwardForwardFn: typeof addDays | typeof addMonths | ||
| /** | ||
| * number of units to add into the backwardForwardFn function. Result behind the scenes for example: | ||
| * backwardForwardFn = addDays | ||
| * backwardForwardUnits = 1 | ||
| * result (behind the scenes) = addDays(date, 1) | ||
| * */ | ||
| backwardForwardUnits: number | ||
| } | ||
| type View<FrameworkComponent = PreactViewComponent> = | ||
| ViewConfig<FrameworkComponent> & { | ||
| render(onElement: HTMLElement, $app: CalendarAppSingleton): void | ||
| destroy(): void | ||
| } | ||
| type EventId = number | string | ||
| type startDate = string | ||
| type nDays = number | ||
| type EventFragments = Record<startDate, nDays> | ||
| /** | ||
| * a unique identifier for the view | ||
| * */ | ||
| name: ViewName; | ||
| /** | ||
| * text that will be displayed in the view dropdown | ||
| * */ | ||
| label: string; | ||
| /** | ||
| * function that is called when a new date is selected | ||
| * */ | ||
| setDateRange: (config: RangeSetterConfig) => DateRange; | ||
| /** | ||
| * should the view be displayed on small screens (< 700px calendar width) | ||
| * */ | ||
| hasSmallScreenCompat: boolean; | ||
| /** | ||
| * should the view be displayed on wide screens (> 700px calendar width) | ||
| * */ | ||
| hasWideScreenCompat: boolean; | ||
| /** | ||
| * The component you want to render | ||
| * */ | ||
| Component: FrameworkComponent; | ||
| /** | ||
| * function that is called when the user clicks the backward/forward button | ||
| * */ | ||
| backwardForwardFn: typeof addDays | typeof addMonths; | ||
| /** | ||
| * number of units to add into the backwardForwardFn function. Result behind the scenes for example: | ||
| * backwardForwardFn = addDays | ||
| * backwardForwardUnits = 1 | ||
| * result (behind the scenes) = addDays(date, 1) | ||
| * */ | ||
| backwardForwardUnits: number; | ||
| }; | ||
| type View<FrameworkComponent = PreactViewComponent> = ViewConfig<FrameworkComponent> & { | ||
| render(onElement: HTMLElement, $app: CalendarAppSingleton): void; | ||
| destroy(): void; | ||
| }; | ||
| type EventId = number | string; | ||
| type startDate = string; | ||
| type nDays = number; | ||
| type EventFragments = Record<startDate, nDays>; | ||
| type CalendarEventOptions = { | ||
| disableDND?: boolean | ||
| disableResize?: boolean | ||
| additionalClasses?: string[] | ||
| } | ||
| disableDND?: boolean; | ||
| disableResize?: boolean; | ||
| additionalClasses?: string[]; | ||
| }; | ||
| interface CalendarEventExternal { | ||
| id: EventId | ||
| start: string | ||
| end: string | ||
| title?: string | ||
| people?: string[] | ||
| location?: string | ||
| description?: string | ||
| calendarId?: string | ||
| _options?: CalendarEventOptions | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| [key: string]: any | ||
| id: EventId; | ||
| start: string; | ||
| end: string; | ||
| title?: string; | ||
| people?: string[]; | ||
| location?: string; | ||
| description?: string; | ||
| calendarId?: string; | ||
| _options?: CalendarEventOptions; | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| [key: string]: any; | ||
| } | ||
| interface CalendarEventInternal extends CalendarEventExternal { | ||
| // event duration | ||
| _isSingleDayTimed: boolean | ||
| _isSingleDayFullDay: boolean | ||
| _isSingleHybridDayTimed: boolean | ||
| _isMultiDayTimed: boolean | ||
| _isMultiDayFullDay: boolean | ||
| // week time grid | ||
| _previousConcurrentEvents: number | undefined | ||
| _totalConcurrentEvents: number | undefined | ||
| // week date grid | ||
| _nDaysInGrid: number | undefined | ||
| // month grid | ||
| _eventFragments: EventFragments | ||
| _color: string | ||
| _getForeignProperties(): Record<string, unknown> | ||
| _getExternalEvent(): CalendarEventExternal | ||
| // event duration | ||
| _isSingleDayTimed: boolean; | ||
| _isSingleDayFullDay: boolean; | ||
| _isSingleHybridDayTimed: boolean; | ||
| _isMultiDayTimed: boolean; | ||
| _isMultiDayFullDay: boolean; | ||
| // week time grid | ||
| _previousConcurrentEvents: number | undefined; | ||
| _totalConcurrentEvents: number | undefined; | ||
| // week date grid | ||
| _nDaysInGrid: number | undefined; | ||
| // month grid | ||
| _eventFragments: EventFragments; | ||
| _color: string; | ||
| _getForeignProperties(): Record<string, unknown>; | ||
| _getExternalEvent(): CalendarEventExternal; | ||
| } | ||
| type DayBoundariesInternal = { | ||
| start: number | ||
| end: number | ||
| start: number; | ||
| end: number; | ||
| }; | ||
| interface TimeGridDragHandler { | ||
| } | ||
| interface TimeGridDragHandler {} | ||
| type DayBoundariesDateTime = { | ||
| start: string | ||
| end: string | ||
| start: string; | ||
| end: string; | ||
| }; | ||
| interface DateGridDragHandler { | ||
| } | ||
| interface DateGridDragHandler {} | ||
| interface EventCoordinates { | ||
| clientX: number | ||
| clientY: number | ||
| clientX: number; | ||
| clientY: number; | ||
| } | ||
| interface DragHandlerDependencies { | ||
| $app: CalendarAppSingleton | ||
| eventCoordinates: EventCoordinates | ||
| eventCopy: CalendarEventInternal | ||
| updateCopy: (newCopy: CalendarEventInternal | undefined) => void | ||
| $app: CalendarAppSingleton; | ||
| eventCoordinates: EventCoordinates; | ||
| eventCopy: CalendarEventInternal; | ||
| updateCopy: (newCopy: CalendarEventInternal | undefined) => void; | ||
| } | ||
| interface MonthGridDragHandler {} | ||
| interface MonthGridDragHandler { | ||
| } | ||
| interface DragAndDropPlugin extends PluginBase { | ||
| createTimeGridDragHandler( | ||
| dependencies: DragHandlerDependencies, | ||
| dayBoundariesDateTime: DayBoundariesDateTime | ||
| ): TimeGridDragHandler | ||
| createDateGridDragHandler( | ||
| dependencies: DragHandlerDependencies | ||
| ): DateGridDragHandler | ||
| createMonthGridDragHandler( | ||
| calendarEvent: CalendarEventInternal, | ||
| $app: CalendarAppSingleton | ||
| ): MonthGridDragHandler | ||
| createTimeGridDragHandler(dependencies: DragHandlerDependencies, dayBoundariesDateTime: DayBoundariesDateTime): TimeGridDragHandler; | ||
| createDateGridDragHandler(dependencies: DragHandlerDependencies): DateGridDragHandler; | ||
| createMonthGridDragHandler(calendarEvent: CalendarEventInternal, $app: CalendarAppSingleton): MonthGridDragHandler; | ||
| } | ||
| type EventModalProps = { | ||
| $app: CalendarAppSingleton | ||
| } | ||
| $app: CalendarAppSingleton; | ||
| }; | ||
| interface EventModalPlugin extends PluginBase { | ||
| calendarEvent: Signal<CalendarEventInternal | null> | ||
| calendarEventDOMRect: Signal<DOMRect | null> | ||
| calendarEventElement: Signal<HTMLElement | null> | ||
| close(): void | ||
| setCalendarEvent( | ||
| event: CalendarEventInternal | null, | ||
| eventTargetDOMRect: DOMRect | null | ||
| ): void | ||
| ComponentFn(props: EventModalProps): JSXInternal.Element | ||
| calendarEvent: Signal<CalendarEventInternal | null>; | ||
| calendarEventDOMRect: Signal<DOMRect | null>; | ||
| calendarEventElement: Signal<HTMLElement | null>; | ||
| close(): void; | ||
| setCalendarEvent(event: CalendarEventInternal | null, eventTargetDOMRect: DOMRect | null): void; | ||
| ComponentFn(props: EventModalProps): JSXInternal.Element; | ||
| } | ||
| interface CalendarCallbacks { | ||
| onEventUpdate?: (event: CalendarEventExternal) => void | ||
| onEventClick?: (event: CalendarEventExternal) => void | ||
| onRangeUpdate?: (range: DateRange) => void | ||
| onSelectedDateUpdate?: (date: string) => void | ||
| onClickDate?: (date: string) => void | ||
| onDoubleClickDate?: (date: string) => void | ||
| onClickDateTime?: (dateTime: string) => void | ||
| onDoubleClickDateTime?: (dateTime: string) => void | ||
| onClickAgendaDate?: (date: string) => void | ||
| onClickPlusEvents?: (date: string) => void | ||
| isCalendarSmall?: ($app: CalendarAppSingleton) => boolean | ||
| onEventUpdate?: (event: CalendarEventExternal) => void; | ||
| onEventClick?: (event: CalendarEventExternal) => void; | ||
| onRangeUpdate?: (range: DateRange) => void; | ||
| onSelectedDateUpdate?: (date: string) => void; | ||
| onClickDate?: (date: string) => void; | ||
| onDoubleClickDate?: (date: string) => void; | ||
| onClickDateTime?: (dateTime: string) => void; | ||
| onDoubleClickDateTime?: (dateTime: string) => void; | ||
| onClickAgendaDate?: (date: string) => void; | ||
| onClickPlusEvents?: (date: string) => void; | ||
| isCalendarSmall?: ($app: CalendarAppSingleton) => boolean; | ||
| } | ||
| type CustomComponentFns = { | ||
| timeGridEvent?: CustomComponentFn | ||
| dateGridEvent?: CustomComponentFn | ||
| monthGridEvent?: CustomComponentFn | ||
| monthAgendaEvent?: CustomComponentFn | ||
| eventModal?: CustomComponentFn | ||
| headerContentLeftPrepend?: CustomComponentFn | ||
| headerContentLeftAppend?: CustomComponentFn | ||
| headerContentRightPrepend?: CustomComponentFn | ||
| headerContentRightAppend?: CustomComponentFn | ||
| } | ||
| timeGridEvent?: CustomComponentFn; | ||
| dateGridEvent?: CustomComponentFn; | ||
| monthGridEvent?: CustomComponentFn; | ||
| monthAgendaEvent?: CustomComponentFn; | ||
| eventModal?: CustomComponentFn; | ||
| headerContentLeftPrepend?: CustomComponentFn; | ||
| headerContentLeftAppend?: CustomComponentFn; | ||
| headerContentRightPrepend?: CustomComponentFn; | ||
| headerContentRightAppend?: CustomComponentFn; | ||
| }; | ||
| interface EventsFacade { | ||
| get(id: EventId): CalendarEventExternal | undefined | ||
| getAll(): CalendarEventExternal[] | ||
| add(event: CalendarEventExternal): void | ||
| update(event: CalendarEventExternal): void | ||
| remove(id: EventId): void | ||
| set(events: CalendarEventExternal[]): void | ||
| get(id: EventId): CalendarEventExternal | undefined; | ||
| getAll(): CalendarEventExternal[]; | ||
| add(event: CalendarEventExternal): void; | ||
| update(event: CalendarEventExternal): void; | ||
| remove(id: EventId): void; | ||
| set(events: CalendarEventExternal[]): void; | ||
| } | ||
| interface EventRecurrencePlugin extends PluginBase { | ||
| updateRecurrenceDND( | ||
| eventId: EventId, | ||
| oldEventStart: string, | ||
| newEventStart: string | ||
| ): void | ||
| updateRecurrenceOnResize( | ||
| eventId: EventId, | ||
| oldEventEnd: string, | ||
| newEventEnd: string | ||
| ): void | ||
| eventsFacade: EventsFacade | ||
| updateRecurrenceDND(eventId: EventId, oldEventStart: string, newEventStart: string): void; | ||
| updateRecurrenceOnResize(eventId: EventId, oldEventEnd: string, newEventEnd: string): void; | ||
| eventsFacade: EventsFacade; | ||
| } | ||
| interface ResizePlugin extends PluginBase { | ||
| createTimeGridEventResizer( | ||
| calendarEvent: CalendarEventInternal, | ||
| updateCopy: (newCopy: CalendarEventInternal | undefined) => void, | ||
| mouseDownEvent: MouseEvent, | ||
| dayBoundariesDateTime: { | ||
| start: string | ||
| end: string | ||
| } | ||
| ): void | ||
| createDateGridEventResizer( | ||
| calendarEvent: CalendarEventInternal, | ||
| updateCopy: (newCopy: CalendarEventInternal | undefined) => void, | ||
| mouseDownEvent: MouseEvent | ||
| ): void | ||
| createTimeGridEventResizer(calendarEvent: CalendarEventInternal, updateCopy: (newCopy: CalendarEventInternal | undefined) => void, mouseDownEvent: MouseEvent, dayBoundariesDateTime: { | ||
| start: string; | ||
| end: string; | ||
| }): void; | ||
| createDateGridEventResizer(calendarEvent: CalendarEventInternal, updateCopy: (newCopy: CalendarEventInternal | undefined) => void, mouseDownEvent: MouseEvent): void; | ||
| } | ||
| type WeekOptions = { | ||
| gridHeight: number | ||
| nDays: number | ||
| eventWidth: number | ||
| } | ||
| gridHeight: number; | ||
| nDays: number; | ||
| eventWidth: number; | ||
| }; | ||
| type MonthGridOptions = { | ||
| nEventsPerDay: number | ||
| } | ||
| nEventsPerDay: number; | ||
| }; | ||
| type ColorDefinition = { | ||
| main: string | ||
| container: string | ||
| onContainer: string | ||
| } | ||
| main: string; | ||
| container: string; | ||
| onContainer: string; | ||
| }; | ||
| type CalendarType = { | ||
| colorName: string | ||
| label?: string | ||
| lightColors?: ColorDefinition | ||
| darkColors?: ColorDefinition | ||
| } | ||
| colorName: string; | ||
| label?: string; | ||
| lightColors?: ColorDefinition; | ||
| darkColors?: ColorDefinition; | ||
| }; | ||
| type Plugins = { | ||
| dragAndDrop?: DragAndDropPlugin | ||
| eventModal?: EventModalPlugin | ||
| scrollController?: PluginBase | ||
| eventRecurrence?: EventRecurrencePlugin | ||
| resize?: ResizePlugin | ||
| [key: string]: PluginBase | undefined | ||
| } | ||
| type CustomComponentFn = ( | ||
| wrapperElement: HTMLElement, | ||
| props: Record<string, unknown> | ||
| ) => void | ||
| dragAndDrop?: DragAndDropPlugin; | ||
| eventModal?: EventModalPlugin; | ||
| scrollController?: PluginBase; | ||
| eventRecurrence?: EventRecurrencePlugin; | ||
| resize?: ResizePlugin; | ||
| [key: string]: PluginBase | undefined; | ||
| }; | ||
| type CustomComponentFn = (wrapperElement: HTMLElement, props: Record<string, unknown>) => void; | ||
| interface CalendarConfigInternal extends Config { | ||
| defaultView: ViewName | ||
| views: View[] | ||
| dayBoundaries: DayBoundariesInternal | ||
| weekOptions: WeekOptions | ||
| monthGridOptions: MonthGridOptions | ||
| calendars: Signal<Record<string, CalendarType>> | ||
| plugins: Plugins | ||
| isDark: boolean | ||
| isResponsive: boolean | ||
| callbacks: CalendarCallbacks | ||
| _customComponentFns: CustomComponentFns | ||
| minDate?: string | ||
| maxDate?: string | ||
| // Getters | ||
| isHybridDay: boolean | ||
| timePointsPerDay: number | ||
| defaultView: ViewName; | ||
| views: View[]; | ||
| dayBoundaries: DayBoundariesInternal; | ||
| weekOptions: WeekOptions; | ||
| monthGridOptions: MonthGridOptions; | ||
| calendars: Signal<Record<string, CalendarType>>; | ||
| plugins: Plugins; | ||
| isDark: boolean; | ||
| isResponsive: boolean; | ||
| callbacks: CalendarCallbacks; | ||
| _customComponentFns: CustomComponentFns; | ||
| minDate?: string; | ||
| maxDate?: string; | ||
| // Getters | ||
| isHybridDay: boolean; | ||
| timePointsPerDay: number; | ||
| } | ||
| interface CalendarState { | ||
| isCalendarSmall: Signal<boolean | undefined> | ||
| view: ReadonlySignal<ViewName> | ||
| setView: (view: ViewName, selectedDate: string) => void | ||
| range: Signal<DateRange | null> | ||
| isDark: Signal<boolean> | ||
| setRange: (date: string) => void | ||
| isCalendarSmall: Signal<boolean | undefined>; | ||
| view: ReadonlySignal<ViewName>; | ||
| setView: (view: ViewName, selectedDate: string) => void; | ||
| range: Signal<DateRange | null>; | ||
| isDark: Signal<boolean>; | ||
| setRange: (date: string) => void; | ||
| } | ||
| type EventsFilterPredicate = | ||
| | ((event: CalendarEventInternal) => boolean) | ||
| | undefined | ||
| type EventsFilterPredicate = ((event: CalendarEventInternal) => boolean) | undefined; | ||
| interface CalendarEvents { | ||
| list: Signal<CalendarEventInternal[]> | ||
| filterPredicate: Signal<EventsFilterPredicate> | ||
| list: Signal<CalendarEventInternal[]>; | ||
| filterPredicate: Signal<EventsFilterPredicate>; | ||
| } | ||
| interface CalendarElements { | ||
| calendarWrapper: HTMLDivElement | undefined | ||
| calendarWrapper: HTMLDivElement | undefined; | ||
| } | ||
| interface CalendarAppSingleton extends AppSingleton { | ||
| config: CalendarConfigInternal | ||
| datePickerConfig: DatePickerConfigInternal | ||
| calendarState: CalendarState | ||
| calendarEvents: CalendarEvents | ||
| elements: CalendarElements | ||
| config: CalendarConfigInternal; | ||
| datePickerConfig: DatePickerConfigInternal; | ||
| calendarState: CalendarState; | ||
| calendarEvents: CalendarEvents; | ||
| elements: CalendarElements; | ||
| } | ||
| interface PluginBase { | ||
| name: string | ||
| // TODO v2: change to `beforeRender` | ||
| /** | ||
| * Allow implementers to dynamically add any properties to the global app object as they see fit. | ||
| * In order to avoid conflict with future properties added to the library, we recommend | ||
| * using the unique prefix `$` for any custom properties added to the global app object. | ||
| * for example $app['$websocketService'] = new WebsocketService(). | ||
| * Adding properties to existing sub-objects is discouraged, since this will make your application more | ||
| * brittle to future changes in the library. | ||
| * */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| beforeInit?($app: CalendarAppSingleton | any): void | ||
| // TODO v2: change to `onRender` and remove $app parameter | ||
| /** | ||
| * Allow implementers to dynamically add any properties to the global app object as they see fit. | ||
| * In order to avoid conflict with future properties added to the library, we recommend | ||
| * using the unique prefix `$` for any custom properties added to the global app object. | ||
| * for example $app['$websocketService'] = new WebsocketService(). | ||
| * Adding properties to existing sub-objects is discouraged, since this will make your application more | ||
| * brittle to future changes in the library. | ||
| * */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| init?($app: CalendarAppSingleton | any): void | ||
| destroy?(): void | ||
| name: string; | ||
| // TODO v2: change to `beforeRender` | ||
| /** | ||
| * Allow implementers to dynamically add any properties to the global app object as they see fit. | ||
| * In order to avoid conflict with future properties added to the library, we recommend | ||
| * using the unique prefix `$` for any custom properties added to the global app object. | ||
| * for example $app['$websocketService'] = new WebsocketService(). | ||
| * Adding properties to existing sub-objects is discouraged, since this will make your application more | ||
| * brittle to future changes in the library. | ||
| * */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| beforeInit?($app: CalendarAppSingleton | any): void; | ||
| // TODO v2: change to `onRender` and remove $app parameter | ||
| /** | ||
| * Allow implementers to dynamically add any properties to the global app object as they see fit. | ||
| * In order to avoid conflict with future properties added to the library, we recommend | ||
| * using the unique prefix `$` for any custom properties added to the global app object. | ||
| * for example $app['$websocketService'] = new WebsocketService(). | ||
| * Adding properties to existing sub-objects is discouraged, since this will make your application more | ||
| * brittle to future changes in the library. | ||
| * */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| init?($app: CalendarAppSingleton | any): void; | ||
| destroy?(): void; | ||
| } | ||
| interface CalendarControlsPlugin extends PluginBase { | ||
| init($app: CalendarAppSingleton): void | ||
| setDate(date: string): void | ||
| setView(view: string): void | ||
| getDate(): string | ||
| getView(): string | ||
| getRange(): DateRange | null | ||
| init($app: CalendarAppSingleton): void; | ||
| setDate(date: string): void; | ||
| setView(view: string): void; | ||
| getDate(): string; | ||
| getView(): string; | ||
| getRange(): DateRange | null; | ||
| } | ||
| declare const createCalendarControlsPlugin: () => CalendarControlsPlugin | ||
| export { createCalendarControlsPlugin } | ||
| declare const createCalendarControlsPlugin: () => CalendarControlsPlugin; | ||
| export { createCalendarControlsPlugin }; |
@@ -1,80 +0,71 @@ | ||
| ;(function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' | ||
| ? factory(exports) | ||
| : typeof define === 'function' && define.amd | ||
| ? define(['exports'], factory) | ||
| : ((global = | ||
| typeof globalThis !== 'undefined' ? globalThis : global || self), | ||
| factory((global['@schedule-x/calendar-controls'] = {}))) | ||
| })(this, function (exports) { | ||
| 'use strict' | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : | ||
| typeof define === 'function' && define.amd ? define(['exports'], factory) : | ||
| (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SXCalendarControls = {})); | ||
| })(this, (function (exports) { 'use strict'; | ||
| var PluginName | ||
| ;(function (PluginName) { | ||
| PluginName['DragAndDrop'] = 'dragAndDrop' | ||
| PluginName['EventModal'] = 'eventModal' | ||
| PluginName['ScrollController'] = 'scrollController' | ||
| PluginName['EventRecurrence'] = 'eventRecurrence' | ||
| PluginName['Resize'] = 'resize' | ||
| PluginName['CalendarControls'] = 'calendarControls' | ||
| })(PluginName || (PluginName = {})) | ||
| var PluginName; | ||
| (function (PluginName) { | ||
| PluginName["DragAndDrop"] = "dragAndDrop"; | ||
| PluginName["EventModal"] = "eventModal"; | ||
| PluginName["ScrollController"] = "scrollController"; | ||
| PluginName["EventRecurrence"] = "eventRecurrence"; | ||
| PluginName["Resize"] = "resize"; | ||
| PluginName["CalendarControls"] = "calendarControls"; | ||
| })(PluginName || (PluginName = {})); | ||
| // regex for strings between 00:00 and 23:59 | ||
| const dateStringRegex = /^(\d{4})-(\d{2})-(\d{2})$/ | ||
| const dateStringRegex = /^(\d{4})-(\d{2})-(\d{2})$/; | ||
| class CalendarControlsPluginImpl { | ||
| constructor() { | ||
| Object.defineProperty(this, 'name', { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: PluginName.CalendarControls, | ||
| }) | ||
| Object.defineProperty(this, '$app', { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: void 0, | ||
| }) | ||
| } | ||
| beforeInit($app) { | ||
| this.$app = $app | ||
| } | ||
| /** | ||
| * TODO v2: remove this method | ||
| * */ | ||
| init($app) { | ||
| this.$app = $app | ||
| } | ||
| setDate(date) { | ||
| if (!dateStringRegex.test(date)) | ||
| throw new Error('Invalid date. Expected format YYYY-MM-DD') | ||
| this.$app.datePickerState.selectedDate.value = date | ||
| } | ||
| setView(view) { | ||
| const viewToSet = this.$app.config.views.find((v) => v.name === view) | ||
| if (!viewToSet) | ||
| throw new Error( | ||
| `Invalid view name. Expected one of ${this.$app.config.views.map((v) => v.name).join(', ')}` | ||
| ) | ||
| this.$app.calendarState.setView( | ||
| view, | ||
| this.$app.datePickerState.selectedDate.value | ||
| ) | ||
| } | ||
| getDate() { | ||
| return this.$app.datePickerState.selectedDate.value | ||
| } | ||
| getView() { | ||
| return this.$app.calendarState.view.value | ||
| } | ||
| getRange() { | ||
| return this.$app.calendarState.range.value | ||
| } | ||
| constructor() { | ||
| Object.defineProperty(this, "name", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: PluginName.CalendarControls | ||
| }); | ||
| Object.defineProperty(this, "$app", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: void 0 | ||
| }); | ||
| } | ||
| beforeInit($app) { | ||
| this.$app = $app; | ||
| } | ||
| /** | ||
| * TODO v2: remove this method | ||
| * */ | ||
| init($app) { | ||
| this.$app = $app; | ||
| } | ||
| setDate(date) { | ||
| if (!dateStringRegex.test(date)) | ||
| throw new Error('Invalid date. Expected format YYYY-MM-DD'); | ||
| this.$app.datePickerState.selectedDate.value = date; | ||
| } | ||
| setView(view) { | ||
| const viewToSet = this.$app.config.views.find((v) => v.name === view); | ||
| if (!viewToSet) | ||
| throw new Error(`Invalid view name. Expected one of ${this.$app.config.views.map((v) => v.name).join(', ')}`); | ||
| this.$app.calendarState.setView(view, this.$app.datePickerState.selectedDate.value); | ||
| } | ||
| getDate() { | ||
| return this.$app.datePickerState.selectedDate.value; | ||
| } | ||
| getView() { | ||
| return this.$app.calendarState.view.value; | ||
| } | ||
| getRange() { | ||
| return this.$app.calendarState.range.value; | ||
| } | ||
| } | ||
| const createCalendarControlsPlugin = () => { | ||
| return new CalendarControlsPluginImpl() | ||
| } | ||
| return new CalendarControlsPluginImpl(); | ||
| }; | ||
| exports.createCalendarControlsPlugin = createCalendarControlsPlugin | ||
| }) | ||
| exports.createCalendarControlsPlugin = createCalendarControlsPlugin; | ||
| })); |
| { | ||
| "name": "@schedule-x/calendar-controls", | ||
| "version": "1.58.1", | ||
| "umdName": "SXCalendarControls", | ||
| "version": "1.59.0", | ||
| "description": "Plugin for extra controls for the Schedule-X calendar", | ||
@@ -30,3 +31,3 @@ "author": { | ||
| "homepage": "https://schedule-x.dev", | ||
| "gitHead": "e107e76362346f2d961b429936f7ee55b25695e7" | ||
| "gitHead": "1869e796b356e5014febb657ecb38e0755c2f66f" | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by7.47%
48563
- Number of package files
- increased by12.5%
9
Worsened metrics
- Lines of code
- decreased by-7.64%
1366
No dependency changes