@tlmgo/tui-calendar 2.2.0

package/types/time/date.d.ts

@@ -0,0 +1,206 @@
+/**
+ * Custom Date Class to handle timezone offset.
+ *
+ * For more information, see {@link https://github.com/nhn/tui.calendar/blob/main/docs/en/apis/tzdate.md|TZDate} in guide.
+ *
+ * @class TZDate
+ * @param {number|TZDate|Date|string} date - date value to be converted. If date is number or string, it should be eligible to parse by Date constructor.
+ */
+export default class TZDate {
+    private tzOffset;
+    private d;
+    constructor(...args: any[]);
+    /**
+     * Get the string representation of the date.
+     * @returns {string} string representation of the date.
+     */
+    toString(): string;
+    /**
+     * Add years to the instance.
+     * @param {number} y - number of years to be added.
+     * @returns {TZDate} - returns the instance itself.
+     */
+    addFullYear(y: number): TZDate;
+    /**
+     * Add months to the instance.
+     * @param {number} m - number of months to be added.
+     * @returns {TZDate} - returns the instance itself.
+     */
+    addMonth(m: number): TZDate;
+    /**
+     * Add dates to the instance.
+     * @param {number} d - number of days to be added.
+     * @returns {TZDate} - returns the instance itself.
+     */
+    addDate(d: number): TZDate;
+    /**
+     * Add hours to the instance.
+     * @param {number} h - number of hours to be added.
+     * @returns {TZDate} - returns the instance itself.
+     */
+    addHours(h: number): TZDate;
+    /**
+     * Add minutes to the instance.
+     * @param {number} M - number of minutes to be added.
+     * @returns {TZDate} - returns the instance itself.
+     */
+    addMinutes(M: number): TZDate;
+    /**
+     * Add seconds to the instance.
+     * @param {number} s - number of seconds to be added.
+     * @returns {TZDate} - returns the instance itself.
+     */
+    addSeconds(s: number): TZDate;
+    /**
+     * Add milliseconds to the instance.
+     * @param {number} ms - number of milliseconds to be added.
+     * @returns {TZDate} - returns the instance itself.
+     */
+    addMilliseconds(ms: number): TZDate;
+    /**
+     * Set the date and time all at once.
+     * @param {number} y - year
+     * @param {number} m - month
+     * @param {number} d - date
+     * @param {number} h - hours
+     * @param {number} M - minutes
+     * @param {number} s - seconds
+     * @param {number} ms - milliseconds
+     * @returns {TZDate} - returns the instance itself.
+     */
+    setWithRaw(y: number, m: number, d: number, h: number, M: number, s: number, ms: number): TZDate;
+    /**
+     * Convert the instance to the native `Date` object.
+     * @returns {Date} - The native `Date` object.
+     */
+    toDate(): Date;
+    /**
+     * Get the value of the date. (milliseconds since 1970-01-01 00:00:00 (UTC+0))
+     * @returns {number} - value of the date.
+     */
+    valueOf(): number;
+    /**
+     * Get the timezone offset from UTC in minutes.
+     * @returns {number} - timezone offset in minutes.
+     */
+    getTimezoneOffset(): number;
+    /**
+     * Get milliseconds which is converted by timezone
+     * @returns {number} milliseconds
+     */
+    getTime(): number;
+    /**
+     * Get the year of the instance.
+     * @returns {number} - full year
+     */
+    getFullYear(): number;
+    /**
+     * Get the month of the instance. (zero-based)
+     * @returns {number} - month
+     */
+    getMonth(): number;
+    /**
+     * Get the date of the instance.
+     * @returns {number} - date
+     */
+    getDate(): number;
+    /**
+     * Get the hours of the instance.
+     * @returns {number} - hours
+     */
+    getHours(): number;
+    /**
+     * Get the minutes of the instance.
+     * @returns {number} - minutes
+     */
+    getMinutes(): number;
+    /**
+     * Get the seconds of the instance.
+     * @returns {number} - seconds
+     */
+    getSeconds(): number;
+    /**
+     * Get the milliseconds of the instance.
+     * @returns {number} - milliseconds
+     */
+    getMilliseconds(): number;
+    /**
+     * Get the day of the week of the instance.
+     * @returns {number} - day of the week
+     */
+    getDay(): number;
+    /**
+     * Sets the instance to the time represented by a number of milliseconds since 1970-01-01 00:00:00 (UTC+0).
+     * @param {number} t - number of milliseconds
+     * @returns {number} - Passed milliseconds of the instance since 1970-01-01 00:00:00 (UTC+0).
+     */
+    setTime(t: number): number;
+    /**
+     * Sets the year-month-date of the instance. Equivalent to calling `setFullYear` of `Date` object.
+     * @param {number} y - year
+     * @param {number} m - month (zero-based)
+     * @param {number} d - date
+     * @returns {number} - Passed milliseconds of the instance since 1970-01-01 00:00:00 (UTC+0).
+     */
+    setFullYear(y: number, m?: number, d?: number): number;
+    /**
+     * Sets the month of the instance. Equivalent to calling `setMonth` of `Date` object.
+     * @param {number} m - month (zero-based)
+     * @param {number} d - date
+     * @returns {number} - Passed milliseconds of the instance since 1970-01-01 00:00:00 (UTC+0).
+     */
+    setMonth(m: number, d?: number): number;
+    /**
+     * Sets the date of the instance. Equivalent to calling `setDate` of `Date` object.
+     * @param {number} d - date
+     * @returns {number} - Passed milliseconds of the instance since 1970-01-01 00:00:00 (UTC+0).
+     */
+    setDate(d: number): number;
+    /**
+     * Sets the hours of the instance. Equivalent to calling `setHours` of `Date` object.
+     * @param {number} h - hours
+     * @param {number} M - minutes
+     * @param {number} s - seconds
+     * @param {number} ms - milliseconds
+     * @returns {number} - Passed milliseconds of the instance since 1970-01-01 00:00:00 (UTC+0).
+     */
+    setHours(h: number, M?: number, s?: number, ms?: number): number;
+    /**
+     * Sets the minutes of the instance. Equivalent to calling `setMinutes` of `Date` object.
+     * @param {number} M - minutes
+     * @param {number} s - seconds
+     * @param {number} ms - milliseconds
+     * @returns {number} - Passed milliseconds of the instance since 1970-01-01 00:00:00 (UTC+0).
+     */
+    setMinutes(M: number, s?: number, ms?: number): number;
+    /**
+     * Sets the seconds of the instance. Equivalent to calling `setSeconds` of `Date` object.
+     * @param {number} s - seconds
+     * @param {number} ms - milliseconds
+     * @returns {number} - Passed milliseconds of the instance since 1970-01-01 00:00:00 (UTC+0).
+     */
+    setSeconds(s: number, ms?: number): number;
+    /**
+     * Sets the milliseconds of the instance. Equivalent to calling `setMilliseconds` of `Date` object.
+     * @param {number} ms - milliseconds
+     * @returns {number} - Passed milliseconds of the instance since 1970-01-01 00:00:00 (UTC+0).
+     */
+    setMilliseconds(ms: number): number;
+    /**
+     * Set the timezone offset of the instance.
+     * @param {string|number} tzValue - The name of timezone(IANA name) or timezone offset(in minutes).
+     * @returns {TZDate} - New instance with the timezone offset.
+     */
+    tz(tzValue: string | 'Local' | number): TZDate;
+    /**
+     * Get the new instance following the system's timezone.
+     * If the system timezone is different from the timezone of the instance,
+     * the instance is converted to the system timezone.
+     *
+     * Instance's `tzOffset` property will be ignored if there is a `tzValue` parameter.
+     *
+     * @param {string|number} tzValue - The name of timezone(IANA name) or timezone offset(in minutes).
+     * @returns {TZDate} - New instance with the system timezone.
+     */
+    local(tzValue?: string | number): TZDate;
+}

