UNPKG

5.28 kBTypeScriptView Raw
1export interface CalendarOptions {
2 id?: string;
3 calendarSize?: CalendarSize;
4 layoutModifiers?: LayoutModifier[];
5 eventsData?: EventData[];
6 theme?: string;
7 primaryColor?: string;
8 headerColor?: string;
9 headerBackgroundColor?: string;
10 weekdaysColor?: string;
11 weekdayDisplayType?: WeekdayDisplayType;
12 monthDisplayType?: MonthDisplayType;
13 startWeekday?: StartWeekday;
14 fontFamilyHeader?: string;
15 fontFamilyWeekdays?: string;
16 fontFamilyBody?: string;
17 dropShadow?: string;
18 border?: string;
19 borderRadius?: string;
20 disableMonthYearPickers?: boolean;
21 disableDayClick?: boolean;
22 disableMonthArrowClick? : boolean;
23 monthChanged?: (currentDate?: Date, filteredMonthEvents?: EventData[]) => void;
24 dateChanged?: (currentDate?: Date, filteredDateEvents?: EventData[]) => void;
25}
26
27export interface EventData {
28 start: string,
29 end: string,
30 [key: string]: any,
31}
32
33export interface Day {
34 day: number,
35 selected?: boolean,
36}
37
38export type CalendarSize = "small" | "large";
39
40export type LayoutModifier = "month-left-align";
41
42export type MonthDisplayType = "short" | "long";
43
44export type WeekdayDisplayType = "short" | "long-lower" | "long-upper";
45
46export type Weekdays = [string, string, string, string, string, string, string];
47
48export type StartWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
49
50export default class Calendar {
51 readonly CAL_NAME = "color-calendar";
52 readonly DAYS_TO_DISPLAY = 42;
53 id: string;
54 calendarSize: CalendarSize;
55 layoutModifiers: LayoutModifier[];
56 eventsData: EventData[];
57 theme: string;
58 primaryColor?: string;
59 headerColor?: string;
60 headerBackgroundColor?: string;
61 weekdaysColor?: string;
62 weekdayDisplayType: WeekdayDisplayType;
63 monthDisplayType: MonthDisplayType;
64 startWeekday: StartWeekday;
65 fontFamilyHeader?: string;
66 fontFamilyWeekdays?: string;
67 fontFamilyBody?: string;
68 dropShadow?: string;
69 border?: string;
70 borderRadius?: string;
71 disableMonthYearPickers: boolean;
72 disableDayClick: boolean;
73 disableMonthArrowClick: boolean;
74 monthChanged?: (currentDate?: Date, filteredMonthEvents?: EventData[]) => void;
75 dateChanged?: (currentDate?: Date, filteredDateEvents?: EventData[]) => void;
76 weekdayDisplayTypeOptions: {
77 short: Weekdays;
78 "long-lower": Weekdays;
79 "long-upper": Weekdays;
80 };
81 weekdays: Weekdays;
82 today: Date;
83 currentDate: Date;
84 pickerType: string;
85 eventDayMap: any;
86 oldSelectedNode: [HTMLElement, number] | null;
87 filteredEventsThisMonth: EventData[];
88 daysIn_PrevMonth: Day[];
89 daysIn_CurrentMonth: Day[];
90 daysIn_NextMonth: Day[];
91 firstDay_PrevMonth: StartWeekday;
92 firstDay_CurrentMonth: StartWeekday;
93 firstDay_NextMonth: StartWeekday;
94 numOfDays_PrevMonth: number;
95 numOfDays_CurrentMonth: number;
96 numOfDays_NextMonth: number;
97 yearPickerOffset: number;
98 yearPickerOffsetTemporary: number;
99 calendar: HTMLElement;
100 calendarRoot: HTMLElement;
101 calendarHeader: HTMLElement;
102 calendarWeekdays: HTMLElement;
103 calendarDays: HTMLElement;
104 prevButton: HTMLElement;
105 nextButton: HTMLElement;
106 pickerContainer: HTMLElement;
107 pickerMonthContainer: HTMLElement;
108 pickerYearContainer: HTMLElement;
109 yearPickerChevronLeft: HTMLElement;
110 yearPickerChevronRight: HTMLElement;
111 monthyearDisplay: HTMLElement;
112 monthDisplay: HTMLElement;
113 yearDisplay: HTMLElement;
114 addEventListeners: () => void;
115 configureStylePreferences: () => void;
116 togglePicker: (shouldOpen?: boolean) => void;
117 handleMonthPickerClick: (e: any) => void;
118 updateMonthPickerSelection: (newMonthValue: number) => void;
119 removeMonthPickerSelection: () => void;
120 handleYearPickerClick: (e: any) => void;
121 updateYearPickerSelection: (newYearValue: number, newYearIndex?: number) => void;
122 updateYearPickerTodaySelection: () => void;
123 removeYearPickerSelection: () => void;
124 generatePickerYears: () => void;
125 handleYearChevronLeftClick: () => void;
126 handleYearChevronRightClick: () => void;
127 setMonthDisplayType: (monthDisplayType: MonthDisplayType) => void;
128 handleMonthYearDisplayClick: (e: any) => void;
129 handlePrevMonthButtonClick: () => void;
130 handleNextMonthButtonClick: () => void;
131 updateMonthYear: () => void;
132 setWeekdayDisplayType: (weekdayDisplayType: WeekdayDisplayType) => void;
133 generateWeekdays: () => void;
134 setDate: (date: Date) => void;
135 getSelectedDate: () => Date;
136 clearCalendarDays: () => void;
137 updateCalendar: (isMonthChanged?: boolean) => void;
138 setOldSelectedNode: () => void;
139 selectDayInitial: (setDate?: boolean) => void;
140 handleCalendarDayClick: (e: any) => void;
141 removeOldDaySelection: () => void;
142 updateCurrentDate: (monthOffset: number, newDay?: number, newMonth?: number, newYear?: number) => void;
143 generateDays: () => void;
144 renderDays: () => void;
145 rerenderSelectedDay: (element: HTMLElement, dayNum: number, storeOldSelected?: boolean) => void;
146 getEventsData: () => any;
147 setEventsData: (events: EventData[]) => number;
148 addEventsData: (newEvents?: EventData[]) => number;
149 getDateEvents: (date: Date) => EventData[];
150 getMonthEvents: () => EventData[];
151 constructor(options?: CalendarOptions);
152 reset(date: Date): void;
153}