1 | export 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 |
|
27 | export interface EventData {
|
28 | start: string,
|
29 | end: string,
|
30 | [key: string]: any,
|
31 | }
|
32 |
|
33 | export interface Day {
|
34 | day: number,
|
35 | selected?: boolean,
|
36 | }
|
37 |
|
38 | export type CalendarSize = "small" | "large";
|
39 |
|
40 | export type LayoutModifier = "month-left-align";
|
41 |
|
42 | export type MonthDisplayType = "short" | "long";
|
43 |
|
44 | export type WeekdayDisplayType = "short" | "long-lower" | "long-upper";
|
45 |
|
46 | export type Weekdays = [string, string, string, string, string, string, string];
|
47 |
|
48 | export type StartWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
49 |
|
50 | export 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 | }
|