kalendly 0.1.7 → 0.2.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.
Files changed (38) hide show
  1. package/README.md +317 -681
  2. package/dist/core/index.js +3 -3
  3. package/dist/index.d.mts +48 -602
  4. package/dist/index.d.ts +48 -602
  5. package/dist/index.js +753 -2359
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +727 -2348
  8. package/dist/index.mjs.map +1 -1
  9. package/dist/{vanilla/index.umd.js → index.umd.js} +218 -218
  10. package/dist/index.umd.js.map +1 -0
  11. package/package.json +41 -91
  12. package/dist/react/index.d.mts +0 -251
  13. package/dist/react/index.d.ts +0 -251
  14. package/dist/react/index.js +0 -969
  15. package/dist/react/index.js.map +0 -1
  16. package/dist/react/index.mjs +0 -924
  17. package/dist/react/index.mjs.map +0 -1
  18. package/dist/react-native/index.d.mts +0 -642
  19. package/dist/react-native/index.d.ts +0 -642
  20. package/dist/react-native/index.js +0 -1649
  21. package/dist/react-native/index.js.map +0 -1
  22. package/dist/react-native/index.mjs +0 -1615
  23. package/dist/react-native/index.mjs.map +0 -1
  24. package/dist/vanilla/index.d.mts +0 -271
  25. package/dist/vanilla/index.d.ts +0 -271
  26. package/dist/vanilla/index.js +0 -1064
  27. package/dist/vanilla/index.js.map +0 -1
  28. package/dist/vanilla/index.mjs +0 -1013
  29. package/dist/vanilla/index.mjs.map +0 -1
  30. package/dist/vanilla/index.umd.js.map +0 -1
  31. package/dist/vue/components/Calendar.vue.d.ts +0 -43
  32. package/dist/vue/components/Calendar.vue.d.ts.map +0 -1
  33. package/dist/vue/index.d.ts +0 -134
  34. package/dist/vue/index.d.ts.map +0 -1
  35. package/dist/vue/index.js +0 -1
  36. package/dist/vue/index.mjs +0 -717
  37. package/dist/vue/types.d.ts +0 -21
  38. package/dist/vue/types.d.ts.map +0 -1
