Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@schedule-x/calendar-controls

Package Overview
Dependencies
Maintainers
0
Versions
86
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@schedule-x/calendar-controls - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

426

dist/core.cjs.d.ts

@@ -1,426 +0,2 @@

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
}
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
}
interface TimeUnits {
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"
}
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;
}
type TranslationVariables = {
[key: string]: string | number;
};
type TranslateFn = (key: string, variables?: TranslationVariables) => string;
/**
* This interface serves as a bridge between the AppSingleton for the date picker and calendar
* */
interface AppSingleton {
timeUnitsImpl: TimeUnits;
datePickerState: DatePickerState;
translate: TranslateFn;
}
/**
* This interface serves as a bridge between the config interface for the date picker amd the calendar.
* */
interface Config {
locale: Signal<string>;
firstDayOfWeek: Signal<WeekDay>;
}
declare enum Placement {
TOP_START = "top-start",
TOP_END = "top-end",
BOTTOM_START = "bottom-start",
BOTTOM_END = "bottom-end"
}
interface DatePickerAppSingleton extends AppSingleton {
config: DatePickerConfigInternal;
}
type DatePickerListeners = {
onChange?: (date: string) => void;
onEscapeKeyDown?: ($app: DatePickerAppSingleton) => void;
};
type DatePickerStyle = {
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;
}
// 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"
}
// 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 DateRange = {
start: string;
end: string;
};
interface RangeSetterConfig {
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;
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>;
type CalendarEventOptions = {
disableDND?: boolean;
disableResize?: boolean;
additionalClasses?: string[];
};
interface CalendarEventExternal {
id: EventId;
start: string;
end: string;
title?: string;
people?: string[];
location?: string;
description?: string;
calendarId?: string;
_customContent?: {
timeGrid?: string;
dateGrid?: string;
monthGrid?: string;
monthAgenda?: 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;
}
type DayBoundariesExternal = {
start: string;
end: string;
};
type DayBoundariesInternal = {
start: number;
end: number;
};
interface TimeGridDragHandler {
}
type DayBoundariesDateTime = {
start: string;
end: string;
};
interface DateGridDragHandler {
}
interface EventCoordinates {
clientX: number;
clientY: number;
}
interface DragHandlerDependencies {
$app: CalendarAppSingleton;
eventCoordinates: EventCoordinates;
eventCopy: CalendarEventInternal;
updateCopy: (newCopy: CalendarEventInternal | undefined) => void;
}
interface MonthGridDragHandler {
}
interface DragAndDropPlugin extends PluginBase {
createTimeGridDragHandler(dependencies: DragHandlerDependencies, dayBoundariesDateTime: DayBoundariesDateTime): TimeGridDragHandler;
createDateGridDragHandler(dependencies: DragHandlerDependencies): DateGridDragHandler;
createMonthGridDragHandler(calendarEvent: CalendarEventInternal, $app: CalendarAppSingleton): MonthGridDragHandler;
}
type EventModalProps = {
$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;
}
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;
beforeRender?: ($app: CalendarAppSingleton) => void;
onRender?: ($app: CalendarAppSingleton) => 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;
headerContent?: 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;
}
interface EventRecurrencePlugin extends PluginBase {
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;
}
type WeekOptions = {
gridHeight: number;
nDays: number;
eventWidth: number;
timeAxisFormatOptions: Intl.DateTimeFormatOptions;
};
type MonthGridOptions = {
nEventsPerDay: number;
};
type ColorDefinition = {
main: string;
container: string;
onContainer: string;
};
type CalendarType = {
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;
interface CalendarConfigInternal extends Config {
defaultView: ViewName;
views: Signal<View[]>;
dayBoundaries: Signal<DayBoundariesInternal>;
weekOptions: Signal<WeekOptions>;
calendars: Signal<Record<string, CalendarType>>;
isDark: Signal<boolean>;
minDate: Signal<string | undefined>;
maxDate: Signal<string | undefined>;
monthGridOptions: Signal<MonthGridOptions>;
plugins: Plugins;
isResponsive: boolean;
callbacks: CalendarCallbacks;
_customComponentFns: CustomComponentFns;
// 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;
}
type EventsFilterPredicate = ((event: CalendarEventInternal) => boolean) | undefined;
interface CalendarEvents {
list: Signal<CalendarEventInternal[]>;
filterPredicate: Signal<EventsFilterPredicate>;
}
interface CalendarElements {
calendarWrapper: HTMLDivElement | undefined;
}
interface CalendarAppSingleton extends AppSingleton {
config: CalendarConfigInternal;
datePickerConfig: DatePickerConfigInternal;
calendarState: CalendarState;
calendarEvents: CalendarEvents;
elements: CalendarElements;
}
interface PluginBase {
name: string;
/**
* 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
beforeRender?($app: CalendarAppSingleton | any): void;
/**
* 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
onRender?($app: CalendarAppSingleton | any): void;
destroy?(): void;
}
interface CalendarControlsPlugin extends PluginBase {
onRender($app: CalendarAppSingleton): void;
setDate(date: string): void;
setView(view: string): void;
setFirstDayOfWeek(firstDayOfWeek: WeekDay): void;
setLocale(locale: string): void;
setViews(views: [
View,
...View[]
]): void;
setDayBoundaries(dayBoundaries: DayBoundariesExternal): void;
setWeekOptions(weekOptions: WeekOptions): void;
setCalendars(calendars: Record<string, CalendarType>): void;
setMinDate(minDate: string | undefined): void;
setMaxDate(maxDate: string | undefined): void;
setMonthGridOptions(monthGridOptions: MonthGridOptions): void;
getDate(): string;
getView(): string;
getFirstDayOfWeek(): WeekDay;
getLocale(): string;
getViews(): View[];
getDayBoundaries(): DayBoundariesExternal;
getWeekOptions(): WeekOptions;
getCalendars(): Record<string, CalendarType>;
getMinDate(): string | undefined;
getMaxDate(): string | undefined;
getMonthGridOptions(): MonthGridOptions;
getRange(): DateRange | null;
}
declare const createCalendarControlsPlugin: () => CalendarControlsPlugin;
declare const createCalendarControlsPlugin: () => never;
export { createCalendarControlsPlugin };

8

dist/core.cjs.js

@@ -11,2 +11,3 @@ 'use strict';

PluginName["CalendarControls"] = "calendarControls";
PluginName["CurrentTime"] = "currentTime";
})(PluginName || (PluginName = {}));

@@ -66,2 +67,7 @@

const definePlugin = (name, definition) => {
definition.name = name;
return definition;
};
class CalendarControlsPluginImpl {

@@ -210,5 +216,5 @@ constructor() {

const createCalendarControlsPlugin = () => {
return new CalendarControlsPluginImpl();
return definePlugin('calendarControls', new CalendarControlsPluginImpl());
};
exports.createCalendarControlsPlugin = createCalendarControlsPlugin;

@@ -1,426 +0,2 @@

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
}
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
}
interface TimeUnits {
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"
}
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;
}
type TranslationVariables = {
[key: string]: string | number;
};
type TranslateFn = (key: string, variables?: TranslationVariables) => string;
/**
* This interface serves as a bridge between the AppSingleton for the date picker and calendar
* */
interface AppSingleton {
timeUnitsImpl: TimeUnits;
datePickerState: DatePickerState;
translate: TranslateFn;
}
/**
* This interface serves as a bridge between the config interface for the date picker amd the calendar.
* */
interface Config {
locale: Signal<string>;
firstDayOfWeek: Signal<WeekDay>;
}
declare enum Placement {
TOP_START = "top-start",
TOP_END = "top-end",
BOTTOM_START = "bottom-start",
BOTTOM_END = "bottom-end"
}
interface DatePickerAppSingleton extends AppSingleton {
config: DatePickerConfigInternal;
}
type DatePickerListeners = {
onChange?: (date: string) => void;
onEscapeKeyDown?: ($app: DatePickerAppSingleton) => void;
};
type DatePickerStyle = {
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;
}
// 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"
}
// 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 DateRange = {
start: string;
end: string;
};
interface RangeSetterConfig {
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;
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>;
type CalendarEventOptions = {
disableDND?: boolean;
disableResize?: boolean;
additionalClasses?: string[];
};
interface CalendarEventExternal {
id: EventId;
start: string;
end: string;
title?: string;
people?: string[];
location?: string;
description?: string;
calendarId?: string;
_customContent?: {
timeGrid?: string;
dateGrid?: string;
monthGrid?: string;
monthAgenda?: 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;
}
type DayBoundariesExternal = {
start: string;
end: string;
};
type DayBoundariesInternal = {
start: number;
end: number;
};
interface TimeGridDragHandler {
}
type DayBoundariesDateTime = {
start: string;
end: string;
};
interface DateGridDragHandler {
}
interface EventCoordinates {
clientX: number;
clientY: number;
}
interface DragHandlerDependencies {
$app: CalendarAppSingleton;
eventCoordinates: EventCoordinates;
eventCopy: CalendarEventInternal;
updateCopy: (newCopy: CalendarEventInternal | undefined) => void;
}
interface MonthGridDragHandler {
}
interface DragAndDropPlugin extends PluginBase {
createTimeGridDragHandler(dependencies: DragHandlerDependencies, dayBoundariesDateTime: DayBoundariesDateTime): TimeGridDragHandler;
createDateGridDragHandler(dependencies: DragHandlerDependencies): DateGridDragHandler;
createMonthGridDragHandler(calendarEvent: CalendarEventInternal, $app: CalendarAppSingleton): MonthGridDragHandler;
}
type EventModalProps = {
$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;
}
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;
beforeRender?: ($app: CalendarAppSingleton) => void;
onRender?: ($app: CalendarAppSingleton) => 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;
headerContent?: 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;
}
interface EventRecurrencePlugin extends PluginBase {
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;
}
type WeekOptions = {
gridHeight: number;
nDays: number;
eventWidth: number;
timeAxisFormatOptions: Intl.DateTimeFormatOptions;
};
type MonthGridOptions = {
nEventsPerDay: number;
};
type ColorDefinition = {
main: string;
container: string;
onContainer: string;
};
type CalendarType = {
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;
interface CalendarConfigInternal extends Config {
defaultView: ViewName;
views: Signal<View[]>;
dayBoundaries: Signal<DayBoundariesInternal>;
weekOptions: Signal<WeekOptions>;
calendars: Signal<Record<string, CalendarType>>;
isDark: Signal<boolean>;
minDate: Signal<string | undefined>;
maxDate: Signal<string | undefined>;
monthGridOptions: Signal<MonthGridOptions>;
plugins: Plugins;
isResponsive: boolean;
callbacks: CalendarCallbacks;
_customComponentFns: CustomComponentFns;
// 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;
}
type EventsFilterPredicate = ((event: CalendarEventInternal) => boolean) | undefined;
interface CalendarEvents {
list: Signal<CalendarEventInternal[]>;
filterPredicate: Signal<EventsFilterPredicate>;
}
interface CalendarElements {
calendarWrapper: HTMLDivElement | undefined;
}
interface CalendarAppSingleton extends AppSingleton {
config: CalendarConfigInternal;
datePickerConfig: DatePickerConfigInternal;
calendarState: CalendarState;
calendarEvents: CalendarEvents;
elements: CalendarElements;
}
interface PluginBase {
name: string;
/**
* 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
beforeRender?($app: CalendarAppSingleton | any): void;
/**
* 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
onRender?($app: CalendarAppSingleton | any): void;
destroy?(): void;
}
interface CalendarControlsPlugin extends PluginBase {
onRender($app: CalendarAppSingleton): void;
setDate(date: string): void;
setView(view: string): void;
setFirstDayOfWeek(firstDayOfWeek: WeekDay): void;
setLocale(locale: string): void;
setViews(views: [
View,
...View[]
]): void;
setDayBoundaries(dayBoundaries: DayBoundariesExternal): void;
setWeekOptions(weekOptions: WeekOptions): void;
setCalendars(calendars: Record<string, CalendarType>): void;
setMinDate(minDate: string | undefined): void;
setMaxDate(maxDate: string | undefined): void;
setMonthGridOptions(monthGridOptions: MonthGridOptions): void;
getDate(): string;
getView(): string;
getFirstDayOfWeek(): WeekDay;
getLocale(): string;
getViews(): View[];
getDayBoundaries(): DayBoundariesExternal;
getWeekOptions(): WeekOptions;
getCalendars(): Record<string, CalendarType>;
getMinDate(): string | undefined;
getMaxDate(): string | undefined;
getMonthGridOptions(): MonthGridOptions;
getRange(): DateRange | null;
}
declare const createCalendarControlsPlugin: () => CalendarControlsPlugin;
declare const createCalendarControlsPlugin: () => never;
export { createCalendarControlsPlugin };

@@ -9,2 +9,3 @@ var PluginName;

PluginName["CalendarControls"] = "calendarControls";
PluginName["CurrentTime"] = "currentTime";
})(PluginName || (PluginName = {}));

@@ -64,2 +65,7 @@

const definePlugin = (name, definition) => {
definition.name = name;
return definition;
};
class CalendarControlsPluginImpl {

@@ -208,5 +214,5 @@ constructor() {

const createCalendarControlsPlugin = () => {
return new CalendarControlsPluginImpl();
return definePlugin('calendarControls', new CalendarControlsPluginImpl());
};
export { createCalendarControlsPlugin };

@@ -1,426 +0,2 @@

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
}
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
}
interface TimeUnits {
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"
}
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;
}
type TranslationVariables = {
[key: string]: string | number;
};
type TranslateFn = (key: string, variables?: TranslationVariables) => string;
/**
* This interface serves as a bridge between the AppSingleton for the date picker and calendar
* */
interface AppSingleton {
timeUnitsImpl: TimeUnits;
datePickerState: DatePickerState;
translate: TranslateFn;
}
/**
* This interface serves as a bridge between the config interface for the date picker amd the calendar.
* */
interface Config {
locale: Signal<string>;
firstDayOfWeek: Signal<WeekDay>;
}
declare enum Placement {
TOP_START = "top-start",
TOP_END = "top-end",
BOTTOM_START = "bottom-start",
BOTTOM_END = "bottom-end"
}
interface DatePickerAppSingleton extends AppSingleton {
config: DatePickerConfigInternal;
}
type DatePickerListeners = {
onChange?: (date: string) => void;
onEscapeKeyDown?: ($app: DatePickerAppSingleton) => void;
};
type DatePickerStyle = {
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;
}
// 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"
}
// 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 DateRange = {
start: string;
end: string;
};
interface RangeSetterConfig {
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;
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>;
type CalendarEventOptions = {
disableDND?: boolean;
disableResize?: boolean;
additionalClasses?: string[];
};
interface CalendarEventExternal {
id: EventId;
start: string;
end: string;
title?: string;
people?: string[];
location?: string;
description?: string;
calendarId?: string;
_customContent?: {
timeGrid?: string;
dateGrid?: string;
monthGrid?: string;
monthAgenda?: 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;
}
type DayBoundariesExternal = {
start: string;
end: string;
};
type DayBoundariesInternal = {
start: number;
end: number;
};
interface TimeGridDragHandler {
}
type DayBoundariesDateTime = {
start: string;
end: string;
};
interface DateGridDragHandler {
}
interface EventCoordinates {
clientX: number;
clientY: number;
}
interface DragHandlerDependencies {
$app: CalendarAppSingleton;
eventCoordinates: EventCoordinates;
eventCopy: CalendarEventInternal;
updateCopy: (newCopy: CalendarEventInternal | undefined) => void;
}
interface MonthGridDragHandler {
}
interface DragAndDropPlugin extends PluginBase {
createTimeGridDragHandler(dependencies: DragHandlerDependencies, dayBoundariesDateTime: DayBoundariesDateTime): TimeGridDragHandler;
createDateGridDragHandler(dependencies: DragHandlerDependencies): DateGridDragHandler;
createMonthGridDragHandler(calendarEvent: CalendarEventInternal, $app: CalendarAppSingleton): MonthGridDragHandler;
}
type EventModalProps = {
$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;
}
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;
beforeRender?: ($app: CalendarAppSingleton) => void;
onRender?: ($app: CalendarAppSingleton) => 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;
headerContent?: 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;
}
interface EventRecurrencePlugin extends PluginBase {
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;
}
type WeekOptions = {
gridHeight: number;
nDays: number;
eventWidth: number;
timeAxisFormatOptions: Intl.DateTimeFormatOptions;
};
type MonthGridOptions = {
nEventsPerDay: number;
};
type ColorDefinition = {
main: string;
container: string;
onContainer: string;
};
type CalendarType = {
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;
interface CalendarConfigInternal extends Config {
defaultView: ViewName;
views: Signal<View[]>;
dayBoundaries: Signal<DayBoundariesInternal>;
weekOptions: Signal<WeekOptions>;
calendars: Signal<Record<string, CalendarType>>;
isDark: Signal<boolean>;
minDate: Signal<string | undefined>;
maxDate: Signal<string | undefined>;
monthGridOptions: Signal<MonthGridOptions>;
plugins: Plugins;
isResponsive: boolean;
callbacks: CalendarCallbacks;
_customComponentFns: CustomComponentFns;
// 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;
}
type EventsFilterPredicate = ((event: CalendarEventInternal) => boolean) | undefined;
interface CalendarEvents {
list: Signal<CalendarEventInternal[]>;
filterPredicate: Signal<EventsFilterPredicate>;
}
interface CalendarElements {
calendarWrapper: HTMLDivElement | undefined;
}
interface CalendarAppSingleton extends AppSingleton {
config: CalendarConfigInternal;
datePickerConfig: DatePickerConfigInternal;
calendarState: CalendarState;
calendarEvents: CalendarEvents;
elements: CalendarElements;
}
interface PluginBase {
name: string;
/**
* 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
beforeRender?($app: CalendarAppSingleton | any): void;
/**
* 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
onRender?($app: CalendarAppSingleton | any): void;
destroy?(): void;
}
interface CalendarControlsPlugin extends PluginBase {
onRender($app: CalendarAppSingleton): void;
setDate(date: string): void;
setView(view: string): void;
setFirstDayOfWeek(firstDayOfWeek: WeekDay): void;
setLocale(locale: string): void;
setViews(views: [
View,
...View[]
]): void;
setDayBoundaries(dayBoundaries: DayBoundariesExternal): void;
setWeekOptions(weekOptions: WeekOptions): void;
setCalendars(calendars: Record<string, CalendarType>): void;
setMinDate(minDate: string | undefined): void;
setMaxDate(maxDate: string | undefined): void;
setMonthGridOptions(monthGridOptions: MonthGridOptions): void;
getDate(): string;
getView(): string;
getFirstDayOfWeek(): WeekDay;
getLocale(): string;
getViews(): View[];
getDayBoundaries(): DayBoundariesExternal;
getWeekOptions(): WeekOptions;
getCalendars(): Record<string, CalendarType>;
getMinDate(): string | undefined;
getMaxDate(): string | undefined;
getMonthGridOptions(): MonthGridOptions;
getRange(): DateRange | null;
}
declare const createCalendarControlsPlugin: () => CalendarControlsPlugin;
declare const createCalendarControlsPlugin: () => never;
export { createCalendarControlsPlugin };

@@ -15,2 +15,3 @@ (function (global, factory) {

PluginName["CalendarControls"] = "calendarControls";
PluginName["CurrentTime"] = "currentTime";
})(PluginName || (PluginName = {}));

@@ -70,2 +71,7 @@

const definePlugin = (name, definition) => {
definition.name = name;
return definition;
};
class CalendarControlsPluginImpl {

@@ -214,3 +220,3 @@ constructor() {

const createCalendarControlsPlugin = () => {
return new CalendarControlsPluginImpl();
return definePlugin('calendarControls', new CalendarControlsPluginImpl());
};

@@ -217,0 +223,0 @@

{
"name": "@schedule-x/calendar-controls",
"umdName": "SXCalendarControls",
"version": "2.1.0",
"version": "2.2.0",
"description": "Plugin for extra controls for the Schedule-X calendar",

@@ -31,3 +31,3 @@ "author": {

"homepage": "https://schedule-x.dev",
"gitHead": "8c8df9d6329567163cffc9f744cf2efba173c7f9"
"gitHead": "33db04bc41ed4f015efd93f12ecd65f72801038e"
}
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