package/types/types/eventBus.d.ts

@@ -0,0 +1,40 @@
+import type { EventObject, EventObjectWithDefaultValues } from "./events";
+export declare type AnyFunc = (...args: any[]) => any;
+export interface SelectDateTimeInfo {
+    start: Date;
+    end: Date;
+    isAllday: boolean;
+    nativeEvent?: MouseEvent;
+    gridSelectionElements: Element[];
+}
+export interface UpdatedEventInfo {
+    event: EventObjectWithDefaultValues;
+    changes: EventObject;
+}
+export interface DayNameInfo {
+    date: string;
+}
+export interface EventInfo {
+    event: EventObjectWithDefaultValues;
+    nativeEvent: MouseEvent;
+}
+export interface MoreEventsButton {
+    date: Date;
+    target: HTMLDivElement;
+}
+export declare type ScrollBehaviorOptions = ScrollToOptions['behavior'];
+export declare type ExternalEventTypes = {
+    selectDateTime: (info: SelectDateTimeInfo) => void;
+    beforeCreateEvent: (event: EventObject) => void;
+    beforeUpdateEvent: (updatedEventInfo: UpdatedEventInfo) => void;
+    beforeDeleteEvent: (event: EventObjectWithDefaultValues) => void;
+    afterRenderEvent: (event: EventObjectWithDefaultValues) => void;
+    clickDayName: (dayNameInfo: DayNameInfo) => void;
+    clickEvent: (eventInfo: EventInfo) => void;
+    clickMoreEventsBtn: (moreEventsBtnInfo: MoreEventsButton) => void;
+    clickTimezonesCollapseBtn: (prevCollapsedState: boolean) => void;
+    [eventName: string]: AnyFunc;
+};
+export declare type InternalEventTypes = {
+    scrollToNow: (scrollBehavior?: ScrollBehaviorOptions) => void;
+};

