Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Calendar<T>

Calendar instance.

Type parameters

Hierarchy

  • Calendar

Index

Constructors

Events

Methods

Constructors

constructor

  • Create a new calendar.

    Parameters

    • element: HTMLElement | string

      The element (or the selector to an element) in which the calendar should be created.

    • Default value options: CalendarOptions<T> = null

      The options used to customize the calendar

    Returns Calendar

Events

clickDay

clickDay: CalendarDayEventObject<T>

Fired when a day is clicked.

example

document.querySelector('.calendar').addEventListener('clickDay', function(e) {
  console.log("Click on day: " + e.date + " (" + e.events.length + " events)");
})

dayContextMenu

dayContextMenu: CalendarDayEventObject<T>

Fired when a day is right clicked.

example

document.querySelector('.calendar').addEventListener('clickDay', function(e) {
  console.log("Right click on day: " + e.date + " (" + e.events.length + " events)");
})

mouseOnDay

mouseOnDay: CalendarDayEventObject<T>

Fired when the mouse enter in a day.

example

document.querySelector('.calendar').addEventListener('mouseOnDay', function(e) {
  console.log("Mouse enter in a day: " + e.date + " (" + e.events.length + " events)");
})

mouseOutDay

mouseOutDay: CalendarDayEventObject<T>

Fired when the mouse leave a day.

example

document.querySelector('.calendar').addEventListener('mouseOutDay', function(e) {
  console.log("Mouse leave a day: " + e.date + " (" + e.events.length + " events)");
})

periodChanged

periodChanged: CalendarPeriodChangedEventObject

Triggered after the changing the visible period.

example

document.querySelector('.calendar').addEventListener('periodChanged', function(e) {
  console.log(`New period selected: ${e.startDate} ${e.endDate}`);
})

renderEnd

renderEnd: CalendarRenderEndEventObject

Fired when the calendar rendering is ended.

example

document.querySelector('.calendar').addEventListener('renderEnd', function(e) {
  console.log("Render end for year: " + e.currentYear);
})

selectRange

selectRange: CalendarRangeEventObject

Fired when a date range is selected.

Don't forget to enable the enableRangeSelection option to be able to use the range selection functionality.

example

document.querySelector('.calendar').addEventListener('selectRange', function(e) {
  console.log("Select the range: " + e.startDate + " - " + e.endDate);
})

yearChanged

yearChanged: CalendarYearChangedEventObject

Triggered after the changing the current year. Works only if the calendar is used in a full year mode. Otherwise, use periodChanged event.

example

document.querySelector('.calendar').addEventListener('yearChanged', function(e) {
  console.log("New year selected: " + e.currentYear);
})

Methods

addEvent

  • addEvent(evt: T, preventRendering?: boolean): void

  • Add a new element to the data source.

    This method causes a refresh of the calendar.

    Parameters

    • evt: T
    • Default value preventRendering: boolean = false

      Indicates whether the calendar shouldn't be refreshed once the event added.

    Returns void

getAllowOverlap

  • getAllowOverlap(): boolean

  • Gets a value indicating whether the user can select a range which overlapping an other element present in the datasource.

    Returns boolean

getAlwaysHalfDay

  • getAlwaysHalfDay(): boolean

  • Gets a value indicating whether the beginning and the end of each range should be displayed as half selected day.

    Returns boolean

getContextMenuItems

getCurrentPeriod

  • getCurrentPeriod(): { endDate: Date; startDate: Date }

  • Gets the period displayed on the calendar.

    Returns { endDate: Date; startDate: Date }

    • endDate: Date
    • startDate: Date

getCustomDataSourceRenderer

  • getCustomDataSourceRenderer(): (element: HTMLElement, currentDate: Date, events: T[]) => void

  • Gets the custom data source renderer.

    Returns (element: HTMLElement, currentDate: Date, events: T[]) => void

      • (element: HTMLElement, currentDate: Date, events: T[]): void

      • Parameters

        • element: HTMLElement
        • currentDate: Date
        • events: T[]

        Returns void

