Socket
Socket
Sign inDemoInstall

@schedule-x/calendar

Package Overview
Dependencies
Maintainers
1
Versions
126
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@schedule-x/calendar - npm Package Compare versions

Comparing version 1.43.0-alpha.0 to 1.43.0

657

dist/core.cjs.d.ts

@@ -1,51 +0,51 @@

import { Signal } from "@preact/signals";
import { JSXInternal } from "preact/src/jsx";
import { Signal } 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>;
selectedDate: Signal<string>;
inputDisplayedValue: Signal<string>;
datePickerDate: Signal<string>;
datePickerView: Signal<DatePickerView>;
inputWrapperElement: Signal<HTMLDivElement | undefined>;
open(): void;
close(): void;
toggle(): void;
setView(view: DatePickerView): void;
isOpen: Signal<boolean>
selectedDate: Signal<string>
inputDisplayedValue: Signal<string>
datePickerDate: Signal<string>
datePickerView: Signal<DatePickerView>
inputWrapperElement: Signal<HTMLDivElement | undefined>
open(): void
close(): void
toggle(): void
setView(view: DatePickerView): void
}
type TranslateFn = (key: string) => string;
type TranslateFn = (key: string) => string
/**

@@ -55,5 +55,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
}

@@ -64,319 +64,380 @@ /**

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',
}
type DatePickerListeners = {
onChange?: (date: string) => void;
};
onChange?: (date: string) => 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;
min: string
max: string
placement: Placement
listeners: DatePickerListeners
style: DatePickerStyle
teleportTo?: HTMLElement
label?: string
}
interface DatePickerConfigExternal extends Partial<Omit<DatePickerConfigInternal, "placement">> {
selectedDate?: string;
placement?: Placement | string;
interface DatePickerConfigExternal
extends Partial<Omit<DatePickerConfigInternal, 'placement'>> {
selectedDate?: string
placement?: Placement | string
}
// 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>
interface CalendarEventExternal {
id: EventId;
start: string;
end: string;
title?: string;
people?: string[];
location?: string;
description?: string;
calendarId?: string;
// 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
// 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 DayBoundariesExternal = {
start: string;
end: string;
};
start: string
end: string
}
type DayBoundariesInternal = {
start: number;
end: number;
};
start: number
end: number
}
interface PluginBase {
name: string;
init?($app: CalendarAppSingleton): void;
destroy?(): void;
name: string
init?($app: CalendarAppSingleton): void
destroy?(): void
}
interface TimeGridDragHandler {
}
interface TimeGridDragHandler {}
type DayBoundariesDateTime = {
start: string;
end: string;
};
interface DateGridDragHandler {
start: string
end: string
}
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>;
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>
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;
onClickDateTime?: (dateTime: string) => void;
onClickPlusEvents?: (date: string) => void;
onEventUpdate?: (event: CalendarEventExternal) => void
onEventClick?: (event: CalendarEventExternal) => void
onRangeUpdate?: (range: DateRange) => void
onSelectedDateUpdate?: (date: string) => void
onClickDate?: (date: string) => void
onClickDateTime?: (dateTime: string) => void
onClickPlusEvents?: (date: string) => void
}
type CustomComponentFns = {
timeGridEvent?: CustomComponentFn;
dateGridEvent?: CustomComponentFn;
monthGridEvent?: CustomComponentFn;
monthAgendaEvent?: CustomComponentFn;
eventModal?: CustomComponentFn;
};
timeGridEvent?: CustomComponentFn
dateGridEvent?: CustomComponentFn
monthGridEvent?: CustomComponentFn
monthAgendaEvent?: CustomComponentFn
eventModal?: 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;
};
gridHeight: 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;
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
callbacks: CalendarCallbacks
_customComponentFns: CustomComponentFns
minDate?: string
maxDate?: string
// Getters
isHybridDay: boolean
timePointsPerDay: number
}
interface CalendarDatePickerConfigExternal extends Omit<DatePickerConfigExternal, "listeners" | "placement"> {
interface CalendarDatePickerConfigExternal
extends Omit<DatePickerConfigExternal, 'listeners' | 'placement'> {}
interface ReducedCalendarConfigInternal
extends Omit<
CalendarConfigInternal,
| 'events'
| 'dayBoundaries'
| 'isHybridDay'
| 'plugins'
| 'views'
| '_customComponentFns'
| 'calendars'
> {}
interface CalendarConfigExternal
extends Partial<ReducedCalendarConfigInternal> {
datePicker?: CalendarDatePickerConfigExternal
events?: CalendarEventExternal[]
dayBoundaries?: DayBoundariesExternal
plugins?: PluginBase[]
views: [View, ...View[]]
selectedDate?: string
calendars?: Record<string, CalendarType>
}
interface ReducedCalendarConfigInternal extends Omit<CalendarConfigInternal, "events" | "dayBoundaries" | "isHybridDay" | "plugins" | "views" | "_customComponentFns" | "calendars"> {
}
interface CalendarConfigExternal extends Partial<ReducedCalendarConfigInternal> {
datePicker?: CalendarDatePickerConfigExternal;
events?: CalendarEventExternal[];
dayBoundaries?: DayBoundariesExternal;
plugins?: PluginBase[];
views: [
View,
...View[]
];
selectedDate?: string;
calendars?: Record<string, CalendarType>;
}
interface CalendarState {
isCalendarSmall: Signal<boolean | undefined>;
view: Signal<ViewName>;
range: Signal<DateRange | null>;
isDark: Signal<boolean>;
setRange: (date: string) => void;
isCalendarSmall: Signal<boolean | undefined>
view: Signal<ViewName>
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
}
declare class CalendarApp {
private $app;
events: EventsFacade;
constructor($app: CalendarAppSingleton);
render(el: HTMLElement): void;
setTheme(theme: "light" | "dark"): void;
/**
* @internal
* Purpose: To be consumed by framework adapters for custom component rendering.
* */
_setCustomComponentFn(fnId: keyof CustomComponentFns, fn: CustomComponentFn): void;
private $app
events: EventsFacade
constructor($app: CalendarAppSingleton)
render(el: HTMLElement): void
setTheme(theme: 'light' | 'dark'): void
/**
* @internal
* Purpose: To be consumed by framework adapters for custom component rendering.
* */
_setCustomComponentFn(
fnId: keyof CustomComponentFns,
fn: CustomComponentFn
): void
}
declare const createCalendar: (config: CalendarConfigExternal) => CalendarApp;
declare const viewWeek: View;
declare const viewMonthGrid: View;
declare const viewDay: View;
declare const viewMonthAgenda: View;
declare const createPreactView: (config: ViewConfig) => View;
declare const setRangeForWeek: (config: RangeSetterConfig) => DateRange;
declare const setRangeForMonth: (config: RangeSetterConfig) => DateRange;
declare const setRangeForDay: (config: RangeSetterConfig) => DateRange;
declare const externalEventToInternal: (event: CalendarEventExternal, config: CalendarConfigInternal) => CalendarEventInternal;
export type { CalendarConfigExternal as CalendarConfig, CustomComponentFn, CalendarEventExternal as CalendarEvent };
export { createCalendar, viewWeek, viewMonthGrid, viewDay, viewMonthAgenda, CalendarApp, createPreactView, setRangeForDay, setRangeForWeek, setRangeForMonth, externalEventToInternal };
declare const createCalendar: (config: CalendarConfigExternal) => CalendarApp
declare const viewWeek: View
declare const viewMonthGrid: View
declare const viewDay: View
declare const viewMonthAgenda: View
declare const createPreactView: (config: ViewConfig) => View
declare const setRangeForWeek: (config: RangeSetterConfig) => DateRange
declare const setRangeForMonth: (config: RangeSetterConfig) => DateRange
declare const setRangeForDay: (config: RangeSetterConfig) => DateRange
declare const externalEventToInternal: (
event: CalendarEventExternal,
config: CalendarConfigInternal
) => CalendarEventInternal
export type {
CalendarConfigExternal as CalendarConfig,
CustomComponentFn,
CalendarEventExternal as CalendarEvent,
}
export {
createCalendar,
viewWeek,
viewMonthGrid,
viewDay,
viewMonthAgenda,
CalendarApp,
createPreactView,
setRangeForDay,
setRangeForWeek,
setRangeForMonth,
externalEventToInternal,
}

