kalendly 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +492 -0
- package/dist/core/index.d.mts +181 -0
- package/dist/core/index.d.ts +181 -0
- package/dist/core/index.js +349 -0
- package/dist/core/index.js.map +1 -0
- package/dist/core/index.mjs +309 -0
- package/dist/core/index.mjs.map +1 -0
- package/dist/index.d.mts +623 -0
- package/dist/index.d.ts +623 -0
- package/dist/index.js +1445 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +1403 -0
- package/dist/index.mjs.map +1 -0
- package/dist/react/index.d.mts +208 -0
- package/dist/react/index.d.ts +208 -0
- package/dist/react/index.js +558 -0
- package/dist/react/index.js.map +1 -0
- package/dist/react/index.mjs +516 -0
- package/dist/react/index.mjs.map +1 -0
- package/dist/react-native/index.d.mts +465 -0
- package/dist/react-native/index.d.ts +465 -0
- package/dist/react-native/index.js +894 -0
- package/dist/react-native/index.js.map +1 -0
- package/dist/react-native/index.mjs +851 -0
- package/dist/react-native/index.mjs.map +1 -0
- package/dist/styles/calendar.css +500 -0
- package/dist/vanilla/index.d.mts +214 -0
- package/dist/vanilla/index.d.ts +214 -0
- package/dist/vanilla/index.js +621 -0
- package/dist/vanilla/index.js.map +1 -0
- package/dist/vanilla/index.mjs +579 -0
- package/dist/vanilla/index.mjs.map +1 -0
- package/dist/vanilla/index.umd.js +604 -0
- package/dist/vanilla/index.umd.js.map +1 -0
- package/dist/vue/index.js +1 -0
- package/dist/vue/index.mjs +439 -0
- package/package.json +161 -0
|
@@ -0,0 +1,465 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { ViewStyle, TextStyle } from 'react-native';
|
|
3
|
+
|
|
4
|
+
interface CalendarEvent {
|
|
5
|
+
id: string | number;
|
|
6
|
+
name: string;
|
|
7
|
+
date: string | Date;
|
|
8
|
+
description?: string;
|
|
9
|
+
color?: string;
|
|
10
|
+
[key: string]: any;
|
|
11
|
+
}
|
|
12
|
+
interface CalendarDate {
|
|
13
|
+
date: Date;
|
|
14
|
+
isCurrentMonth: boolean;
|
|
15
|
+
isToday: boolean;
|
|
16
|
+
hasEvents: boolean;
|
|
17
|
+
events: CalendarEvent[];
|
|
18
|
+
}
|
|
19
|
+
interface CalendarState {
|
|
20
|
+
currentYear: number;
|
|
21
|
+
currentMonth: number;
|
|
22
|
+
currentDate: number;
|
|
23
|
+
selectedDate: Date | null;
|
|
24
|
+
selectedDayIndex: number | null;
|
|
25
|
+
tasks: CalendarEvent[];
|
|
26
|
+
}
|
|
27
|
+
interface CalendarConfig {
|
|
28
|
+
events: CalendarEvent[];
|
|
29
|
+
initialDate?: Date;
|
|
30
|
+
minYear?: number;
|
|
31
|
+
maxYear?: number;
|
|
32
|
+
weekStartsOn?: 0 | 1;
|
|
33
|
+
}
|
|
34
|
+
interface CalendarActions {
|
|
35
|
+
next: () => void;
|
|
36
|
+
previous: () => void;
|
|
37
|
+
jump: (year: number, month: number) => void;
|
|
38
|
+
selectDate: (date: Date) => void;
|
|
39
|
+
updateTasks: () => void;
|
|
40
|
+
}
|
|
41
|
+
interface PopupPosition {
|
|
42
|
+
class: 'popup-left' | 'popup-right' | 'popup-center-top' | 'popup-center-bottom';
|
|
43
|
+
style?: Record<string, string | number>;
|
|
44
|
+
}
|
|
45
|
+
interface CalendarViewModel extends CalendarState {
|
|
46
|
+
months: string[];
|
|
47
|
+
days: string[];
|
|
48
|
+
years: number[];
|
|
49
|
+
monthAndYearText: string;
|
|
50
|
+
scheduleDay: string;
|
|
51
|
+
calendarDates: (CalendarDate | null)[][];
|
|
52
|
+
popupPositionClass: string;
|
|
53
|
+
}
|
|
54
|
+
type CalendarEventHandler = (event: CalendarEvent) => void;
|
|
55
|
+
interface CalendarProps {
|
|
56
|
+
events: CalendarEvent[];
|
|
57
|
+
initialDate?: Date;
|
|
58
|
+
minYear?: number;
|
|
59
|
+
maxYear?: number;
|
|
60
|
+
weekStartsOn?: 0 | 1;
|
|
61
|
+
onDateSelect?: (date: Date) => void;
|
|
62
|
+
onEventClick?: CalendarEventHandler;
|
|
63
|
+
onMonthChange?: (year: number, month: number) => void;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
declare const MONTHS: string[];
|
|
67
|
+
declare const DAYS: string[];
|
|
68
|
+
/**
|
|
69
|
+
* Normalizes a date to midnight (00:00:00) for comparison purposes
|
|
70
|
+
*/
|
|
71
|
+
declare function normalizeDate(date: Date): Date;
|
|
72
|
+
/**
|
|
73
|
+
* Checks if two dates are the same day
|
|
74
|
+
*/
|
|
75
|
+
declare function isSameDay(date1: Date, date2: Date): boolean;
|
|
76
|
+
/**
|
|
77
|
+
* Checks if a date is today
|
|
78
|
+
*/
|
|
79
|
+
declare function isToday(date: Date): boolean;
|
|
80
|
+
/**
|
|
81
|
+
* Generates an array of years for the year selector
|
|
82
|
+
*/
|
|
83
|
+
declare function generateYears(minYear?: number, maxYear?: number): number[];
|
|
84
|
+
/**
|
|
85
|
+
* Gets events for a specific date
|
|
86
|
+
*/
|
|
87
|
+
declare function getEventsForDate(events: CalendarEvent[], date: Date): CalendarEvent[];
|
|
88
|
+
/**
|
|
89
|
+
* Checks if a date has any events
|
|
90
|
+
*/
|
|
91
|
+
declare function hasEvents(events: CalendarEvent[], date: Date): boolean;
|
|
92
|
+
/**
|
|
93
|
+
* Generates calendar dates for a given month and year
|
|
94
|
+
*/
|
|
95
|
+
declare function generateCalendarDates(year: number, month: number, events?: CalendarEvent[], weekStartsOn?: 0 | 1): (CalendarDate | null)[][];
|
|
96
|
+
/**
|
|
97
|
+
* Gets the popup position class based on the selected day index
|
|
98
|
+
*/
|
|
99
|
+
declare function getPopupPositionClass(selectedDayIndex: number | null): string;
|
|
100
|
+
/**
|
|
101
|
+
* Gets CSS classes for a calendar cell
|
|
102
|
+
*/
|
|
103
|
+
declare function getCellClasses(calendarDate: CalendarDate | null): string[];
|
|
104
|
+
/**
|
|
105
|
+
* Formats a date for display
|
|
106
|
+
*/
|
|
107
|
+
declare function formatDateForDisplay(date: Date): string;
|
|
108
|
+
/**
|
|
109
|
+
* Gets month and year text for display
|
|
110
|
+
*/
|
|
111
|
+
declare function getMonthYearText(year: number, month: number): string;
|
|
112
|
+
|
|
113
|
+
declare class CalendarEngine {
|
|
114
|
+
private state;
|
|
115
|
+
private config;
|
|
116
|
+
private listeners;
|
|
117
|
+
constructor(config: CalendarConfig);
|
|
118
|
+
/**
|
|
119
|
+
* Subscribe to state changes
|
|
120
|
+
*/
|
|
121
|
+
subscribe(listener: () => void): () => void;
|
|
122
|
+
/**
|
|
123
|
+
* Notify all listeners of state changes
|
|
124
|
+
*/
|
|
125
|
+
private notify;
|
|
126
|
+
/**
|
|
127
|
+
* Get current state
|
|
128
|
+
*/
|
|
129
|
+
getState(): CalendarState;
|
|
130
|
+
/**
|
|
131
|
+
* Get view model with computed properties
|
|
132
|
+
*/
|
|
133
|
+
getViewModel(): CalendarViewModel;
|
|
134
|
+
/**
|
|
135
|
+
* Get actions object
|
|
136
|
+
*/
|
|
137
|
+
getActions(): CalendarActions;
|
|
138
|
+
/**
|
|
139
|
+
* Navigate to next month
|
|
140
|
+
*/
|
|
141
|
+
private next;
|
|
142
|
+
/**
|
|
143
|
+
* Navigate to previous month
|
|
144
|
+
*/
|
|
145
|
+
private previous;
|
|
146
|
+
/**
|
|
147
|
+
* Jump to specific month and year
|
|
148
|
+
*/
|
|
149
|
+
private jump;
|
|
150
|
+
/**
|
|
151
|
+
* Select a specific date
|
|
152
|
+
*/
|
|
153
|
+
private selectDate;
|
|
154
|
+
/**
|
|
155
|
+
* Update tasks for the currently selected date
|
|
156
|
+
*/
|
|
157
|
+
private updateTasks;
|
|
158
|
+
/**
|
|
159
|
+
* Update events configuration
|
|
160
|
+
*/
|
|
161
|
+
updateEvents(events: CalendarEvent[]): void;
|
|
162
|
+
/**
|
|
163
|
+
* Handle date cell click
|
|
164
|
+
*/
|
|
165
|
+
handleDateClick(date: Date, dayIndex?: number): void;
|
|
166
|
+
/**
|
|
167
|
+
* Check if date has events
|
|
168
|
+
*/
|
|
169
|
+
hasEventsForDate(date: Date): boolean;
|
|
170
|
+
/**
|
|
171
|
+
* Get events for a specific date
|
|
172
|
+
*/
|
|
173
|
+
getEventsForDate(date: Date): CalendarEvent[];
|
|
174
|
+
/**
|
|
175
|
+
* Clear selected date
|
|
176
|
+
*/
|
|
177
|
+
clearSelection(): void;
|
|
178
|
+
/**
|
|
179
|
+
* Destroy the engine and cleanup listeners
|
|
180
|
+
*/
|
|
181
|
+
destroy(): void;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
interface ReactNativeCalendarProps extends CalendarProps {
|
|
185
|
+
style?: ViewStyle;
|
|
186
|
+
containerStyle?: ViewStyle;
|
|
187
|
+
headerStyle?: ViewStyle;
|
|
188
|
+
headerTextStyle?: TextStyle;
|
|
189
|
+
cellStyle?: ViewStyle;
|
|
190
|
+
cellTextStyle?: TextStyle;
|
|
191
|
+
renderEvent?: (event: CalendarEvent) => ReactNode;
|
|
192
|
+
renderNoEvents?: () => ReactNode;
|
|
193
|
+
title?: string;
|
|
194
|
+
showCloseButton?: boolean;
|
|
195
|
+
}
|
|
196
|
+
type CalendarComponentProps = ReactNativeCalendarProps;
|
|
197
|
+
interface DatePopupProps {
|
|
198
|
+
visible: boolean;
|
|
199
|
+
selectedDate: Date | null;
|
|
200
|
+
events: CalendarEvent[];
|
|
201
|
+
scheduleDay: string;
|
|
202
|
+
onClose: () => void;
|
|
203
|
+
renderEvent?: (event: CalendarEvent) => ReactNode;
|
|
204
|
+
renderNoEvents?: () => ReactNode;
|
|
205
|
+
showCloseButton?: boolean;
|
|
206
|
+
}
|
|
207
|
+
interface SelectProps {
|
|
208
|
+
options: Array<{
|
|
209
|
+
label: string;
|
|
210
|
+
value: number;
|
|
211
|
+
}>;
|
|
212
|
+
selectedValue: number;
|
|
213
|
+
onValueChange: (value: number) => void;
|
|
214
|
+
style?: ViewStyle;
|
|
215
|
+
textStyle?: TextStyle;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
declare const Calendar: React.FC<CalendarComponentProps>;
|
|
219
|
+
|
|
220
|
+
declare const DatePopup: React.FC<DatePopupProps>;
|
|
221
|
+
|
|
222
|
+
declare const calendarStyles: {
|
|
223
|
+
container: {
|
|
224
|
+
flex: number;
|
|
225
|
+
backgroundColor: string;
|
|
226
|
+
};
|
|
227
|
+
titleContainer: {
|
|
228
|
+
paddingVertical: number;
|
|
229
|
+
alignItems: "center";
|
|
230
|
+
};
|
|
231
|
+
title: {
|
|
232
|
+
fontSize: number;
|
|
233
|
+
fontWeight: "600";
|
|
234
|
+
color: string;
|
|
235
|
+
};
|
|
236
|
+
contentContainer: {
|
|
237
|
+
marginHorizontal: number;
|
|
238
|
+
marginTop: number;
|
|
239
|
+
};
|
|
240
|
+
card: {
|
|
241
|
+
backgroundColor: string;
|
|
242
|
+
borderRadius: number;
|
|
243
|
+
shadowColor: string;
|
|
244
|
+
shadowOffset: {
|
|
245
|
+
width: number;
|
|
246
|
+
height: number;
|
|
247
|
+
};
|
|
248
|
+
shadowOpacity: number;
|
|
249
|
+
shadowRadius: number;
|
|
250
|
+
elevation: number;
|
|
251
|
+
overflow: "hidden";
|
|
252
|
+
};
|
|
253
|
+
cardHeader: {
|
|
254
|
+
backgroundColor: string;
|
|
255
|
+
paddingVertical: number;
|
|
256
|
+
paddingHorizontal: number;
|
|
257
|
+
borderBottomWidth: number;
|
|
258
|
+
borderBottomColor: string;
|
|
259
|
+
};
|
|
260
|
+
cardHeaderText: {
|
|
261
|
+
fontSize: number;
|
|
262
|
+
fontWeight: "500";
|
|
263
|
+
color: string;
|
|
264
|
+
textAlign: "center";
|
|
265
|
+
};
|
|
266
|
+
table: {
|
|
267
|
+
backgroundColor: string;
|
|
268
|
+
};
|
|
269
|
+
tableHeader: {
|
|
270
|
+
flexDirection: "row";
|
|
271
|
+
backgroundColor: string;
|
|
272
|
+
borderBottomWidth: number;
|
|
273
|
+
borderBottomColor: string;
|
|
274
|
+
};
|
|
275
|
+
tableHeaderCell: {
|
|
276
|
+
flex: number;
|
|
277
|
+
paddingVertical: number;
|
|
278
|
+
borderRightWidth: number;
|
|
279
|
+
borderRightColor: string;
|
|
280
|
+
alignItems: "center";
|
|
281
|
+
justifyContent: "center";
|
|
282
|
+
};
|
|
283
|
+
tableHeaderText: {
|
|
284
|
+
fontSize: number;
|
|
285
|
+
fontWeight: "600";
|
|
286
|
+
color: string;
|
|
287
|
+
};
|
|
288
|
+
tableRow: {
|
|
289
|
+
flexDirection: "row";
|
|
290
|
+
borderBottomWidth: number;
|
|
291
|
+
borderBottomColor: string;
|
|
292
|
+
};
|
|
293
|
+
tableCell: {
|
|
294
|
+
flex: number;
|
|
295
|
+
height: number;
|
|
296
|
+
borderRightWidth: number;
|
|
297
|
+
borderRightColor: string;
|
|
298
|
+
alignItems: "center";
|
|
299
|
+
justifyContent: "center";
|
|
300
|
+
position: "relative";
|
|
301
|
+
};
|
|
302
|
+
tableCellText: {
|
|
303
|
+
fontSize: number;
|
|
304
|
+
color: string;
|
|
305
|
+
};
|
|
306
|
+
cellToday: {
|
|
307
|
+
borderWidth: number;
|
|
308
|
+
borderColor: string;
|
|
309
|
+
};
|
|
310
|
+
cellTodayText: {
|
|
311
|
+
fontWeight: "bold";
|
|
312
|
+
};
|
|
313
|
+
cellWithEvents: {
|
|
314
|
+
backgroundColor: string;
|
|
315
|
+
};
|
|
316
|
+
eventIndicator: {
|
|
317
|
+
position: "absolute";
|
|
318
|
+
bottom: number;
|
|
319
|
+
width: number;
|
|
320
|
+
height: number;
|
|
321
|
+
backgroundColor: string;
|
|
322
|
+
borderRadius: number;
|
|
323
|
+
};
|
|
324
|
+
navigationContainer: {
|
|
325
|
+
flexDirection: "row";
|
|
326
|
+
justifyContent: "space-between";
|
|
327
|
+
paddingHorizontal: number;
|
|
328
|
+
paddingVertical: number;
|
|
329
|
+
gap: number;
|
|
330
|
+
};
|
|
331
|
+
navigationButton: {
|
|
332
|
+
flex: number;
|
|
333
|
+
backgroundColor: string;
|
|
334
|
+
borderWidth: number;
|
|
335
|
+
borderColor: string;
|
|
336
|
+
borderRadius: number;
|
|
337
|
+
paddingVertical: number;
|
|
338
|
+
paddingHorizontal: number;
|
|
339
|
+
alignItems: "center";
|
|
340
|
+
justifyContent: "center";
|
|
341
|
+
};
|
|
342
|
+
navigationButtonText: {
|
|
343
|
+
color: string;
|
|
344
|
+
fontSize: number;
|
|
345
|
+
fontWeight: "500";
|
|
346
|
+
};
|
|
347
|
+
navigationButtonPressed: {
|
|
348
|
+
backgroundColor: string;
|
|
349
|
+
};
|
|
350
|
+
navigationButtonTextPressed: {
|
|
351
|
+
color: string;
|
|
352
|
+
};
|
|
353
|
+
jumpForm: {
|
|
354
|
+
flexDirection: "row";
|
|
355
|
+
alignItems: "center";
|
|
356
|
+
justifyContent: "center";
|
|
357
|
+
paddingHorizontal: number;
|
|
358
|
+
paddingBottom: number;
|
|
359
|
+
gap: number;
|
|
360
|
+
};
|
|
361
|
+
jumpLabel: {
|
|
362
|
+
fontSize: number;
|
|
363
|
+
fontWeight: "300";
|
|
364
|
+
color: string;
|
|
365
|
+
};
|
|
366
|
+
jumpSelect: {
|
|
367
|
+
borderWidth: number;
|
|
368
|
+
borderColor: string;
|
|
369
|
+
borderRadius: number;
|
|
370
|
+
paddingHorizontal: number;
|
|
371
|
+
paddingVertical: number;
|
|
372
|
+
backgroundColor: string;
|
|
373
|
+
minWidth: number;
|
|
374
|
+
};
|
|
375
|
+
jumpSelectText: {
|
|
376
|
+
fontSize: number;
|
|
377
|
+
color: string;
|
|
378
|
+
textAlign: "center";
|
|
379
|
+
};
|
|
380
|
+
popupOverlay: {
|
|
381
|
+
position: "absolute";
|
|
382
|
+
top: number;
|
|
383
|
+
left: number;
|
|
384
|
+
right: number;
|
|
385
|
+
bottom: number;
|
|
386
|
+
backgroundColor: string;
|
|
387
|
+
justifyContent: "center";
|
|
388
|
+
alignItems: "center";
|
|
389
|
+
zIndex: number;
|
|
390
|
+
};
|
|
391
|
+
popup: {
|
|
392
|
+
backgroundColor: string;
|
|
393
|
+
borderRadius: number;
|
|
394
|
+
padding: number;
|
|
395
|
+
width: number;
|
|
396
|
+
maxWidth: number;
|
|
397
|
+
shadowColor: string;
|
|
398
|
+
shadowOffset: {
|
|
399
|
+
width: number;
|
|
400
|
+
height: number;
|
|
401
|
+
};
|
|
402
|
+
shadowOpacity: number;
|
|
403
|
+
shadowRadius: number;
|
|
404
|
+
elevation: number;
|
|
405
|
+
};
|
|
406
|
+
popupWrapper: {
|
|
407
|
+
backgroundColor: string;
|
|
408
|
+
borderRadius: number;
|
|
409
|
+
padding: number;
|
|
410
|
+
};
|
|
411
|
+
popupBlock: {
|
|
412
|
+
backgroundColor: string;
|
|
413
|
+
borderRadius: number;
|
|
414
|
+
paddingVertical: number;
|
|
415
|
+
paddingHorizontal: number;
|
|
416
|
+
marginBottom: number;
|
|
417
|
+
};
|
|
418
|
+
popupDay: {
|
|
419
|
+
fontSize: number;
|
|
420
|
+
fontWeight: "600";
|
|
421
|
+
color: string;
|
|
422
|
+
textAlign: "center";
|
|
423
|
+
};
|
|
424
|
+
eventsList: {
|
|
425
|
+
gap: number;
|
|
426
|
+
};
|
|
427
|
+
eventItem: {
|
|
428
|
+
backgroundColor: string;
|
|
429
|
+
borderRadius: number;
|
|
430
|
+
padding: number;
|
|
431
|
+
};
|
|
432
|
+
eventItemText: {
|
|
433
|
+
fontSize: number;
|
|
434
|
+
color: string;
|
|
435
|
+
};
|
|
436
|
+
noEventsMessage: {
|
|
437
|
+
backgroundColor: string;
|
|
438
|
+
borderRadius: number;
|
|
439
|
+
padding: number;
|
|
440
|
+
alignItems: "center";
|
|
441
|
+
};
|
|
442
|
+
noEventsText: {
|
|
443
|
+
fontSize: number;
|
|
444
|
+
color: string;
|
|
445
|
+
textAlign: "center";
|
|
446
|
+
};
|
|
447
|
+
popupCloseButton: {
|
|
448
|
+
position: "absolute";
|
|
449
|
+
top: number;
|
|
450
|
+
right: number;
|
|
451
|
+
backgroundColor: string;
|
|
452
|
+
borderRadius: number;
|
|
453
|
+
width: number;
|
|
454
|
+
height: number;
|
|
455
|
+
alignItems: "center";
|
|
456
|
+
justifyContent: "center";
|
|
457
|
+
};
|
|
458
|
+
popupCloseText: {
|
|
459
|
+
color: string;
|
|
460
|
+
fontSize: number;
|
|
461
|
+
fontWeight: "bold";
|
|
462
|
+
};
|
|
463
|
+
};
|
|
464
|
+
|
|
465
|
+
export { Calendar, type CalendarActions, type CalendarComponentProps, type CalendarConfig, type CalendarDate, CalendarEngine, type CalendarEvent, type CalendarEventHandler, type CalendarProps, type CalendarState, type CalendarViewModel, DAYS, DatePopup, type DatePopupProps, MONTHS, type PopupPosition, type ReactNativeCalendarProps, type SelectProps, calendarStyles, formatDateForDisplay, generateCalendarDates, generateYears, getCellClasses, getEventsForDate, getMonthYearText, getPopupPositionClass, hasEvents, isSameDay, isToday, normalizeDate };
|