getCustomDayRenderer

  • getCustomDayRenderer(): (element: HTMLElement, currentDate: Date) => void

  • Gets the custom day renderer.

    Returns (element: HTMLElement, currentDate: Date) => void

      • (element: HTMLElement, currentDate: Date): void

      • Parameters

        • element: HTMLElement
        • currentDate: Date

        Returns void

getDataSource

  • getDataSource(): T[] | ((currentYear: number) => T[] | Promise<T[]>) | ((currentYear: number, done: (result: T[]) => void) => void)

  • Gets the current data source.

    Returns T[] | ((currentYear: number) => T[] | Promise<T[]>) | ((currentYear: number, done: (result: T[]) => void) => void)

getDisabledDays

  • getDisabledDays(): Date[]

getDisabledWeekDays

  • getDisabledWeekDays(): number[]

getDisplayDisabledDataSource

  • getDisplayDisabledDataSource(): boolean

  • Gets a value indicating whether the data source must be rendered on disabled days.

    Returns boolean

getDisplayHeader

  • getDisplayHeader(): boolean

getDisplayWeekNumber

  • getDisplayWeekNumber(): boolean

getEnableContextMenu

  • getEnableContextMenu(): boolean

  • Gets a value indicating whether the default context menu must be displayed when right clicking on a day.

    Returns boolean

getEnableRangeSelection

  • getEnableRangeSelection(): boolean

  • Gets a value indicating whether the user can make range selection.

    Returns boolean

getEvents

  • getEvents(date: Date): T[]

  • Gets the data source elements for a specified day.

    Parameters

    • date: Date

      The specified day.

    Returns T[]

getEventsOnRange

  • getEventsOnRange(startDate: Date, endDate: Date): T[]

  • Gets the data source elements for a specified range of days.

    Parameters

    • startDate: Date

      The beginning of the day range (inclusive).

    • endDate: Date

      The end of the day range (non inclusive).

    Returns T[]

getHiddenWeekDays

  • getHiddenWeekDays(): number[]

getLanguage

  • getLanguage(): string

getLoadingTemplate

  • getLoadingTemplate(): string | HTMLElement

getMaxDate

  • getMaxDate(): Date

getMinDate

  • getMinDate(): Date

getNumberMonthsDisplayed

  • getNumberMonthsDisplayed(): number

getRoundRangeLimits

  • getRoundRangeLimits(): boolean

  • Gets a value indicating whether the beginning and the end of each range should be displayed as rounded cells.

    Returns boolean

getStartDate

  • getStartDate(): Date

getStyle

  • getStyle(): string

getWeekNumber

  • getWeekNumber(date: Date): number

  • Gets the week number for a specified date.

    Parameters

    • date: Date

      The specified date.

    Returns number

getWeekStart

  • getWeekStart(): number

getYear

  • getYear(): number | null

  • Gets the year displayed on the calendar. If the calendar is not used in a full year configuration, this will return the year of the first date displayed in the calendar.

    Returns number | null

isThereFreeSlot

  • isThereFreeSlot(date: Date, after?: Boolean): Boolean

  • Check if there is no event on the first part, last part or on the whole specified day.

    Parameters

    • date: Date

      The specified day.

    • Default value after: Boolean = null

      Whether to check for a free slot on the first part (if false) or the last part (if true) of the day. If null, this will check on the whole day.

      Usefull only if using the alwaysHalfDay option of the calendar, or the startHalfDay or endHalfDay option of the datasource.

    Returns Boolean

render

  • render(isLoading?: boolean): void

  • Renders the calendar.

    Parameters

    • Default value isLoading: boolean = false

    Returns void

setAllowOverlap

  • setAllowOverlap(allowOverlap: boolean): void

  • Sets a value indicating whether the user can select a range which overlapping an other element present in the datasource.

    Parameters

    • allowOverlap: boolean

      Indicates whether the user can select a range which overlapping an other element present in the datasource.

    Returns void

