fomantic-ui/types/fomantic-ui-calendar.d.ts

declare namespace FomanticUI {
    interface Calendar {
        settings: CalendarSettings;

        /**
         * Refresh the calendar
         */
        (behavior: 'refresh'): JQuery;

        /**
         * Call the popup module (e.g. passing show will show the calendar popup)
         */
        (behavior: 'popup', arguments: any): JQuery;

        /**
         * Focus the calendar input
         */
        (behavior: 'focus'): JQuery;

        /**
         * Blur the calendar input
         */
        (behavior: 'blur'): JQuery;

        /**
         * Clear the selected date
         */
        (behavior: 'clear'): JQuery;

        /**
         * Get the selected date
         */
        (behavior: 'get date'): Date | string;

        /**
         * Set the selected date.
         * Pass false to updateInput to disable updating the input.
         * Pass false to fireChange to disable the onBeforeChange and onChange callbacks for this change
         */
        (behavior: 'set date', date: string, updateInput: boolean, fireChange: boolean): JQuery;

        /**
         * Get the current selection mode (year, month, day, hour, minute)
         */
        (behavior: 'get mode'): 'year' | 'month' | 'day' | 'hour' | 'minute';

        /**
         * Set the current selection mode (year, month, day, hour, minute)
         */
        (behavior: 'set mode', mode: 'year' | 'month' | 'day' | 'hour' | 'minute'): JQuery;

        /**
         * Get the start date for range selection
         */
        (behavior: 'get startDate'): Date | string;

        /**
         * Set the start date for range selection
         */
        (behavior: 'set startDate', date: Date | string): JQuery;

        /**
         * Get the end date for range selection
         */
        (behavior: 'get endDate'): Date | string;

        /**
         * Set the end date for range selection
         */
        (behavior: 'set endDate', date: Date | string): JQuery;

        /**
         * Get the currently focused date
         */
        (behavior: 'get focusDate'): Date | string;

        /**
         * Set the currently focused date
         */
        (behavior: 'set focusDate', date: Date | string): JQuery;

        /**
         * Set the minimal selectable date
         */
        (behavior: 'set minDate', date: Date | string): JQuery;

        /**
         * Set the maximal selectable date
         */
        (behavior: 'set maxDate', date: Date | string): JQuery;

        (behavior: 'destroy'): JQuery;

        <K extends keyof CalendarSettings>(behavior: 'setting', name: K, value?: undefined): Partial<Pick<CalendarSettings, keyof CalendarSettings>>;
        <K extends keyof CalendarSettings>(behavior: 'setting', name: K, value: CalendarSettings[K]): JQuery;
        (behavior: 'setting', value: Partial<Pick<CalendarSettings, keyof CalendarSettings>>): JQuery;
        (settings?: Partial<Pick<CalendarSettings, keyof CalendarSettings>>): JQuery;
    }

    /**
     * @see {@link https://fomantic-ui.com/modules/calendar.html#/settings}
     */
    interface CalendarSettings {
        // region Toast Settings

        /**
         * Picker type, can be 'datetime', 'date', 'time', 'month', or 'year'.
         *
         * @default 'datetime'
         */
        type: 'datetime' | 'date' | 'time' | 'month' | 'year';

        /**
         * Day for first day column (0 = Sunday).
         *
         * @default 0
         */
        firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;

        /**
         * Add row(s) to shorter months to keep day calendar height consistent (6 rows).
         *
         * @default 'true'
         */
        constantHeight: boolean;

        /**
         * Show a 'today/now' button at the bottom of the calendar.
         *
         * @default false
         */
        today: boolean;

        /**
         * Close the popup after selecting a date/time.
         *
         * @default false
         */
        closable: true;

        /**
         * Month before day when parsing/converting date from/to text.
         *
         * @default true
         */
        monthFirst: boolean;

        /**
         * Set input to readonly on touch devices.
         *
         * @default true
         */
        touchReadonly: boolean;

        /**
         * Create the calendar inline instead of inside a popup.
         *
         * @default false
         */
        inline: boolean;

        /**
         * Display the week number on the left.
         *
         * @default false
         */
        showWeekNumbers: boolean;

        /**
         * Disable some days of the week from selection (0= Sunday, 1=Monday, ...).
         *
         * @default []
         */
        disabledDaysOfWeek: number[];

        /**
         * An array of Date-Objects or Objects with given message to show in a popup when hovering over the appropriate date '{date: Date, message: string}'.
         *
         * @default []
         */
        disabledDates: object[];

        /**
         * An array of Date-Objects to be enabled for selection. All other dates are disabled.
         *
         * @default []
         */
        enabledDates: object[];

        /**
         * An array of Date-Objects or Objects with given message to show in a popup when hovering over the appropriate date
         * and an individual class for the cell '{date: Date, message: string, class: string}'.
         *
         * @default []
         */
        eventDates: object[];

        /**
         * Default class to be added to each cell of an eventDate date element when no specific class is given to the eventDate element.
         *
         * @default 'blue'
         */
        eventClass: string;