@@ -1,642 +0,0 @@
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
- startTime?: string;
9
- endTime?: string;
10
- allDay?: boolean;
11
- description?: string;
12
- color?: string;
13
- category?: 'work' | 'personal' | 'meeting' | 'deadline' | 'appointment' | 'other';
14
- location?: string;
15
- url?: string;
16
- status?: 'scheduled' | 'completed' | 'cancelled' | 'tentative';
17
- priority?: 'low' | 'medium' | 'high';
18
- attendees?: string[];
19
- organizer?: string;
20
- reminders?: number[];
21
- recurring?: {
22
- frequency: 'daily' | 'weekly' | 'monthly' | 'yearly';
23
- interval?: number;
24
- endDate?: string | Date;
25
- daysOfWeek?: number[];
26
- };
27
- notes?: string;
28
- tags?: string[];
29
- createdAt?: string | Date;
30
- updatedAt?: string | Date;
31
- [key: string]: unknown;
32
- }
33
- interface CalendarDate {
34
- date: Date;
35
- isCurrentMonth: boolean;
36
- isToday: boolean;
37
- hasEvents: boolean;
38
- events: CalendarEvent[];
39
- }
40
- interface CalendarState {
41
- currentYear: number;
42
- currentMonth: number;
43
- currentDate: number;
44
- selectedDate: Date | null;
45
- selectedDayIndex: number | null;
46
- tasks: CalendarEvent[];
47
- }
48
- interface CategoryColorMap {
49
- [category: string]: string;
50
- }
51
- interface CalendarConfig {
52
- events: CalendarEvent[];
53
- initialDate?: Date;
54
- minYear?: number;
55
- maxYear?: number;
56
- weekStartsOn?: 0 | 1;
57
- categoryColors?: CategoryColorMap;
58
- }
59
- interface CalendarActions {
60
- next: () => void;
61
- previous: () => void;
62
- jump: (year: number, month: number) => void;
63
- goToToday: () => void;
64
- isCurrentMonth: () => boolean;
65
- selectDate: (date: Date) => void;
66
- updateTasks: () => void;
67
- }
68
- interface PopupPosition {
69
- class: 'popup-left' | 'popup-right' | 'popup-center-top' | 'popup-center-bottom';
70
- style?: Record<string, string | number>;
71
- }
72
- interface CalendarViewModel extends CalendarState {
73
- months: string[];
74
- days: string[];
75
- years: number[];
76
- monthAndYearText: string;
77
- scheduleDay: string;
78
- calendarDates: CalendarDate[][];
79
- popupPositionClass: string;
80
- }
81
- type CalendarEventHandler = (event: CalendarEvent) => void;
82
- interface CalendarProps {
83
- events: CalendarEvent[];
84
- initialDate?: Date;
85
- minYear?: number;
86
- maxYear?: number;
87
- weekStartsOn?: 0 | 1;
88
- useShortMonthNames?: boolean;
89
- onDateSelect?: (date: Date) => void;
90
- onEventClick?: CalendarEventHandler;
91
- onMonthChange?: (year: number, month: number) => void;
92
- }
93
- interface CalendarTheme {
94
- primary?: string;
95
- secondary?: string;
96
- tertiary?: string;
97
- textColor?: string;
98
- textLight?: string;
99
- background?: string;
100
- cellHover?: string;
101
- borderColor?: string;
102
- todayOutline?: string;
103
- selectedBg?: string;
104
- eventIndicator?: string;
105
- }
106
-
107
- declare const MONTHS: string[];
108
- declare const MONTHS_FULL: string[];
109
- declare const DAYS: string[];
110
- declare function normalizeDate(date: Date): Date;
111
- declare function isSameDay(date1: Date, date2: Date): boolean;
112
- declare function isToday(date: Date): boolean;
113
- declare function generateYears(minYear?: number, maxYear?: number): number[];
114
- declare function getEventsForDate(events: CalendarEvent[], date: Date): CalendarEvent[];
115
- declare function hasEvents(events: CalendarEvent[], date: Date): boolean;
116
- declare function generateCalendarDates(year: number, month: number, events?: CalendarEvent[], weekStartsOn?: 0 | 1): CalendarDate[][];
117
- declare function getPopupPositionClass(selectedDayIndex: number | null): string;
118
- declare function getCellClasses(calendarDate: CalendarDate): string[];
119
- declare function formatDateForDisplay(date: Date): string;
120
- declare function getMonthYearText(year: number, month: number): string;
121
- declare function formatTimeRange(event: CalendarEvent): string;
122
- declare function formatAttendees(attendees?: string[]): string;
123
- declare function sortEventsByTime(events: CalendarEvent[]): CalendarEvent[];
124
- declare const DEFAULT_CATEGORY_COLORS: CategoryColorMap;
125
- declare function getDefaultEventColor(category?: string, customColors?: CategoryColorMap): string;
126
- declare function mergeCategoryColors(customColors?: CategoryColorMap): CategoryColorMap;
127
- declare function isValidHexColor(color: string): boolean;
128
- declare function getCategoryColor(category: string, customColors?: CategoryColorMap): string;
129
-
130
- declare class CalendarEngine {
131
- private state;
132
- private config;
133
- private listeners;
134
- private categoryColors;
135
- constructor(config: CalendarConfig);
136
- /**
137
- * Subscribe to state changes
138
- */
139
- subscribe(listener: () => void): () => void;
140
- /**
141
- * Notify all listeners of state changes
142
- */
143
- private notify;
144
- /**
145
- * Get current state
146
- */
147
- getState(): CalendarState;
148
- /**
149
- * Get view model with computed properties
150
- */
151
- getViewModel(): CalendarViewModel;
152
- /**
153
- * Get actions object
154
- */
155
- getActions(): CalendarActions;
156
- /**
157
- * Navigate to next month
158
- */
159
- private next;
160
- /**
161
- * Navigate to previous month
162
- */
163
- private previous;
164
- /**
165
- * Jump to specific month and year
166
- */
167
- private jump;
168
- /**
169
- * Navigate to current month (today)
170
- */
171
- private goToToday;
172
- /**
173
- * Check if currently viewing today's month
174
- */
175
- private isCurrentMonth;
176
- /**
177
- * Select a specific date
178
- */
179
- private selectDate;
180
- /**
181
- * Update tasks for the currently selected date
182
- */
183
- private updateTasks;
184
- /**
185
- * Update events configuration
186
- */
187
- updateEvents(events: CalendarEvent[]): void;
188
- /**
189
- * Handle date cell click
190
- */
191
- handleDateClick(date: Date, dayIndex?: number): void;
192
- /**
193
- * Check if date has events
194
- */
195
- hasEventsForDate(date: Date): boolean;
196
- /**
197
- * Get events for a specific date
198
- */
199
- getEventsForDate(date: Date): CalendarEvent[];
200
- /**
201
- * Clear selected date
202
- */
203
- clearSelection(): void;
204
- /**
205
- * Get category color (with custom colors support)
206
- */
207
- getCategoryColor(category?: string): string;
208
- /**
209
- * Update category colors dynamically
210
- */
211
- updateCategoryColors(colors: CategoryColorMap): void;
212
- /**
213
- * Get all category colors
214
- */
215
- getCategoryColors(): CategoryColorMap;
216
- /**
217
- * Register a new category with color
218
- */
219
- registerCategory(name: string, color: string): void;
220
- /**
221
- * Destroy the engine and cleanup listeners
222
- */
223
- destroy(): void;
224
- }
225
-
226
- interface ReactNativeCalendarProps extends CalendarProps {
227
- style?: ViewStyle;
228
- containerStyle?: ViewStyle;
229
- headerStyle?: ViewStyle;
230
- headerTextStyle?: TextStyle;
231
- cellStyle?: ViewStyle;
232
- cellTextStyle?: TextStyle;
233
- renderEvent?: (event: CalendarEvent) => ReactNode;
234
- renderNoEvents?: () => ReactNode;
235
- title?: string;
236
- showCloseButton?: boolean;
237
- theme?: CalendarTheme;
238
- }
239
- type CalendarComponentProps = ReactNativeCalendarProps;
240
- interface DatePopupProps {
241
- visible: boolean;
242
- selectedDate: Date | null;
243
- events: CalendarEvent[];
244
- scheduleDay: string;
245
- onClose: () => void;
246
- onEventClick?: (event: CalendarEvent) => void;
247
- renderEvent?: (event: CalendarEvent) => ReactNode;
248
- renderNoEvents?: () => ReactNode;
249
- showCloseButton?: boolean;
250
- }
251
- interface SelectProps {
252
- options: Array<{
253
- label: string;
254
- value: number;
255
- }>;
256
- selectedValue: number;
257
- onValueChange: (value: number) => void;
258
- style?: ViewStyle;
259
- textStyle?: TextStyle;
260
- }
261
-
262
- declare const Calendar: React.FC<CalendarComponentProps>;
263
-
264
- declare const DatePopup: React.FC<DatePopupProps>;
265
-
266
- declare const calendarStyles: {
267
- container: {
268
- flex: number;
269
- backgroundColor: string;
270
- };
271
- titleContainer: {
272
- paddingVertical: number;
273
- alignItems: "center";
274
- };
275
- title: {
276
- fontSize: number;
277
- fontWeight: "600";
278
- color: string;
279
- };
280
- contentContainer: {
281
- marginHorizontal: number;
282
- marginTop: number;
283
- };
284
- card: {
285
- backgroundColor: string;
286
- borderRadius: number;
287
- shadowColor: string;
288
- shadowOffset: {
289
- width: number;
290
- height: number;
291
- };
292
- shadowOpacity: number;
293
- shadowRadius: number;
294
- elevation: number;
295
- overflow: "hidden";
296
- };
297
- cardHeader: {
298
- backgroundColor: string;
299
- paddingVertical: number;
300
- paddingHorizontal: number;
301
- borderBottomWidth: number;
302
- borderBottomColor: string;
303
- };
304
- cardHeaderText: {
305
- fontSize: number;
306
- fontWeight: "500";
307
- color: string;
308
- textAlign: "center";
309
- };
310
- table: {
311
- backgroundColor: string;
312
- };
313
- tableHeader: {
314
- flexDirection: "row";
315
- backgroundColor: string;
316
- borderBottomWidth: number;
317
- borderBottomColor: string;
318
- };
319
- tableHeaderCell: {
320
- flex: number;
321
- paddingVertical: number;
322
- borderRightWidth: number;
323
- borderRightColor: string;
324
- alignItems: "center";
325
- justifyContent: "center";
326
- };
327
- tableHeaderText: {
328
- fontSize: number;
329
- fontWeight: "600";
330
- color: string;
331
- };
332
- tableRow: {
333
- flexDirection: "row";
334
- borderBottomWidth: number;
335
- borderBottomColor: string;
336
- };
337
- tableCell: {
338
- flex: number;
339
- height: number;
340
- borderRightWidth: number;
341
- borderRightColor: string;
342
- alignItems: "center";
343
- justifyContent: "center";
344
- position: "relative";
345
- };
346
- tableCellText: {
347
- fontSize: number;
348
- color: string;
349
- };
350
- cellToday: {
351
- borderWidth: number;
352
- borderColor: string;
353
- };
354
- cellTodayText: {
355
- fontWeight: "bold";
356
- };
357
- cellWithEvents: {
358
- backgroundColor: string;
359
- };
360
- eventIndicator: {
361
- position: "absolute";
362
- bottom: number;
363
- width: number;
364
- height: number;
365
- backgroundColor: string;
366
- borderRadius: number;
367
- };
368
- navigationContainer: {
369
- flexDirection: "row";
370
- justifyContent: "space-between";
371
- paddingHorizontal: number;
372
- paddingVertical: number;
373
- gap: number;
374
- };
375
- navigationButton: {
376
- flex: number;
377
- backgroundColor: string;
378
- borderWidth: number;
379
- borderColor: string;
380
- borderRadius: number;
381
- paddingVertical: number;
382
- paddingHorizontal: number;
383
- alignItems: "center";
384
- justifyContent: "center";
385
- };
386
- navigationButtonText: {
387
- color: string;
388
- fontSize: number;
389
- fontWeight: "500";
390
- };
391
- navigationButtonPressed: {
392
- backgroundColor: string;
393
- };
394
- navigationButtonTextPressed: {
395
- color: string;
396
- };
397
- jumpForm: {
398
- flexDirection: "row";
399
- alignItems: "center";
400
- justifyContent: "center";
401
- paddingHorizontal: number;
402
- paddingBottom: number;
403
- gap: number;
404
- };
405
- jumpLabel: {
406
- fontSize: number;
407
- fontWeight: "300";
408
- color: string;
409
- };
410
- jumpSelect: {
411
- borderWidth: number;
412
- borderColor: string;
413
- borderRadius: number;
414
- paddingHorizontal: number;
415
- paddingVertical: number;
416
- backgroundColor: string;
417
- minWidth: number;
418
- };
419
- jumpSelectText: {
420
- fontSize: number;
421
- color: string;
422
- textAlign: "center";
423
- };
424
- popupOverlay: {
425
- position: "absolute";
426
- top: number;
427
- left: number;
428
- right: number;
429
- bottom: number;
430
- backgroundColor: string;
431
- justifyContent: "center";
432
- alignItems: "center";
433
- zIndex: number;
434
- };
435
- popup: {
436
- backgroundColor: string;
437
- borderRadius: number;
438
- width: number;
439
- maxWidth: number;
440
- maxHeight: number;
441
- shadowColor: string;
442
- shadowOffset: {
443
- width: number;
444
- height: number;
445
- };
446
- shadowOpacity: number;
447
- shadowRadius: number;
448
- elevation: number;
449
- overflow: "hidden";
450
- };
451
- popupHeader: {
452
- backgroundColor: string;
453
- paddingVertical: number;
454
- paddingHorizontal: number;
455
- flexDirection: "row";
456
- justifyContent: "space-between";
457
- alignItems: "center";
458
- };
459
- popupHeaderText: {
460
- fontSize: number;
461
- fontWeight: "600";
462
- color: string;
463
- flex: number;
464
- };
465
- popupCloseButton: {
466
- width: number;
467
- height: number;
468
- backgroundColor: string;
469
- borderRadius: number;
470
- alignItems: "center";
471
- justifyContent: "center";
472
- };
473
- popupCloseText: {
474
- color: string;
475
- fontSize: number;
476
- fontWeight: "bold";
477
- };
478
- scrollHint: {
479
- backgroundColor: string;
480
- paddingVertical: number;
481
- paddingHorizontal: number;
482
- alignItems: "center";
483
- };
484
- scrollHintText: {
485
- color: string;
486
- fontSize: number;
487
- fontWeight: "500";
488
- };
489
- eventsContainer: {
490
- maxHeight: number;
491
- };
492
- eventsList: {
493
- padding: number;
494
- gap: number;
495
- };
496
- eventCard: {
497
- backgroundColor: string;
498
- borderRadius: number;
499
- padding: number;
500
- borderLeftWidth: number;
501
- borderLeftColor: string;
502
- borderWidth: number;
503
- borderColor: string;
504
- shadowColor: string;
505
- shadowOffset: {
506
- width: number;
507
- height: number;
508
- };
509
- shadowOpacity: number;
510
- shadowRadius: number;
511
- elevation: number;
512
- };
513
- eventHeader: {
514
- marginBottom: number;
515
- };
516
- eventTitle: {
517
- fontSize: number;
518
- color: string;
519
- fontWeight: "600";
520
- marginBottom: number;
521
- };
522
- eventBadges: {
523
- flexDirection: "row";
524
- gap: number;
525
- flexWrap: "wrap";
526
- };
527
- badge: {
528
- paddingHorizontal: number;
529
- paddingVertical: number;
530
- borderRadius: number;
531
- };
532
- badgeText: {
533
- fontSize: number;
534
- fontWeight: "600";
535
- textTransform: "uppercase";
536
- letterSpacing: number;
537
- };
538
- priorityBadgeHigh: {
539
- backgroundColor: string;
540
- };
541
- priorityBadgeMedium: {
542
- backgroundColor: string;
543
- };
544
- priorityBadgeLow: {
545
- backgroundColor: string;
546
- };
547
- statusBadgeCompleted: {
548
- backgroundColor: string;
549
- };
550
- statusBadgeCancelled: {
551
- backgroundColor: string;
552
- };
553
- statusBadgeTentative: {
554
- backgroundColor: string;
555
- };
556
- categoryBadgeWork: {
557
- backgroundColor: string;
558
- };
559
- categoryBadgePersonal: {
560
- backgroundColor: string;
561
- };
562
- categoryBadgeMeeting: {
563
- backgroundColor: string;
564
- };
565
- categoryBadgeDeadline: {
566
- backgroundColor: string;
567
- };
568
- categoryBadgeAppointment: {
569
- backgroundColor: string;
570
- };
571
- categoryBadgeOther: {
572
- backgroundColor: string;
573
- };
574
- eventTime: {
575
- flexDirection: "row" | "column";
576
- gap: number;
577
- marginBottom: number;
578
- };
579
- eventTimeLabel: {
580
- fontSize: number;
581
- fontWeight: "600";
582
- color: string;
583
- minWidth: number | undefined;
584
- textAlign: "left";
585
- };
586
- eventTimeValue: {
587
- fontSize: number;
588
- color: string;
589
- flex: number;
590
- };
591
- eventDescription: {
592
- color: string;
593
- fontSize: number;
594
- lineHeight: number;
595
- marginTop: number;
596
- marginBottom: number;
597
- paddingVertical: number;
598
- paddingHorizontal: number;
599
- backgroundColor: string;
600
- borderLeftWidth: number;
601
- borderLeftColor: string;
602
- borderRadius: number;
603
- textAlign: "left";
604
- };
605
- eventUrlContainer: {
606
- marginTop: number;
607
- };
608
- eventLink: {
609
- color: string;
610
- fontSize: number;
611
- fontWeight: "500";
612
- };
613
- eventTags: {
614
- flexDirection: "row";
615
- flexWrap: "wrap";
616
- gap: number;
617
- marginTop: number;
618
- };
619
- eventTag: {
620
- paddingHorizontal: number;
621
- paddingVertical: number;
622
- backgroundColor: string;
623
- borderRadius: number;
624
- };
625
- eventTagText: {
626
- fontSize: number;
627
- color: string;
628
- fontWeight: "500";
629
- };
630
- noEventsMessage: {
631
- padding: number;
632
- paddingVertical: number;
633
- alignItems: "center";
634
- };
635
- noEventsText: {
636
- fontSize: number;
637
- color: string;
638
- textAlign: "center";
639
- };
640
- };
641
-
642
- export { Calendar, type CalendarActions, type CalendarComponentProps, type CalendarConfig, type CalendarDate, CalendarEngine, type CalendarEvent, type CalendarEventHandler, type CalendarProps, type CalendarState, type CalendarTheme, type CalendarViewModel, type CategoryColorMap, DAYS, DEFAULT_CATEGORY_COLORS, DatePopup, type DatePopupProps, MONTHS, MONTHS_FULL, type PopupPosition, type ReactNativeCalendarProps, type SelectProps, calendarStyles, formatAttendees, formatDateForDisplay, formatTimeRange, generateCalendarDates, generateYears, getCategoryColor, getCellClasses, getDefaultEventColor, getEventsForDate, getMonthYearText, getPopupPositionClass, hasEvents, isSameDay, isToday, isValidHexColor, mergeCategoryColors, normalizeDate, sortEventsByTime };