package/types/types/events.d.ts

@@ -0,0 +1,141 @@
+import type { MarkOptional } from 'ts-essentials';
+import type EventModel from "../model/eventModel";
+import type EventUIModel from "../model/eventUIModel";
+import type TZDate from "../time/date";
+import type Collection from "../utils/collection";
+import type { StyleProp } from "./components/common";
+import type { CalendarInfo } from "./options";
+export declare type Matrix<T> = T[][];
+export declare type Matrix3d<T> = Matrix<T>[];
+export declare type CollisionGroup = Matrix<number>;
+export declare type DayGridEventMatrix = Matrix3d<EventUIModel>;
+export declare type TimeGridEventMatrix = Record<string, Matrix3d<EventUIModel>>;
+export declare type EventModelMap = {
+    milestone: EventUIModel[];
+    allday: EventUIModel[];
+    task: EventUIModel[];
+    time: EventUIModel[];
+};
+export declare type EventGroupMap = Record<keyof EventModelMap, DayGridEventMatrix | TimeGridEventMatrix>;
+export declare type DateType = Date | string | number | TZDate;
+export declare type IDS_OF_DAY = Record<string, number[]>;
+export interface CalendarData {
+    calendars: CalendarInfo[];
+    events: Collection<EventModel>;
+    idsOfDay: IDS_OF_DAY;
+}
+export declare type EventCategory = 'milestone' | 'task' | 'allday' | 'time';
+export declare type EventState = 'Busy' | 'Free';
+export declare type EventObjectWithDefaultValues = MarkOptional<Required<EventObject>, 'color' | 'borderColor' | 'backgroundColor' | 'dragBackgroundColor'> & {
+    start: TZDate;
+    end: TZDate;
+    __cid: number;
+};
+export interface EventObject {
+    /**
+     * `Optional` unique id for various use
+     */
+    id?: string;
+    /**
+     * Calendar ID
+     */
+    calendarId?: string;
+    /**
+     * Title for the event
+     */
+    title?: string;
+    /**
+     * Body for the event
+     */
+    body?: string;
+    /**
+     * Determine if the event is an all-day event
+     */
+    isAllday?: boolean;
+    /**
+     * When the event starts
+     */
+    start?: DateType;
+    /**
+     * When the event ends
+     */
+    end?: DateType;
+    /**
+     * Travel time which is taken to go
+     */
+    goingDuration?: number;
+    /**
+     * Travel time which is taken to come back
+     */
+    comingDuration?: number;
+    /**
+     * Location of the event
+     */
+    location?: string;
+    /**
+     * Attendees of the event
+     */
+    attendees?: string[];
+    /**
+     * Category of the event (milestone, task, allday, time)
+     */
+    category?: EventCategory;
+    /**
+     * Classification of work events (before work, before lunch, before work)
+     */
+    dueDateClass?: string;
+    /**
+     * Recurrence rule of the event
+     */
+    recurrenceRule?: string;
+    /**
+     * State of the event. The default is 'Busy'
+     */
+    state?: EventState;
+    /**
+     * Determine whether the event is shown or hidden
+     */
+    isVisible?: boolean;
+    /**
+     * Determine whether something is in progress
+     */
+    isPending?: boolean;
+    /**
+     * Determine whether the event is focused
+     */
+    isFocused?: boolean;
+    /**
+     * Determine whether the event is read-only
+     */
+    isReadOnly?: boolean;
+    /**
+     * Determine whether the event is private
+     */
+    isPrivate?: boolean;
+    /**
+     * Text color of the event element
+     */
+    color?: string;
+    /**
+     * Background color of the event element
+     */
+    backgroundColor?: string;
+    /**
+     * Background color of the dragging event element
+     */
+    dragBackgroundColor?: string;
+    /**
+     * Left border color of the event element
+     */
+    borderColor?: string;
+    /**
+     * Custom style for the event element
+     */
+    customStyle?: StyleProp;
+    /**
+     * Raw data for the event
+     */
+    raw?: any;
+}
+export declare type BooleanKeyOfEventObject = 'isPrivate' | 'isAllday' | 'isPending' | 'isFocused' | 'isVisible' | 'isReadOnly';
+export declare type TimeUnit = 'second' | 'minute' | 'hour' | 'date' | 'month' | 'year';