        /**
         * Choose when to show the popup (defaults to 'focus' for input, 'click' for others).
         *
         * @default null
         */
        on: null | 'focus' | 'click';

        /**
         * Date to display initially when no date is selected (null = now).
         *
         * @default null
         */
        initialDate: null | Date;

        /**
         * Display mode to start in, can be 'year', 'month', 'day', 'hour', 'minute' (false = 'day').
         *
         * @default false
         */
        startMode: false | 'year' | 'month' | 'day' | 'hour' | 'minute';

        /**
         * Minimum date/time that can be selected, dates/times before are disabled.
         *
         * @default null
         */
        minDate: null | Date;

        /**
         * Maximum date/time that can be selected, dates/times after are disabled.
         *
         * @default null
         */
        maxDate: null | Date;

        /**
         * Show am/pm in time mode.
         *
         * @default true
         */
        ampm: boolean;

        /**
         * Disable year selection mode.
         *
         * @default false
         */
        disableYear: boolean;

        /**
         * Disable month selection mode.
         *
         * @default false
         */
        disableMonth: boolean;

        /**
         * Disable minute selection mode.
         *
         * @default false
         */
        disableMinute: boolean;

        /**
         * Format the input text upon input blur and module creation.
         *
         * @default true
         */
        formatInput: boolean;

        /**
         * jQuery object or selector for another calendar that represents the start date of a date range.
         *
         * @default null
         */
        startCalendar: null | JQuery | string;

        /**
         * jQuery object or selector for another calendar that represents the end date of a date range.
         *
         * @default null
         */
        endCalendar: null | JQuery | string;

        /**
         * Show multiple months when in 'day' mode.
         *
         * @default 1
         */
        multiMonth: number;

        /**
         * Minimum time gap, can only be 5, 10, 15, 20, 30.
         *
         * @default 5
         */
        minTimeGap: 5 | 10 | 15 | 20 | 30;

        /**
         * Starting short year until 99 where it will be assumed to belong to the last century.
         *
         * @default 60
         */
        centuryBreak: number;

        /**
         * Century to be added to 2-digit years (00 to 'centuryBreak' -1).
         *
         * @default 2000
         */
        currentCentury: number;

        /**
         * Make adjacent days from previous and next month also selectable.
         *
         * @default false
         */
        selectAdjacentDays: 5 | 10 | 15 | 20 | 30;

        popupOptions: Calendar.PopupSettings;

        text: Calendar.TextSettings;

        // endregion

        // region Callbacks

        /**
         * Is called before a calendar date changes. 'return false;' will cancel the change.
         * @since 2.8.0
         */
        onBeforeChange(this: JQuery): void;

        /**
         * Is called after a calendar date has changed.
         */
        onChange(this: JQuery): void;

        /**
         * Is called before a calendar is shown. 'return false;' will prevent the calendar to be shown.
         */
        onShow(this: JQuery): void;

        /**
         * Is called when the calendar is shown.
         */
        onVisible(this: JQuery): void;

        /**
         * Is called before a calendar is hidden. 'return false;' will prevent the calendar to be hidden.
         */
        onHide(this: JQuery): void;

        /**
         * Is called when the calendar is hidden.
         */
        onHidden(this: JQuery): void;

        /**
         * Is called when a cell of the calendar is selected providing its value and current mode.
         * 'return false;' will prevent the selection.
         */
        onSelect(this: JQuery, date: Date, mode: string): void;

        // endregion

        // region DOM Settings

        /**
         * DOM Selectors used internally.
         * If the calendars parent node matches the append selector, the calendar is appended to the input field instead of prepended.
         */
        selector: Calendar.SelectorSettings;

        /**
         * Class names used to attach style to state.
         */
        className: Calendar.ClassNameSettings;

        /**
         * Icon names used internally.
         */
        regExp: Calendar.RegExpSettings;

        metadata: Calendar.MetadataSettings;

        // endregion

        // region Debug Settings

        /**
         * Name used in log statements
         * @default 'Calendar'
         */
        name: string;

        /**
         * Event namespace. Makes sure module teardown does not effect other events attached to an element.
         * @default 'calendar'
         */
        namespace: string;

        /**
         * Silences all console output including error messages, regardless of other debug settings.
         * @default false
         */
        silent: boolean;

        /**
         * Debug output to console
         * @default false
         */
        debug: boolean;

        /**
         * Show console.table output with performance metrics
         * @default true
         */
        performance: boolean;

        /**
         * Debug output includes all internal behaviors
         * @default false
         */
        verbose: boolean;

        error: Calendar.ErrorSettings;

        // endregion
    }

    namespace Calendar {
        type PopupSettings = Partial<Pick<Settings.Popup, keyof Settings.Popup>>;
        type TextSettings = Partial<Pick<Settings.Texts, keyof Settings.Texts>>;
        type SelectorSettings = Partial<Pick<Settings.Selectors, keyof Settings.Selectors>>;
        type ClassNameSettings = Partial<Pick<Settings.ClassNames, keyof Settings.ClassNames>>;
        type RegExpSettings = Partial<Pick<Settings.RegExps, keyof Settings.RegExps>>;
        type MetadataSettings = Partial<Pick<Settings.Metadatas, keyof Settings.Metadatas>>;
        type ErrorSettings = Partial<Pick<Settings.Errors, keyof Settings.Errors>>;