setAlwaysHalfDay

  • setAlwaysHalfDay(alwaysHalfDay: boolean, preventRendering?: boolean): void

  • Sets a value indicating whether the beginning and the end of each range should be displayed as half selected day.

    This method causes a refresh of the calendar.

    Parameters

    • alwaysHalfDay: boolean

      Indicates whether the beginning and the end of each range should be displayed as half selected day.

    • Default value preventRendering: boolean = false

    Returns void

setContextMenuItems

  • Sets new context menu items.

    This method causes a refresh of the calendar.

    Parameters

    • contextMenuItems: CalendarContextMenuItem<T>[]

      The new context menu items.

    • Default value preventRendering: boolean = false

    Returns void

setCustomDataSourceRenderer

  • setCustomDataSourceRenderer(customDataSourceRenderer: (element: HTMLElement, currentDate: Date, events: T[]) => void, preventRendering?: boolean): void

  • Sets the custom data source renderer. Works only with the style set to "custom".

    This method causes a refresh of the calendar.

    Parameters

    • customDataSourceRenderer: (element: HTMLElement, currentDate: Date, events: T[]) => void
        • (element: HTMLElement, currentDate: Date, events: T[]): void

        • Parameters

          • element: HTMLElement
          • currentDate: Date
          • events: T[]

          Returns void

    • Default value preventRendering: boolean = false

    Returns void

setCustomDayRenderer

  • setCustomDayRenderer(customDayRenderer: (element: HTMLElement, currentDate: Date) => void, preventRendering?: boolean): void

  • Sets the custom day renderer.

    This method causes a refresh of the calendar.

    Parameters

    • customDayRenderer: (element: HTMLElement, currentDate: Date) => void
        • (element: HTMLElement, currentDate: Date): void

        • Parameters

          • element: HTMLElement
          • currentDate: Date

          Returns void

    • Default value preventRendering: boolean = false

    Returns void

setDataSource

  • setDataSource(dataSource: T[] | ((currentYear: number) => T[] | Promise<T[]>) | ((currentYear: number, done: (result: T[]) => void) => void), preventRendering?: boolean): void

  • Sets a new data source.

    This method causes a refresh of the calendar.

    Parameters

    • dataSource: T[] | ((currentYear: number) => T[] | Promise<T[]>) | ((currentYear: number, done: (result: T[]) => void) => void)

      The new data source.

    • Default value preventRendering: boolean = false

    Returns void

setDisabledDays

  • setDisabledDays(disabledDays: Date[], preventRendering?: boolean): void

  • Sets the disabled days.

    This method causes a refresh of the calendar.

    Parameters

    • disabledDays: Date[]
    • Default value preventRendering: boolean = false

    Returns void

setDisabledWeekDays

  • setDisabledWeekDays(disabledWeekDays: number[], preventRendering?: boolean): void

  • Sets the disabled days of the week.

    This method causes a refresh of the calendar.

    Parameters

    • disabledWeekDays: number[]

      The disabled days of the week to set.

    • Default value preventRendering: boolean = false

    Returns void

setDisplayDisabledDataSource

  • setDisplayDisabledDataSource(displayDisabledDataSource: boolean, preventRendering?: boolean): void

  • Sets a value indicating whether the data source must be rendered on disabled days.

    This method causes a refresh of the calendar.

    Parameters

    • displayDisabledDataSource: boolean

      Indicates whether the data source must be rendered on disabled days.

    • Default value preventRendering: boolean = false

    Returns void

setDisplayHeader

  • setDisplayHeader(displayHeader: boolean, preventRendering?: boolean): void

  • Sets a value indicating whether the calendar header is displayed.

    This method causes a refresh of the calendar.

    Parameters

    • displayHeader: boolean

      Indicates whether the calendar header is displayed.

    • Default value preventRendering: boolean = false

    Returns void

setDisplayWeekNumber

  • setDisplayWeekNumber(displayWeekNumber: boolean, preventRendering?: boolean): void

  • Sets a value indicating whether the weeks number are displayed.

    This method causes a refresh of the calendar.

    Parameters

    • displayWeekNumber: boolean

      Indicates whether the weeks number are displayed.

    • Default value preventRendering: boolean = false

    Returns void