package/types/types/options.d.ts

@@ -0,0 +1,82 @@
+import type { ComponentType } from 'preact';
+import type { DeepPartial } from 'ts-essentials';
+import type { EventObject, EventObjectWithDefaultValues } from "./events";
+import type { TemplateConfig } from "./template";
+import type { ThemeState } from "./theme";
+export declare type EventView = 'allday' | 'time';
+export declare type TaskView = 'milestone' | 'task';
+export interface CollapseDuplicateEventsOptions {
+    getDuplicateEvents: (targetEvent: EventObjectWithDefaultValues, events: EventObjectWithDefaultValues[]) => EventObjectWithDefaultValues[];
+    getMainEvent: (events: EventObjectWithDefaultValues[]) => EventObjectWithDefaultValues;
+}
+export interface WeekOptions {
+    startDayOfWeek?: number;
+    dayNames?: [string, string, string, string, string, string, string] | [];
+    narrowWeekend?: boolean;
+    workweek?: boolean;
+    showNowIndicator?: boolean;
+    showTimezoneCollapseButton?: boolean;
+    timezonesCollapsed?: boolean;
+    hourStart?: number;
+    hourEnd?: number;
+    eventView?: boolean | EventView[];
+    taskView?: boolean | TaskView[];
+    collapseDuplicateEvents?: boolean | Partial<CollapseDuplicateEventsOptions>;
+}
+export interface MonthOptions {
+    dayNames?: [string, string, string, string, string, string, string] | [];
+    startDayOfWeek?: number;
+    narrowWeekend?: boolean;
+    visibleWeeksCount?: number;
+    isAlways6Weeks?: boolean;
+    workweek?: boolean;
+    visibleEventCount?: number;
+}
+export interface GridSelectionOptions {
+    enableDblClick?: boolean;
+    enableClick?: boolean;
+}
+export interface TimezoneConfig {
+    timezoneName: string;
+    displayLabel?: string;
+    tooltip?: string;
+}
+export interface TimezoneOptions {
+    zones?: TimezoneConfig[];
+    customOffsetCalculator?: (timezoneName: string, timestamp: number) => number;
+}
+export interface CalendarColor {
+    color?: string;
+    backgroundColor?: string;
+    dragBackgroundColor?: string;
+    borderColor?: string;
+}
+export interface CalendarInfo extends CalendarColor {
+    id: string;
+    name: string;
+}
+export declare type ViewType = 'month' | 'week' | 'day';
+export interface Options {
+    defaultView?: ViewType;
+    theme?: DeepPartial<ThemeState>;
+    template?: TemplateConfig;
+    week?: WeekOptions;
+    month?: MonthOptions;
+    calendars?: CalendarInfo[];
+    useFormPopup?: boolean;
+    useDetailPopup?: boolean;
+    gridSelection?: boolean | GridSelectionOptions;
+    isReadOnly?: boolean;
+    usageStatistics?: boolean;
+    eventFilter?: (event: EventObject) => boolean;
+    timezone?: TimezoneOptions;
+}
+export interface ViewInfoUserInput {
+    component: ComponentType<any>;
+    router?: {
+        linkTitle: string;
+    };
+}
+export declare type ViewListMap = {
+    [key: string]: ViewInfoUserInput;
+};

