js-year-calendar/src/ts/interfaces/CalendarOptions.ts

A fully customizable year calendar widget

import CalendarDataSourceElement from './CalendarDataSourceElement'
import CalendarContextMenuItem from './CalendarContextMenuItem'
import CalendarDayEventObject from './CalendarDayEventObject'
import CalendarRenderEndEventObject from './CalendarRenderEndEventObject'
import CalendarRangeEventObject from './CalendarRangeEventObject'
import CalendarYearChangedEventObject from './CalendarYearChangedEventObject'

/**
 * Options used for calendar customization.
 */
export default interface CalendarOptions<T extends CalendarDataSourceElement> {

    /**
     * Specifies whether the user can select a range which overlapping an other element present in the datasource.
     */
    allowOverlap?: boolean;

	/**
     * Specifies whether the beginning and the end of each range should be displayed as half selected day.
     */
    alwaysHalfDay?: boolean;
	
    /**
     * Specifies the items of the default context menu.
     */
    contextMenuItems?: CalendarContextMenuItem<T>[];
	
	/**
     * Specify a custom renderer for days.
     * 
     * The HTML Element passed in parameter represent a sub element of the "day" div. If you need to access the "day" div, use `element.parentElement`.
     * 
	 * This function is called during render for each day.
     */
    customDayRenderer?: (element: HTMLElement, currentDate: Date) => void;
	
	/**
     * Specify a custom renderer for data source. Works only with the style set to "custom".
     * 
     * The HTML Element passed in parameter represent a sub element of the "day" div. If you need to access the "day" div, use `element.parentElement`.
     * 
	 * This function is called during render for each day containing at least one event.
     */
    customDataSourceRenderer?: (element: HTMLElement, currentDate: Date, events: T[]) => void;

    /**
     * The elements that must be displayed on the calendar.
     * 
     * Could be:
     * - The datasource
     * - A function that returns the datasource
     * - An async function that will call the callback function with the datasource
     * - An async function that returns a Promise to get the datasource
     */
    dataSource?: T[] | ((currentYear: number) => T[] | Promise<T[]>) | ((currentYear: number, done: (result: T[]) => void) => void);

    /**
     * The days that must be displayed as disabled.
     */
    disabledDays?: Date[];
	
	/**
     * The days of the week that must be displayed as disabled (0 for Sunday, 1 for Monday, etc.).
     */
    disabledWeekDays?: number[];
	
	/**
     * The days of the week that must not be displayed (0 for Sunday, 1 for Monday, etc.).
     */
    hiddenWeekDays?: number[];

	/**
     * Specifies whether the data source must be rendered on disabled days.
     */
    displayDisabledDataSource?: boolean;
	
    /**
     * Specifies whether the weeks number are displayed.
     */
    displayWeekNumber?: boolean;
	
	/**
     * Specifies whether the calendar header is displayed.
     */
    displayHeader?: boolean;

    /**
     * Specifies whether the default context menu must be displayed when right clicking on a day.
     */
    enableContextMenu?: boolean;

    /**
     * Specifies whether the range selection is enabled.
     */
    enableRangeSelection?: boolean;

    /**
     * The language/culture used for calendar rendering.
     */
    language?: string;

    /**
     * The HTML used to render the loading component.
     */
    loadingTemplate: string | HTMLElement;

    /**
     * The date until which days are enabled.
     */
    maxDate?: Date;

    /**
     * The date from which days are enabled.
     */
    minDate?: Date;
	
	/**
     * Specifies whether the beginning and the end of each range should be displayed as rounded cells.
     */
    roundRangeLimits?: boolean;

    /**
     * The year on which the calendar should be opened.
     */
    startYear?: number;

    /**
     * Specifies the style used for displaying datasource ("background", "border" or "custom").
     */
    style?: string;
	
	/**
     * The starting day of the week. This option overrides the parameter define in the language file.
     */
    weekStart?: number;
	
    /**
     * Function fired when a day is clicked.
     */
    clickDay?: (e: CalendarDayEventObject<T>) => void;

    /**
     * Function fired when a day is right clicked.
     */
    dayContextMenu?: (e: CalendarDayEventObject<T>) => void;

    /**
     * Function fired when the mouse enter on a day.
     */
    mouseOnDay?: (e: CalendarDayEventObject<T>) => void;

    /**
     * Function fired when the mouse leaves a day.
     */
    mouseOutDay?: (e: CalendarDayEventObject<T>) => void;

    /**
     * Function fired when the calendar rendering is ended.
     */
    renderEnd?: (e: CalendarRenderEndEventObject) => void;

    /**
     * Function fired when a date range is selected.
     */
    selectRange?: (e: CalendarRangeEventObject) => void;
	
	/**
     * Function fired when the visible year of the calendar is changed.
     */
    yearChanged?: (e: CalendarYearChangedEventObject) => void;
}