setEnableContextMenu

  • setEnableContextMenu(enableContextMenu: boolean, preventRendering?: boolean): void

  • Sets a value indicating whether the default context menu must be displayed when right clicking on a day.

    This method causes a refresh of the calendar.

    Parameters

    • enableContextMenu: boolean

      Indicates whether the default context menu must be displayed when right clicking on a day.

    • Default value preventRendering: boolean = false

    Returns void

setEnableRangeSelection

  • setEnableRangeSelection(enableRangeSelection: boolean, preventRendering?: boolean): void

  • Sets a value indicating whether the user can make range selection.

    This method causes a refresh of the calendar.

    Parameters

    • enableRangeSelection: boolean

      Indicates whether the user can make range selection.

    • Default value preventRendering: boolean = false

    Returns void

setHiddenWeekDays

  • setHiddenWeekDays(hiddenWeekDays: number[], preventRendering?: boolean): void

  • Sets the hidden days of the week.

    This method causes a refresh of the calendar.

    Parameters

    • hiddenWeekDays: number[]

      The hidden days of the week to set.

    • Default value preventRendering: boolean = false

    Returns void

setLanguage

  • setLanguage(language: string, preventRendering?: boolean): void

  • Sets the language used for calendar rendering.

    This method causes a refresh of the calendar.

    Parameters

    • language: string

      The language to use for calendar redering.

    • Default value preventRendering: boolean = false

    Returns void

setLoadingTemplate

  • setLoadingTemplate(loadingTemplate: string | HTMLElement): void

  • Sets the loading template.

    Parameters

    • loadingTemplate: string | HTMLElement

      The loading template.

    Returns void

setMaxDate

  • setMaxDate(date: Date, preventRendering?: boolean): void

  • Sets the maximum date of the calendar.

    This method causes a refresh of the calendar.

    Parameters

    • date: Date
    • Default value preventRendering: boolean = false

    Returns void

setMinDate

  • setMinDate(date: Date, preventRendering?: boolean): void

  • Sets the minimum date of the calendar.

    This method causes a refresh of the calendar.

    Parameters

    • date: Date
    • Default value preventRendering: boolean = false

    Returns void

setNumberMonthsDisplayed

  • setNumberMonthsDisplayed(numberMonthsDisplayed: number | string, preventRendering?: boolean): void

  • Sets the number of months displayed that should be displayed by the calendar.

    This method causes a refresh of the calendar.

    Parameters

    • numberMonthsDisplayed: number | string

      Number of months that should be displayed by the calendar.

    • Default value preventRendering: boolean = false

    Returns void

setRoundRangeLimits

  • setRoundRangeLimits(roundRangeLimits: boolean, preventRendering?: boolean): void

  • Sets a value indicating whether the beginning and the end of each range should be displayed as rounded cells.

    This method causes a refresh of the calendar.

    Parameters

    • roundRangeLimits: boolean

      Indicates whether the beginning and the end of each range should be displayed as rounded cells.

    • Default value preventRendering: boolean = false

    Returns void

setStartDate

  • setStartDate(startDate: Date): void

  • Sets the first date that should be displayed on the calendar.

    Parameters

    • startDate: Date

      The first date that should be displayed on the calendar.

    Returns void

setStyle

  • setStyle(style: string, preventRendering?: boolean): void

  • Sets the style to use for displaying data source.

    This method causes a refresh of the calendar.

    Parameters

    • style: string

      The style to use for displaying data source ("background", "border" or "custom").

    • Default value preventRendering: boolean = false

    Returns void

setWeekStart

  • setWeekStart(weekStart: number | string, preventRendering?: boolean): void

  • Sets the starting day of the week.

    This method causes a refresh of the calendar.

    Parameters

    • weekStart: number | string

      The starting day of the week. This option overrides the parameter define in the language file.

    • Default value preventRendering: boolean = false

    Returns void

setYear

  • setYear(year: number | string): void

  • Sets the year displayed on the calendar. If the calendar is not used in a full year configuration, this will set the start date to January 1st of the given year.

    Parameters

    • year: number | string

      The year to displayed on the calendar.

    Returns void

Generated using TypeDoc