Logic

Calendar Controller API

Complete API reference for the Calendar Controller component.

Constructor

Initialize a Calendar Controller instance

Configuration

Configure controller behavior

State Properties

Access controller state values

Methods

API methods for controlling calendar

Constructor

1new CalendarController(config?: CalendarControllerConfig)

Creates a new instance of the Calendar Controller with optional configuration.

Example Usage

1// Create with default configuration
2const calendar = new CalendarControllerClass();
3
4// Create with custom configuration
5const calendar = new CalendarControllerClass({
6  firstDayOfWeek: 1, // Monday
7  locale: 'fr-FR',
8  minDate: new Date(2025, 0, 1),
9  maxDate: new Date(2025, 11, 31),
10  hideOtherMonthDays: true,
11  isRangeSelection: true
12});

Configuration Options

Option	Type	Default	Description
`firstDayOfWeek`	`number`	0 (Sunday)	The first day of the week (0 = Sunday, 1 = Monday, etc.)
`hideOtherMonthDays`	`boolean`	false	Whether to hide days from previous/next months
`minDate`	`Date \| null`	null	Minimum selectable date
`maxDate`	`Date \| null`	null	Maximum selectable date
`locale`	`string`	'en-US'	Locale for date formatting and internationalization
`yearRangeSize`	`number`	12	Number of years to display in year view
`isRangeSelection`	`boolean`	false	Whether range selection mode is active

Option	Type	Default	Description
`firstDayOfWeek`	`number`	0 (Sunday)	The first day of the week (0 = Sunday, 1 = Monday, etc.)
`hideOtherMonthDays`	`boolean`	false	Whether to hide days from previous/next months
`minDate`	`Date \| null`	null	Minimum selectable date
`maxDate`	`Date \| null`	null	Maximum selectable date
`locale`	`string`	'en-US'	Locale for date formatting and internationalization
`yearRangeSize`	`number`	12	Number of years to display in year view
`isRangeSelection`	`boolean`	false	Whether range selection mode is active

State Properties

Property	Type	Description
`currentMonth`	`number`	Current month (0-11)
`currentYear`	`number`	Current year
`currentMonthName`	`string`	Name of the current month in the selected locale
`selectedDate`	`Date \| null`	Currently selected date
`weekdayNames`	`string[]`	Array of weekday names in the selected locale
`daysInMonth`	`CalendarDay[]`	Array of day objects for the current month view
`viewMode`	`'day' \| 'month' \| 'year'`	Current view mode of the calendar
`isRangeMode`	`boolean`	Whether range selection mode is active
`selectedRange`	`{ start: Date \| null, end: Date \| null }`	Currently selected date range
`locale`	`string`	Current locale for internationalization

Accessing State Example

1// Get current state values
2const month = calendar.currentMonth;  // 0-11
3const year = calendar.currentYear;
4const monthName = calendar.currentMonthName;
5
6// Check selected dates
7if (calendar.selectedDate) {
8  console.log(`Selected date: ${calendar.selectedDate.toLocaleDateString()}`);
9}
10
11// Work with calendar days
12const days = calendar.daysInMonth;
13const today = days.find(day => day.isToday);

Methods

Navigation Methods

Control the calendar's navigation between months, years, and view modes

1nextMonth(): void

Navigates to the next month

1previousMonth(): void

Navigates to the previous month

1goToMonth(month: number, year: number): void

Navigates to a specific month and year

1nextYear(): void

Navigates to the next year

1previousYear(): void

Navigates to the previous year

1goToToday(): void

Navigates to the current date

1setViewMode(mode: 'day' | 'month' | 'year'): void

Sets the view mode of the calendar

Events

Event Subscription

Subscribe to calendar events with callback functions

1onDateSelected(callback: (date: Date) => void): () => void

Triggered when a date is selected

1onRangeSelected(callback: (range: {start: Date, end: Date}) => void): () => void

Triggered when a date range is selected

1onMonthChanged(callback: (month: number, year: number) => void): () => void

Triggered when the month changes

1onYearChanged(callback: (year: number) => void): () => void

Triggered when the year changes

1onViewModeChanged(callback: (mode: 'day' | 'month' | 'year') => void): () => void

Triggered when the view mode changes

Event Handling Example

1// Subscribe to date selection events
2const unsubscribe = calendar.onDateSelected(date => {
3  console.log("Selected date:", date);
4  updateUI(date);
5});
6
7// Subscribe to month change events
8calendar.onMonthChanged((month, year) => {
9  console.log(`Month changed: ${month + 1}/${year}`);
10});
11
12// Later, unsubscribe when needed
13unsubscribe();

Services

Internal Services

Access specialized services for advanced calendar operations

1getDateSelectionService(): DateSelectionService

Gets the date selection service

1getNavigationService(): NavigationService

Gets the navigation service

1getDateValidationService(): DateValidationService

Gets the date validation service

Service Usage Example

1// Get the date validation service for advanced validation
2const validationService = calendar.getDateValidationService();
3
4// Add custom validation rules
5validationService.addValidator(date => {
6  // Disable weekends
7  const day = date.getDay();
8  return day !== 0 && day !== 6;
9});
10
11// Get navigation service for advanced navigation
12const navService = calendar.getNavigationService();
13navService.setViewMode('month');

Uplink Protocol

Calendar Controller API

Constructor

Example Usage

Configuration Options

State Properties

Accessing State Example

Methods

Events

Event Handling Example

Services

Service Usage Example

Share this page