@@ -1,51 +0,51 @@

import { Signal } from "@preact/signals";
import { JSXInternal } from "preact/src/jsx";
import { Signal } 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>;
selectedDate: Signal<string>;
inputDisplayedValue: Signal<string>;
datePickerDate: Signal<string>;
datePickerView: Signal<DatePickerView>;
inputWrapperElement: Signal<HTMLDivElement | undefined>;
open(): void;
close(): void;
toggle(): void;
setView(view: DatePickerView): void;
isOpen: Signal<boolean>
selectedDate: Signal<string>
inputDisplayedValue: Signal<string>
datePickerDate: Signal<string>
datePickerView: Signal<DatePickerView>
inputWrapperElement: Signal<HTMLDivElement | undefined>
open(): void
close(): void
toggle(): void
setView(view: DatePickerView): void
}
type TranslateFn = (key: string) => string;
type TranslateFn = (key: string) => string
/**

@@ -55,5 +55,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
}

@@ -64,319 +64,380 @@ /**

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',
}
type DatePickerListeners = {
onChange?: (date: string) => void;
};
onChange?: (date: string) => 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;
min: string
max: string
placement: Placement
listeners: DatePickerListeners
style: DatePickerStyle
teleportTo?: HTMLElement
label?: string
}
interface DatePickerConfigExternal extends Partial<Omit<DatePickerConfigInternal, "placement">> {
selectedDate?: string;
placement?: Placement | string;
interface DatePickerConfigExternal
extends Partial<Omit<DatePickerConfigInternal, 'placement'>> {
selectedDate?: string
placement?: Placement | string
}
// 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>
interface CalendarEventExternal {
id: EventId;
start: string;
end: string;
title?: string;
people?: string[];
location?: string;
description?: string;
calendarId?: string;
// 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
// 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 DayBoundariesExternal = {
start: string;
end: string;
};
start: string
end: string
}
type DayBoundariesInternal = {
start: number;
end: number;
};
start: number
end: number
}
interface PluginBase {
name: string;
init?($app: CalendarAppSingleton): void;
destroy?(): void;
name: string
init?($app: CalendarAppSingleton): void
destroy?(): void
}
interface TimeGridDragHandler {
}
interface TimeGridDragHandler {}
type DayBoundariesDateTime = {
start: string;
end: string;
};
interface DateGridDragHandler {
start: string
end: string
}
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>;
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>
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;
onClickDateTime?: (dateTime: string) => void;
onClickPlusEvents?: (date: string) => void;
onEventUpdate?: (event: CalendarEventExternal) => void
onEventClick?: (event: CalendarEventExternal) => void
onRangeUpdate?: (range: DateRange) => void
onSelectedDateUpdate?: (date: string) => void
onClickDate?: (date: string) => void
onClickDateTime?: (dateTime: string) => void
onClickPlusEvents?: (date: string) => void
}
type CustomComponentFns = {
timeGridEvent?: CustomComponentFn;
dateGridEvent?: CustomComponentFn;
monthGridEvent?: CustomComponentFn;
monthAgendaEvent?: CustomComponentFn;
eventModal?: CustomComponentFn;
};
timeGridEvent?: CustomComponentFn
dateGridEvent?: CustomComponentFn
monthGridEvent?: CustomComponentFn
monthAgendaEvent?: CustomComponentFn
eventModal?: 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;
};
gridHeight: 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;
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
callbacks: CalendarCallbacks
_customComponentFns: CustomComponentFns
minDate?: string
maxDate?: string
// Getters
isHybridDay: boolean
timePointsPerDay: number
}
interface CalendarDatePickerConfigExternal extends Omit<DatePickerConfigExternal, "listeners" | "placement"> {
interface CalendarDatePickerConfigExternal
extends Omit<DatePickerConfigExternal, 'listeners' | 'placement'> {}
interface ReducedCalendarConfigInternal
extends Omit<
CalendarConfigInternal,
| 'events'
| 'dayBoundaries'
| 'isHybridDay'
| 'plugins'
| 'views'
| '_customComponentFns'
| 'calendars'
> {}
interface CalendarConfigExternal
extends Partial<ReducedCalendarConfigInternal> {
datePicker?: CalendarDatePickerConfigExternal
events?: CalendarEventExternal[]
dayBoundaries?: DayBoundariesExternal
plugins?: PluginBase[]
views: [View, ...View[]]
selectedDate?: string
calendars?: Record<string, CalendarType>
}
interface ReducedCalendarConfigInternal extends Omit<CalendarConfigInternal, "events" | "dayBoundaries" | "isHybridDay" | "plugins" | "views" | "_customComponentFns" | "calendars"> {
}
interface CalendarConfigExternal extends Partial<ReducedCalendarConfigInternal> {
datePicker?: CalendarDatePickerConfigExternal;
events?: CalendarEventExternal[];
dayBoundaries?: DayBoundariesExternal;
plugins?: PluginBase[];
views: [
View,
...View[]
];
selectedDate?: string;
calendars?: Record<string, CalendarType>;
}
interface CalendarState {
isCalendarSmall: Signal<boolean | undefined>;
view: Signal<ViewName>;
range: Signal<DateRange | null>;
isDark: Signal<boolean>;
setRange: (date: string) => void;
isCalendarSmall: Signal<boolean | undefined>
view: Signal<ViewName>
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
}
declare class CalendarApp {
private $app;
events: EventsFacade;
constructor($app: CalendarAppSingleton);
render(el: HTMLElement): void;
setTheme(theme: "light" | "dark"): void;
/**
* @internal
* Purpose: To be consumed by framework adapters for custom component rendering.
* */
_setCustomComponentFn(fnId: keyof CustomComponentFns, fn: CustomComponentFn): void;
private $app
events: EventsFacade
constructor($app: CalendarAppSingleton)
render(el: HTMLElement): void
setTheme(theme: 'light' | 'dark'): void
/**
* @internal
* Purpose: To be consumed by framework adapters for custom component rendering.
* */
_setCustomComponentFn(
fnId: keyof CustomComponentFns,
fn: CustomComponentFn
): void
}
declare const createCalendar: (config: CalendarConfigExternal) => CalendarApp;
declare const viewWeek: View;
declare const viewMonthGrid: View;
declare const viewDay: View;
declare const viewMonthAgenda: View;
declare const createPreactView: (config: ViewConfig) => View;
declare const setRangeForWeek: (config: RangeSetterConfig) => DateRange;
declare const setRangeForMonth: (config: RangeSetterConfig) => DateRange;
declare const setRangeForDay: (config: RangeSetterConfig) => DateRange;
declare const externalEventToInternal: (event: CalendarEventExternal, config: CalendarConfigInternal) => CalendarEventInternal;
export type { CalendarConfigExternal as CalendarConfig, CustomComponentFn, CalendarEventExternal as CalendarEvent };
export { createCalendar, viewWeek, viewMonthGrid, viewDay, viewMonthAgenda, CalendarApp, createPreactView, setRangeForDay, setRangeForWeek, setRangeForMonth, externalEventToInternal };
declare const createCalendar: (config: CalendarConfigExternal) => CalendarApp
declare const viewWeek: View
declare const viewMonthGrid: View
declare const viewDay: View
declare const viewMonthAgenda: View
declare const createPreactView: (config: ViewConfig) => View
declare const setRangeForWeek: (config: RangeSetterConfig) => DateRange
declare const setRangeForMonth: (config: RangeSetterConfig) => DateRange
declare const setRangeForDay: (config: RangeSetterConfig) => DateRange
declare const externalEventToInternal: (
event: CalendarEventExternal,
config: CalendarConfigInternal
) => CalendarEventInternal
export type {
CalendarConfigExternal as CalendarConfig,
CustomComponentFn,
CalendarEventExternal as CalendarEvent,
}
export {
createCalendar,
viewWeek,
viewMonthGrid,
viewDay,
viewMonthAgenda,
CalendarApp,
createPreactView,
setRangeForDay,
setRangeForWeek,
setRangeForMonth,
externalEventToInternal,
}