package/types/types/template.d.ts

@@ -0,0 +1,97 @@
+import type { VNode } from 'preact';
+import type TZDate from "../time/date";
+import type { EventObjectWithDefaultValues, TimeUnit } from "./events";
+export interface TemplateTimeGridHourLabel {
+    hidden: boolean;
+    hour: number;
+    minutes: number;
+}
+export interface TemplateNow {
+    unit: TimeUnit;
+    time: TZDate;
+    format: string;
+}
+export interface TemplateMonthGrid {
+    date: string;
+    day: number;
+    hiddenEventCount: number;
+    isOtherMonth: boolean;
+    isToday: boolean;
+    month: number;
+    ymd: string;
+}
+export interface TemplateMoreTitleDate {
+    ymd: string;
+    date: number;
+    day: number;
+}
+export interface TemplateWeekDayName {
+    date: number;
+    day: number;
+    dayName: string;
+    isToday: boolean;
+    renderDate: string;
+    dateInstance: TZDate;
+}
+export interface TemplateMonthDayName {
+    day: number;
+    label: string;
+}
+/**
+ * If display label does not exist in the timezone options,
+ * timezone offset based on timezone name will be passed
+ */
+export declare type TemplateTimezone = {
+    displayLabel: string;
+    timezoneOffset: null;
+} | {
+    displayLabel: null;
+    timezoneOffset: number;
+};
+export declare type TemplateReturnType = string | VNode<{
+    className: string;
+}>;
+export interface Template {
+    milestoneTitle: () => TemplateReturnType;
+    milestone: (event: EventObjectWithDefaultValues) => TemplateReturnType;
+    taskTitle: () => TemplateReturnType;
+    task: (event: EventObjectWithDefaultValues) => TemplateReturnType;
+    alldayTitle: () => TemplateReturnType;
+    allday: (event: EventObjectWithDefaultValues) => TemplateReturnType;
+    time: (event: EventObjectWithDefaultValues) => TemplateReturnType;
+    goingDuration: (event: EventObjectWithDefaultValues) => TemplateReturnType;
+    comingDuration: (event: EventObjectWithDefaultValues) => TemplateReturnType;
+    monthMoreTitleDate: (moreTitle: TemplateMoreTitleDate) => TemplateReturnType;
+    monthMoreClose: () => TemplateReturnType;
+    monthGridHeader: (cellData: TemplateMonthGrid) => TemplateReturnType;
+    monthGridHeaderExceed: (hiddenEventsCount: number) => TemplateReturnType;
+    monthGridFooter: (cellData: TemplateMonthGrid) => TemplateReturnType;
+    monthGridFooterExceed: (hiddenEventsCount: number) => TemplateReturnType;
+    monthDayName: (monthDayNameData: TemplateMonthDayName) => TemplateReturnType;
+    weekDayName: (weekDayNameData: TemplateWeekDayName) => TemplateReturnType;
+    weekGridFooterExceed: (hiddenEventsCount: number) => TemplateReturnType;
+    collapseBtnTitle: () => TemplateReturnType;
+    timezoneDisplayLabel: (props: TemplateTimezone) => TemplateReturnType;
+    timegridDisplayPrimaryTime: (props: TemplateNow) => TemplateReturnType;
+    timegridDisplayTime: (props: TemplateNow) => TemplateReturnType;
+    timegridNowIndicatorLabel: (props: TemplateNow) => TemplateReturnType;
+    popupIsAllday: () => TemplateReturnType;
+    popupStateFree: () => TemplateReturnType;
+    popupStateBusy: () => TemplateReturnType;
+    titlePlaceholder: () => TemplateReturnType;
+    locationPlaceholder: () => TemplateReturnType;
+    startDatePlaceholder: () => TemplateReturnType;
+    endDatePlaceholder: () => TemplateReturnType;
+    popupSave: () => TemplateReturnType;
+    popupUpdate: () => TemplateReturnType;
+    popupDetailTitle: (event: EventObjectWithDefaultValues) => TemplateReturnType;
+    popupDetailDate: (event: EventObjectWithDefaultValues) => TemplateReturnType;
+    popupDetailLocation: (event: EventObjectWithDefaultValues) => TemplateReturnType;
+    popupDetailAttendees: (event: EventObjectWithDefaultValues) => TemplateReturnType;
+    popupDetailState: (event: EventObjectWithDefaultValues) => TemplateReturnType;
+    popupDetailRecurrenceRule: (event: EventObjectWithDefaultValues) => TemplateReturnType;
+    popupDetailBody: (event: EventObjectWithDefaultValues) => TemplateReturnType;
+    popupEdit: () => TemplateReturnType;
+    popupDelete: () => TemplateReturnType;
+}
+export declare type TemplateConfig = Partial<Template>;

package/types/types/theme.d.ts

@@ -0,0 +1,140 @@
+import type { DeepPartial } from 'ts-essentials';
+export declare type CommonTheme = {
+    backgroundColor: string;
+    border: string;
+    gridSelection: {
+        backgroundColor: string;
+        border: string;
+    };
+    dayName: {
+        color: string;
+    };
+    holiday: {
+        color: string;
+    };
+    saturday: {
+        color: string;
+    };
+    today: {
+        color: string;
+    };
+};
+export declare type WeekDayNameTheme = {
+    borderLeft: string;
+    borderTop: string;
+    borderBottom: string;
+    backgroundColor: string;
+};
+export declare type MonthDayNameTheme = {
+    borderLeft: string;
+    backgroundColor: string;
+};
+export declare type DayGridTheme = {
+    borderRight: string;
+    backgroundColor: string;
+};
+export declare type DayGridLeftTheme = {
+    borderRight: string;
+    backgroundColor: string;
+    width: string;
+};
+export declare type TimeGridLeftTheme = {
+    borderRight: string;
+    backgroundColor: string;
+    width: string;
+};
+export declare type WeekTheme = {
+    dayName: WeekDayNameTheme;
+    dayGrid: DayGridTheme;
+    dayGridLeft: DayGridLeftTheme;
+    timeGrid: {
+        borderRight: string;
+    };
+    timeGridLeft: TimeGridLeftTheme;
+    timeGridLeftAdditionalTimezone: {
+        backgroundColor: string;
+    };
+    timeGridHalfHourLine: {
+        borderBottom: string;
+    };
+    timeGridHourLine: {
+        borderBottom: string;
+    };
+    nowIndicatorLabel: {
+        color: string;
+    };
+    nowIndicatorPast: {
+        border: string;
+    };
+    nowIndicatorBullet: {
+        backgroundColor: string;
+    };
+    nowIndicatorToday: {
+        border: string;
+    };
+    nowIndicatorFuture: {
+        border: string;
+    };
+    pastTime: {
+        color: string;
+    };
+    futureTime: {
+        color: string;
+    };
+    weekend: {
+        backgroundColor: string;
+    };
+    today: {
+        color: string;
+        backgroundColor: string;
+    };
+    pastDay: {
+        color: string;
+    };
+    panelResizer: {
+        border: string;
+    };
+    gridSelection: {
+        color: string;
+    };
+};
+export declare type MonthTheme = {
+    dayExceptThisMonth: {
+        color: string;
+    };
+    dayName: MonthDayNameTheme;
+    holidayExceptThisMonth: {
+        color: string;
+    };
+    moreView: {
+        backgroundColor: string;
+        border: string;
+        boxShadow: string;
+        width: number | null;
+        height: number | null;
+    };
+    moreViewTitle: {
+        backgroundColor: string;
+    };
+    gridCell: {
+        headerHeight: number | null;
+        footerHeight: number | null;
+    };
+    weekend: {
+        backgroundColor: string;
+    };
+};
+export declare type ThemeState = {
+    common: CommonTheme;
+    week: WeekTheme;
+    month: MonthTheme;
+};
+export declare type ThemeDispatchers = {
+    setTheme: (theme: DeepPartial<ThemeState>) => void;
+    setCommonTheme: (commonTheme: DeepPartial<CommonTheme>) => void;
+    setWeekTheme: (weekTheme: DeepPartial<WeekTheme>) => void;
+    setMonthTheme: (monthTheme: DeepPartial<MonthTheme>) => void;
+};
+export declare type ThemeStore = ThemeState & {
+    dispatch: ThemeDispatchers;
+};