        namespace Settings {
            interface Popup {
                /**
                 * @default 'bottom left'
                 */
                position: string;

                /**
                 * @default 'bottom left'
                 */
                lastResort: string;

                /**
                 * @default 'opposite'
                 */
                prefer: string;

                /**
                 * @default false
                 */
                hideOnScroll: boolean;
            }

            interface Texts {
                /**
                 * @default ['S', 'M', 'T', 'W', 'T', 'F', 'S']
                 */
                days: string[];

                /**
                 * @default ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
                 */
                months: string[];

                /**
                 * @default ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                 */
                monthsShort: string[];

                /**
                 * @default 'Today'
                 */
                today: string;

                /**
                 * @default 'Now'
                 */
                now: string;

                /**
                 * @default 'AM'
                 */
                am: string;

                /**
                 * @default 'PM'
                 */
                pm: string;

                /**
                 * @default 'Week'
                 */
                weekNo: string;
            }

            interface Selectors {
                /**
                 * @default '.ui.popup'
                 */
                popup: string;

                /**
                 * @default 'input'
                 */
                input: string;

                /**
                 * @default 'input'
                 */
                activator: string;

                /**
                 * @default '.inline.field,.inline.fields'
                 */
                append: string;
            }

            interface ClassNames {
                /**
                 * @default 'calendar'
                 */
                calendar: string;

                /**
                 * @default 'active'
                 */
                active: string;

                /**
                 * @default 'ui popup'
                 */
                popup: string;

                /**
                 * @default 'ui equal width grid'
                 */
                grid: string;

                /**
                 * @default 'column'
                 */
                column: string;

                /**
                 * @default 'ui celled center aligned unstackable table'
                 */
                table: string;

                /**
                 * @default 'inverted'
                 */
                inverted: string;

                /**
                 * @default 'prev link'
                 */
                prev: string;

                /**
                 * @default 'next link'
                 */
                next: string;

                /**
                 * @default 'chevron left icon'
                 */
                prevIcon: string;

                /**
                 * @default 'chevron right icon'
                 */
                nextIcon: string;

                /**
                 * @default 'link'
                 */
                link: string;

                /**
                 * @default 'link'
                 */
                cell: string;

                /**
                 * @default 'disabled'
                 */
                disabledCell: string;

                /**
                 * @default 'disabled'
                 */
                weekCell: string;

                /**
                 * @default 'adjacent'
                 */
                adjacentCell: string;

                /**
                 * @default 'active'
                 */
                activeCell: string;

                /**
                 * @default 'range'
                 */
                rangeCell: string;

                /**
                 * @default 'focus'
                 */
                focusCell: string;

                /**
                 * @default 'today'
                 */
                todayCell: string;

                /**
                 * @default 'today link'
                 */
                today: string;

                /**
                 * @default 'disabled'
                 */
                disabled: string;
            }

            interface RegExps {
                /**
                 * @default /[^A-Za-z\u00C0-\u024F]+/g
                 */
                dateWords: RegExp;

                /**
                 * @default /[^\d:]+/g
                 */
                dateNumbers: RegExp;

                /**
                 * @default /d{1,4}|D{1,2}|M{1,4}|YY(?:YY)?|([Hhmsw])\1?|[ASYa]|"[^"]*"|'[^']*'/g
                 */
                token: RegExp;
            }

            interface Metadatas {
                /**
                 * @default 'date'
                 */
                date: string;

                /**
                 * @default 'focusDate'
                 */
                focusDate: string;

                /**
                 * @default 'startDate'
                 */
                startDate: string;

                /**
                 * @default 'endDate'
                 */
                endDate: string;

                /**
                 * @default 'minDate'
                 */
                minDate: string;

                /**
                 * @default 'maxDate'
                 */
                maxDate: string;

                /**
                 * @default 'mode'
                 */
                mode: string;

                /**
                 * @default 'type'
                 */
                type: string;

                /**
                 * @default 'monthOffset'
                 */
                monthOffset: string;

                /**
                 * @default 'message'
                 */
                message: string;

                /**
                 * @default 'class'
                 */
                class: string;

                /**
                 * @default 'inverted'
                 */
                inverted: string;

                /**
                 * @default 'variation'
                 */
                variation: string;

                /**
                 * @default 'position'
                 */
                position: string;

                /**
                 * @default 'month'
                 */
                month: string;

                /**
                 * @default 'year'
                 */
                year: string;

                /**
                 * @default 'hours'
                 */
                hours: string;

                /**
                 * @default 'days'
                 */
                days: string;
            }

            interface Errors {
                /**
                 * @default 'UI Popup, a required component is not included in this page.'
                 */
                popup: string;

                /**
                 * @default 'The method you called is not defined.'
                 */
                method: string;
            }
        }
    }
}