@@ -1,51 +0,51 @@

import { Signal } from "@preact/signals";
import { JSXInternal } from "preact/src/jsx";
import { Signal } 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>;
selectedDate: Signal<string>;
inputDisplayedValue: Signal<string>;
datePickerDate: Signal<string>;
datePickerView: Signal<DatePickerView>;
inputWrapperElement: Signal<HTMLDivElement | undefined>;
open(): void;
close(): void;
toggle(): void;
setView(view: DatePickerView): void;
isOpen: Signal<boolean>
selectedDate: Signal<string>
inputDisplayedValue: Signal<string>
datePickerDate: Signal<string>
datePickerView: Signal<DatePickerView>
inputWrapperElement: Signal<HTMLDivElement | undefined>
open(): void
close(): void
toggle(): void
setView(view: DatePickerView): void
}
type TranslateFn = (key: string) => string;
type TranslateFn = (key: string) => string
/**

@@ -55,5 +55,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
}

@@ -64,319 +64,380 @@ /**

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',
}
type DatePickerListeners = {
onChange?: (date: string) => void;
};
onChange?: (date: string) => 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;
min: string
max: string
placement: Placement
listeners: DatePickerListeners
style: DatePickerStyle
teleportTo?: HTMLElement
label?: string
}
interface DatePickerConfigExternal extends Partial<Omit<DatePickerConfigInternal, "placement">> {
selectedDate?: string;
placement?: Placement | string;
interface DatePickerConfigExternal
extends Partial<Omit<DatePickerConfigInternal, 'placement'>> {
selectedDate?: string
placement?: Placement | string
}
// 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>
interface CalendarEventExternal {
id: EventId;
start: string;
end: string;
title?: string;
people?: string[];
location?: string;
description?: string;
calendarId?: string;
// 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
// 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 DayBoundariesExternal = {
start: string;
end: string;
};
start: string
end: string
}
type DayBoundariesInternal = {
start: number;
end: number;
};
start: number
end: number
}
interface PluginBase {
name: string;
init?($app: CalendarAppSingleton): void;
destroy?(): void;
name: string
init?($app: CalendarAppSingleton): void
destroy?(): void
}
interface TimeGridDragHandler {
}
interface TimeGridDragHandler {}
type DayBoundariesDateTime = {
start: string;
end: string;
};
interface DateGridDragHandler {
start: string
end: string
}
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>;
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>
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;
onClickDateTime?: (dateTime: string) => void;
onClickPlusEvents?: (date: string) => void;
onEventUpdate?: (event: CalendarEventExternal) => void
onEventClick?: (event: CalendarEventExternal) => void
onRangeUpdate?: (range: DateRange) => void
onSelectedDateUpdate?: (date: string) => void
onClickDate?: (date: string) => void
onClickDateTime?: (dateTime: string) => void
onClickPlusEvents?: (date: string) => void
}
type CustomComponentFns = {
timeGridEvent?: CustomComponentFn;
dateGridEvent?: CustomComponentFn;
monthGridEvent?: CustomComponentFn;
monthAgendaEvent?: CustomComponentFn;
eventModal?: CustomComponentFn;
};
timeGridEvent?: CustomComponentFn
dateGridEvent?: CustomComponentFn
monthGridEvent?: CustomComponentFn
monthAgendaEvent?: CustomComponentFn
eventModal?: 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;
};
gridHeight: 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;
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
callbacks: CalendarCallbacks
_customComponentFns: CustomComponentFns
minDate?: string
maxDate?: string
// Getters
isHybridDay: boolean
timePointsPerDay: number
}
interface CalendarDatePickerConfigExternal extends Omit<DatePickerConfigExternal, "listeners" | "placement"> {
interface CalendarDatePickerConfigExternal
extends Omit<DatePickerConfigExternal, 'listeners' | 'placement'> {}
interface ReducedCalendarConfigInternal
extends Omit<
CalendarConfigInternal,
| 'events'
| 'dayBoundaries'
| 'isHybridDay'
| 'plugins'
| 'views'
| '_customComponentFns'
| 'calendars'
> {}
interface CalendarConfigExternal
extends Partial<ReducedCalendarConfigInternal> {
datePicker?: CalendarDatePickerConfigExternal
events?: CalendarEventExternal[]
dayBoundaries?: DayBoundariesExternal
plugins?: PluginBase[]
views: [View, ...View[]]
selectedDate?: string
calendars?: Record<string, CalendarType>
}
interface ReducedCalendarConfigInternal extends Omit<CalendarConfigInternal, "events" | "dayBoundaries" | "isHybridDay" | "plugins" | "views" | "_customComponentFns" | "calendars"> {
}
interface CalendarConfigExternal extends Partial<ReducedCalendarConfigInternal> {
datePicker?: CalendarDatePickerConfigExternal;
events?: CalendarEventExternal[];
dayBoundaries?: DayBoundariesExternal;
plugins?: PluginBase[];
views: [
View,
...View[]
];
selectedDate?: string;
calendars?: Record<string, CalendarType>;
}
interface CalendarState {
isCalendarSmall: Signal<boolean | undefined>;
view: Signal<ViewName>;
range: Signal<DateRange | null>;
isDark: Signal<boolean>;
setRange: (date: string) => void;
isCalendarSmall: Signal<boolean | undefined>
view: Signal<ViewName>
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
}
declare class CalendarApp {
private $app;
events: EventsFacade;
constructor($app: CalendarAppSingleton);
render(el: HTMLElement): void;
setTheme(theme: "light" | "dark"): void;
/**
* @internal
* Purpose: To be consumed by framework adapters for custom component rendering.
* */
_setCustomComponentFn(fnId: keyof CustomComponentFns, fn: CustomComponentFn): void;
private $app
events: EventsFacade
constructor($app: CalendarAppSingleton)
render(el: HTMLElement): void
setTheme(theme: 'light' | 'dark'): void
/**
* @internal
* Purpose: To be consumed by framework adapters for custom component rendering.
* */
_setCustomComponentFn(
fnId: keyof CustomComponentFns,
fn: CustomComponentFn
): void
}
declare const createCalendar: (config: CalendarConfigExternal) => CalendarApp;
declare const viewWeek: View;
declare const viewMonthGrid: View;
declare const viewDay: View;
declare const viewMonthAgenda: View;
declare const createPreactView: (config: ViewConfig) => View;
declare const setRangeForWeek: (config: RangeSetterConfig) => DateRange;
declare const setRangeForMonth: (config: RangeSetterConfig) => DateRange;
declare const setRangeForDay: (config: RangeSetterConfig) => DateRange;
declare const externalEventToInternal: (event: CalendarEventExternal, config: CalendarConfigInternal) => CalendarEventInternal;
export type { CalendarConfigExternal as CalendarConfig, CustomComponentFn, CalendarEventExternal as CalendarEvent };
export { createCalendar, viewWeek, viewMonthGrid, viewDay, viewMonthAgenda, CalendarApp, createPreactView, setRangeForDay, setRangeForWeek, setRangeForMonth, externalEventToInternal };
declare const createCalendar: (config: CalendarConfigExternal) => CalendarApp
declare const viewWeek: View
declare const viewMonthGrid: View
declare const viewDay: View
declare const viewMonthAgenda: View
declare const createPreactView: (config: ViewConfig) => View
declare const setRangeForWeek: (config: RangeSetterConfig) => DateRange
declare const setRangeForMonth: (config: RangeSetterConfig) => DateRange
declare const setRangeForDay: (config: RangeSetterConfig) => DateRange
declare const externalEventToInternal: (
event: CalendarEventExternal,
config: CalendarConfigInternal
) => CalendarEventInternal
export type {
CalendarConfigExternal as CalendarConfig,
CustomComponentFn,
CalendarEventExternal as CalendarEvent,
}
export {
createCalendar,
viewWeek,
viewMonthGrid,
viewDay,
viewMonthAgenda,
CalendarApp,
createPreactView,
setRangeForDay,
setRangeForWeek,
setRangeForMonth,
externalEventToInternal,
}
{
"name": "@schedule-x/calendar",
"version": "1.43.0-alpha.0",
"version": "1.43.0",
"description": "Schedule-X calendar component",

@@ -5,0 +5,0 @@ "author": {

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc