color-calendar/dist/index.d.ts

A zero-dependency, customizable events calendar widget with themes and event colors.

import type { CalendarOptions, CalendarSize, Day, EventBulletMode, EventData, LayoutModifier, MonthDisplayType, StartWeekday, WeekdayDisplayType, Weekdays } from "./types";
export default class Calendar {
    readonly CAL_NAME = "color-calendar";
    readonly DAYS_TO_DISPLAY = 42;
    container: string | HTMLElement | (() => HTMLElement | null);
    calendarSize: CalendarSize;
    layoutModifiers: LayoutModifier[];
    eventsData: EventData[];
    theme: string;
    primaryColor?: string;
    headerColor?: string;
    headerBackgroundColor?: string;
    weekdaysColor?: string;
    weekdayDisplayType: WeekdayDisplayType;
    monthDisplayType: MonthDisplayType;
    startWeekday: StartWeekday;
    fontFamilyHeader?: string;
    fontFamilyWeekdays?: string;
    fontFamilyBody?: string;
    dropShadow?: string;
    border?: string;
    borderRadius: string;
    disableMonthYearPickers: boolean;
    disableDayClick: boolean;
    disableMonthArrowClick: boolean;
    customMonthValues?: string[];
    customWeekdayValues?: string[];
    eventBulletMode: EventBulletMode;
    onMonthChange?: (currentDate?: Date, filteredMonthEvents?: EventData[]) => void;
    onSelectedDateChange?: (currentDate?: Date, filteredDateEvents?: EventData[]) => void;
    onSelectedDateClick?: (currentDate?: Date, filteredDateEvents?: EventData[]) => void;
    weekdayDisplayTypeOptions: {
        short: [string, string, string, string, string, string, string];
        "long-lower": [string, string, string, string, string, string, string];
        "long-upper": [string, string, string, string, string, string, string];
    };
    weekdays: Weekdays;
    today: Date;
    selectedDate: Date | null;
    currentViewDate: Date;
    pickerType: string;
    eventDayMap: Map<string, EventData[]>;
    oldSelectedNode: [HTMLElement, number] | null;
    filteredEventsThisMonth: EventData[];
    daysIn_PrevMonth: Day[];
    daysIn_CurrentMonth: Day[];
    daysIn_NextMonth: Day[];
    firstDay_PrevMonth: StartWeekday;
    firstDay_CurrentMonth: StartWeekday;
    firstDay_NextMonth: StartWeekday;
    numOfDays_PrevMonth: number;
    numOfDays_CurrentMonth: number;
    numOfDays_NextMonth: number;
    yearPickerOffset: number;
    yearPickerOffsetTemporary: number;
    calendar: HTMLElement | null;
    calendarRoot: HTMLElement;
    calendarHeader: HTMLElement;
    calendarWeekdays: HTMLElement;
    calendarDays: HTMLElement;
    prevButton: HTMLElement;
    nextButton: HTMLElement;
    pickerContainer: HTMLElement;
    pickerMonthContainer: HTMLElement;
    pickerYearContainer: HTMLElement;
    yearPickerChevronLeft: HTMLElement;
    yearPickerChevronRight: HTMLElement;
    monthyearDisplay: HTMLElement;
    monthDisplay: HTMLElement;
    yearDisplay: HTMLElement;
    addEventListeners: () => void;
    handleCalendarClick: (e: MouseEvent) => void;
    handleKeyboardNavigation: (e: KeyboardEvent) => void;
    handleCalendarDaysKeyboardNavigation: (e: KeyboardEvent) => void;
    navigateToDay: (currentDay: HTMLElement, e: KeyboardEvent) => void;
    selectDayFromKeyboard: (dayElement: HTMLElement) => void;
    focusDay: (dayElement: HTMLElement) => void;
    handlePickerKeyboardNavigation: (e: KeyboardEvent) => void;
    handleMonthPickerKeyboardNavigation: (e: KeyboardEvent) => void;
    handleYearPickerKeyboardNavigation: (e: KeyboardEvent) => void;
    configureStylePreferences: () => void;
    togglePicker: (shouldOpen?: boolean) => void;
    openPicker: () => void;
    closePicker: () => void;
    openYearPicker: () => void;
    openMonthPicker: () => void;
    makeMonthPickerOptionsFocusable: () => void;
    makeYearPickerOptionsFocusable: () => void;
    makeAllPickerOptionsUnfocusable: () => void;
    makeAllCalendarDaysUnfocusable: () => void;
    restoreCalendarDaysFocusability: () => void;
    focusSelectedYearOption: () => void;
    focusSelectedMonthOption: () => void;
    handleMonthPickerClick: (e: MouseEvent) => void;
    updateMonthPickerSelection: (newMonthValue: number) => void;
    updateMonthPickerTodaySelection: () => void;
    removeMonthPickerSelection: () => void;
    handleYearPickerClick: (e: MouseEvent) => void;
    updateYearPickerSelection: (newYearValue: number, newYearIndex?: number) => void;
    updateYearPickerTodaySelection: () => void;
    removeYearPickerSelection: () => void;
    generatePickerYears: () => void;
    handleYearChevronLeftClick: () => void;
    handleYearChevronRightClick: () => void;
    setMonthDisplayType: (monthDisplayType: MonthDisplayType) => void;
    handleMonthYearDisplayClick: (e: MouseEvent) => void;
    handlePrevMonthButtonClick: () => void;
    handleNextMonthButtonClick: () => void;
    updateMonthYear: () => void;
    setWeekdayDisplayType: (weekdayDisplayType: WeekdayDisplayType) => void;
    generateAndRenderWeekdays: () => void;
    setSelectedDate: (date: Date | null) => void;
    getSelectedDate: () => Date | null;
    clearCalendarDays: () => void;
    updateCalendar: (isMonthChanged?: boolean) => void;
    setOldSelectedNode: () => void;
    selectDayInitial: (setDate?: boolean) => void;
    ensureFirstDayFocusable: () => void;
    makeFirstDayFocusable: () => void;
    handleCalendarDayClick: (e: MouseEvent) => void;
    removeOldDaySelection: () => void;
    updateSelectedDate: (newDay: number) => void;
    updateCurrentDate: (monthOffset: number, newMonth?: number, newYear?: number) => void;
    generateDays: () => void;
    renderDays: () => void;
    rerenderSelectedDay: (element: HTMLElement, dayNum: number, storeOldSelected?: boolean) => void;
    getEventsData: () => EventData[];
    setEventsData: (events: EventData[]) => number;
    addEventsData: (newEvents?: EventData[]) => number;
    getDateEvents: (date: Date) => EventData[];
    getMonthEvents: () => EventData[];
    constructor(options?: CalendarOptions);
    private resolveContainer;
    private getCalendar;
    reset(date: Date | null): void;
}
export type { CalendarSize, LayoutModifier, CalendarOptions, EventData, Day, MonthDisplayType, WeekdayDisplayType, Weekdays, StartWeekday, };