Copy
1// Select a specific date using methods
2calendar.methods.selectDate(2025, 4, 21); // May 21, 2025 (year, month, day)
3
4// Get the currently selected date from bindings
5const selectedDate = calendar.bindings.selectedDate.current;
6
7// Set range selection mode and select a range
8calendar.methods.setRangeSelectionMode(true);
9calendar.methods.selectDate(2025, 4, 10); // Start date
10calendar.methods.selectDate(2025, 4, 15); // End date
11
12// Get selected range
13const selectedRange = calendar.bindings.selectedDateRange.current;
14
15// Clear selection
16calendar.methods.clearSelection();

Copy
1// Move to next/previous month
2calendar.methods.nextMonth();
3calendar.methods.prevMonth();
4
5// Move to next/previous year  
6calendar.methods.nextYear();
7calendar.methods.prevYear();
8
9// Jump to today
10calendar.methods.goToToday();
11
12// Navigate to a specific month and year
13calendar.methods.selectMonth(0, 2025); // January 2025
14calendar.methods.selectYear(2025);     // Go to 2025
15
16// Switch view modes
17calendar.methods.setViewMode('month'); // Month view
18calendar.methods.setViewMode('year');  // Year view
19calendar.methods.setViewMode('day');   // Day view (default)

Copy
1// Configuration interface
2interface CalendarOptions {
3  locale?: string;
4  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
5  minDate?: Date;
6  maxDate?: Date;
7  dateFormat?: string;
8  initialSelectedDate?: Date;
9  hideOtherMonthDays?: boolean;
10  yearRangeSize?: number;
11}
12
13// Calendar day representation
14interface CalendarDate {
15  date: Date;
16  day: number;
17  isCurrentMonth: boolean;
18  isToday: boolean;
19  isSelected: boolean;
20  isDisabled: boolean;
21  isRangeStart: boolean;
22  isRangeEnd: boolean;
23  isInRange: boolean;
24}
25
26// Calendar month representation  
27interface CalendarMonth {
28  month: number;
29  monthName: string;
30  year: number;
31  isCurrentMonth: boolean;
32  isSelected: boolean;
33  isDisabled: boolean;
34}
35
36// Calendar year representation
37interface CalendarYear {
38  year: number;
39  isCurrentYear: boolean;
40  isSelected: boolean;
41  isDisabled: boolean;
42}
43
44// Date range definition
45interface DateRange {
46  start: Date | null;
47  end: Date | null;
48}
49
50// View modes
51type ViewMode = 'day' | 'month' | 'year';

Copy
1// Type-safe binding subscriptions
2type DateSubscriptionHandler = (date: Date | null) => void;
3type DateRangeSubscriptionHandler = (range: DateRange) => void;
4type ViewModeSubscriptionHandler = (viewMode: ViewMode) => void;
5type CalendarDaysHandler = (days: CalendarDate[]) => void;
6type CalendarMonthsHandler = (months: CalendarMonth[]) => void;
7type CalendarYearsHandler = (years: CalendarYear[]) => void;
8
9// Type-safe binding subscriptions
10const unsub1: () => void = calendar.bindings.selectedDate.subscribe((date) => {
11  // date is typed as Date | null
12  if (date) {
13    console.log('Selected:', date.toLocaleDateString());
14  }
15});
16
17const unsub2: () => void = calendar.bindings.selectedDateRange.subscribe((range) => {
18  // range is typed as DateRange with start and end
19  if (range.start && range.end) {
20    console.log('Range:', range.start, 'to', range.end);
21  }
22});
23
24const unsub3: () => void = calendar.bindings.calendarDays.subscribe((days) => {
25  // days is typed as CalendarDate[]
26  days.forEach(day => {
27    // TypeScript provides intellisense for all properties
28    if (day.isToday) {
29      console.log('Today is day', day.day);
30    }
31  });
32});
33
34// TypeScript ensures you're using bindings correctly
35calendar.bindings.viewMode.subscribe((mode) => {
36  // mode is typed as 'day' | 'month' | 'year'
37  if (mode === 'day') {
38    // TypeScript knows this is a valid condition
39  }
40});