Calendar Controller Interactive Documentation & Live Demos

// Initialize the Advanced Floating Calendar
const advancedCalendar = new AdvancedFloatingCalendar({
    container: '#floating-calendar-widget',
    initialDate: new Date(),
    features: {
        draggable: true,
        minimizable: true,
        quickActions: true,
        animations: true,
        themes: ['default', 'dark', 'gradient'],
        rangeSelection: true
    },
    position: { top: 20, right: 20 },
    responsive: true
});

// Enhanced event handling
advancedCalendar.on('dateSelect', (date) => {
    console.log('Date selected:', date);
    updateStatus(`Selected: ${date.toLocaleDateString()}`);
});

advancedCalendar.on('minimize', () => {
    console.log('Calendar minimized');
});

advancedCalendar.on('dragEnd', (position) => {
    console.log('New position:', position);
    localStorage.setItem('calendarPosition', JSON.stringify(position));
});

// Select specific dates
calendar.methods.selectDate(2025, 4, 15); // May 15, 2025

// Select today programmatically
const today = new Date();
calendar.methods.selectDate(
    today.getFullYear(), 
    today.getMonth(), 
    today.getDate()
);

// Clear all selections
calendar.methods.clearSelection();

// Check if date is today
const isToday = calendar.methods.isToday(selectedDate);

// Get formatted date string
const formatted = calendar.methods.formatDate(selectedDate);

// Enable range selection mode
calendar.methods.setRangeSelection(true);

// Select a date range programmatically
calendar.methods.selectDateRange(
    new Date(2025, 4, 1),  // Start: May 1, 2025
    new Date(2025, 4, 15)  // End: May 15, 2025
);

// Get current range selection
const range = calendar.bindings.selectedRange.current;
console.log('Start:', range.start);
console.log('End:', range.end);

// Calculate days in range
const dayCount = Math.ceil(
    (range.end - range.start) / (1000 * 60 * 60 * 24)
) + 1;

// Navigate to specific dates
calendar.methods.goToDate(new Date(2025, 11, 25)); // Christmas 2025
calendar.methods.goToMonth(6, 2025); // July 2025
calendar.methods.goToYear(2030);

// Keyboard navigation simulation
calendar.methods.moveFocusRight(); // Move focus one day right
calendar.methods.moveFocusLeft();  // Move focus one day left
calendar.methods.moveFocusUp();    // Move focus one week up
calendar.methods.moveFocusDown();  // Move focus one week down

// Focus management
calendar.methods.focusDate(new Date());
calendar.methods.selectFocusedDate();

// Set minimum and maximum selectable dates
calendar.methods.setMinDate(new Date(2025, 0, 1)); // Jan 1, 2025
calendar.methods.setMaxDate(new Date(2025, 11, 31)); // Dec 31, 2025

// Disable specific dates
const holidays = [
    new Date(2025, 0, 1),   // New Year
    new Date(2025, 6, 4),   // Independence Day
    new Date(2025, 11, 25)  // Christmas
];

holidays.forEach(date => {
    calendar.methods.addDisabledDate(date);
});

// Disable weekends
for (let i = 0; i < 365; i++) {
    const date = new Date(2025, 0, 1 + i);    if (date.getDay() === 0 || date.getDay() === 6) {
        calendar.methods.addDisabledDate(date);
    }
}

// Change locale dynamically
calendar.methods.setLocale('fr-FR');

// Get localized month names
const monthNames = calendar.methods.getMonthNames();
console.log(monthNames); // ['janvier', 'février', ...]

// Get localized weekday names
const weekdays = calendar.methods.getWeekdayNames(true); // short names
console.log(weekdays); // ['dim.', 'lun.', ...]

// Set first day of week (0 = Sunday, 1 = Monday)
calendar.methods.setFirstDayOfWeek(1); // Monday first

// Get date format options for current locale
const formatOptions = calendar.methods.getDateFormatOptions();
console.log(formatOptions);

// Get accessible date labels for screen readers
const accessibleLabel = calendar.methods.getAccessibleDateLabel(
    new Date(2025, 4, 15)
);
console.log(accessibleLabel); // "May 15, 2025, Wednesday"

// Get date state description for announcements
const stateDescription = calendar.methods.getDateStateDescription(
    new Date(2025, 4, 15)
);
console.log(stateDescription); // "Available for selection"

// Focus management
calendar.methods.focusDate(new Date());
calendar.methods.moveFocusRight(); // Move to next day
calendar.methods.selectFocusedDate(); // Select with Enter/Space

// ARIA attributes are automatically managed
// role="grid", aria-selected, aria-disabled, etc.

// Get week number for any date
const weekNumber = calendar.methods.getWeekNumber(new Date());
console.log('Week number:', weekNumber);

// Generate complete month view data
const monthView = calendar.methods.generateMonthView();
console.log('Month data:', monthView);

// Generate year view with all months
const yearView = calendar.methods.generateCalendarYears();
console.log('Year data:', yearView);

// Get year range for decade view
const yearRange = calendar.methods.getCurrentYearRange();
console.log('Year range:', yearRange);

// Advanced date calculations
const today = new Date();
const futureDate = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
const daysDiff = Math.ceil((futureDate - today) / (1000 * 60 * 60 * 24));

// Subscribe to date selection changes
calendar.bindings.selectedDate.subscribe(date => {
    console.log('Date selected:', date);
    updateUI(date);
});

// Subscribe to calendar navigation
calendar.bindings.currentDate.subscribe(date => {
    console.log('Navigation:', date);
    updateHeader(date);
});

// Subscribe to range selection changes
calendar.bindings.selectedRange.subscribe(range => {
    console.log('Range selected:', range);
    updateRangeDisplay(range);
});

// Subscribe to calendar days updates
calendar.bindings.calendarDays.subscribe(days => {
    console.log('Calendar updated:', days);
    renderCalendar(days);
});

// All bindings update automatically and reactively!

// Complete method validation example
const allMethods = [
    'selectDate', 'selectDateRange', 'clearSelection',
    'goToNextMonth', 'goToPreviousMonth', 'goToDate',
    'setLocale', 'getMonthNames', 'getWeekdayNames',
    'setMinDate', 'setMaxDate', 'addDisabledDate',
    'focusDate', 'moveFocusRight', 'moveFocusLeft',
    'getAccessibleDateLabel', 'isToday', 'formatDate',
    // ... and 23 more methods
];

// Test all methods are available
const methodsAvailable = allMethods.every(method => 
    typeof calendar.methods[method] === 'function'
);

console.log('All methods available:', methodsAvailable);
console.log('Total methods exposed:', Object.keys(calendar.methods).length);