@uplink-protocol/calendar-controller
Version:
Flexible calendar API supporting both calendar and date-picker integrations for any JavaScript framework or library
706 lines (668 loc) β’ 93.8 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Controller - Interactive Documentation & Live Demos</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))"
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))"
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))"
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))"
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))"
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))"
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))"
}
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)"
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'Consolas', 'monospace']
},
animation: {
'float': 'float 6s ease-in-out infinite',
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-in': 'slideIn 0.3s ease-out',
'bounce-in': 'bounceIn 0.6s ease-out',
'pulse-slow': 'pulse 3s ease-in-out infinite',
'shimmer': 'shimmer 2s linear infinite'
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0px)', opacity: '0.7' },
'50%': { transform: 'translateY(-10px)', opacity: '1' }
},
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' }
},
slideIn: {
'0%': { transform: 'translateX(-100%)', opacity: '0' },
'100%': { transform: 'translateX(0)', opacity: '1' }
},
bounceIn: {
'0%': { transform: 'scale(0.3)', opacity: '0' },
'50%': { transform: 'scale(1.05)' },
'70%': { transform: 'scale(0.9)' },
'100%': { transform: 'scale(1)', opacity: '1' }
},
shimmer: {
'0%': { transform: 'translateX(-100%)' },
'100%': { transform: 'translateX(100%)' }
}
}
}
}
}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <style>
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96%;
--secondary-foreground: 222.2 84% 4.9%;
--muted: 210 40% 96%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96%;
--accent-foreground: 222.2 84% 4.9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--radius: 0.75rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 84% 4.9%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 94.1%;
}
* {
border-color: hsl(var(--border));
}
body {
background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary) / 0.8) 100%);
color: hsl(var(--foreground));
font-family: 'Inter', system-ui, sans-serif;
min-height: 100vh;
}
/* Essential animations only */
@keyframes float {
0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.3; }
50% { transform: translateY(-10px) translateX(5px); opacity: 0.7; }
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.particle {
position: absolute;
width: 2px;
height: 2px;
background: hsl(var(--primary-foreground) / 0.4);
border-radius: 50%;
opacity: 0.3;
animation: float 8s ease-in-out infinite;
}
.shimmer::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
animation: shimmer 3s infinite;
}
/* Smooth scrolling for anchors */
html {
scroll-behavior: smooth;
}
</style>
</head>
<body class="bg-gradient-to-br from-primary to-primary/80 text-foreground font-sans min-h-screen"> <!-- Hero Section -->
<section class="relative py-20 px-6 overflow-hidden">
<div class="max-w-6xl mx-auto">
<div class="flex items-center justify-between">
<div>
<h1 class="text-4xl md:text-5xl font-bold mb-4 text-white">
Calendar Controller
<span class="block text-xl md:text-2xl font-normal opacity-90 mt-2">
Interactive Documentation & Live Demos
</span>
</h1>
<p class="text-lg md:text-xl opacity-90 mb-6 max-w-2xl text-white">
Explore the complete API surface of our powerful Calendar Controller through interactive examples.
Built with TypeScript, featuring comprehensive accessibility support and internationalization.
</p>
<div class="flex flex-wrap gap-4">
<div class="bg-white/20 backdrop-blur-sm rounded-lg px-4 py-2">
<span class="text-sm font-medium text-white">β¨ 40+ Methods</span>
</div>
<div class="bg-white/20 backdrop-blur-sm rounded-lg px-4 py-2">
<span class="text-sm font-medium text-white">π i18n Support</span>
</div>
<div class="bg-white/20 backdrop-blur-sm rounded-lg px-4 py-2">
<span class="text-sm font-medium text-white">βΏ Accessibility</span>
</div>
</div>
</div>
<div class="hidden lg:block">
<div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center border border-white/20">
<div class="text-3xl font-bold text-white mb-2" id="methodCount">41</div>
<div class="text-sm text-white/80">Available Methods</div>
</div>
</div>
</div>
</div>
</section>
<div class="max-w-7xl mx-auto p-6">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
<!-- Sidebar Navigation --> <aside class="lg:col-span-1">
<div class="bg-card/80 backdrop-blur-sm rounded-xl p-6 border border-border/50 sticky top-6">
<nav class="mb-8">
<h3 class="text-lg font-semibold mb-4 text-foreground">Quick Navigation</h3>
<ul class="space-y-2">
<li><a href="#calendar-display" class="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors py-2 px-3 rounded-lg hover:bg-accent">ποΈ Live Calendar</a></li>
<li><a href="#basic-selection" class="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors py-2 px-3 rounded-lg hover:bg-accent">π Date Selection</a></li>
<li><a href="#range-selection" class="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors py-2 px-3 rounded-lg hover:bg-accent">π
Range Selection</a></li>
<li><a href="#navigation" class="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors py-2 px-3 rounded-lg hover:bg-accent">π§ Navigation</a></li>
<li><a href="#constraints" class="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors py-2 px-3 rounded-lg hover:bg-accent">π« Date Constraints</a></li>
<li><a href="#internationalization" class="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors py-2 px-3 rounded-lg hover:bg-accent">π Internationalization</a></li>
<li><a href="#accessibility" class="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors py-2 px-3 rounded-lg hover:bg-accent">βΏ Accessibility</a></li>
<li><a href="#advanced" class="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors py-2 px-3 rounded-lg hover:bg-accent">β‘ Advanced Features</a></li>
<li><a href="#events" class="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors py-2 px-3 rounded-lg hover:bg-accent">π‘ Events & Bindings</a></li>
<li><a href="#api-reference" class="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors py-2 px-3 rounded-lg hover:bg-accent">π API Reference</a></li>
</ul>
</nav>
<div class="bg-gradient-to-br from-primary/10 to-primary/20 rounded-lg p-4 border border-primary/20">
<div class="text-2xl font-bold text-primary mb-1" id="methodCountSidebar">41</div>
<div class="text-sm text-muted-foreground">Methods Available</div>
<div class="text-xs text-muted-foreground mt-2 opacity-80">
All methods tested β
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="lg:col-span-3 space-y-8"> <!-- Advanced Floating Calendar Widget -->
<section id="calendar-display" class="bg-card backdrop-blur-sm rounded-xl p-6 border border-border/50 shadow-lg">
<div class="flex items-start gap-4 mb-6">
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fas fa-calendar-alt text-primary text-xl"></i>
</div>
<div>
<h2 class="text-2xl font-bold text-foreground mb-2">Advanced Floating Calendar</h2>
<p class="text-muted-foreground">Experience a completely redesigned floating calendar with enhanced features, modern UI, and advanced interactions.</p>
</div>
</div>
<!-- Floating Calendar Widget Placeholder (moved to body) -->
<div class="widget-placeholder">
<div class="bg-blue-50 border-2 border-dashed border-blue-200 rounded-lg p-6 text-center">
<i class="fas fa-arrow-up text-blue-400 text-2xl mb-3"></i>
<h3 class="text-lg font-semibold text-blue-700 mb-2">Smart Floating Calendar Active</h3>
<p class="text-blue-600">The interactive floating calendar widget is now positioned at the top-right corner of your screen.</p>
<p class="text-sm text-blue-500 mt-2">Scroll to see it stay visible β’ Drag to reposition β’ Click minimize to collapse</p>
</div>
</div> <!-- Feature Description and Demo Controls -->
<div class="space-y-6">
<h3 class="text-lg font-semibold text-foreground">
Enhanced Floating Calendar Features
</h3>
<div class="space-y-4">
<div class="flex flex-wrap gap-3">
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.advancedCalendar.showAnimationDemo()">
<i class="fas fa-magic"></i>
Animation Demo
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.advancedCalendar.toggleTheme()">
<i class="fas fa-palette"></i>
Toggle Theme
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors" onclick="window.advancedCalendar.enableRangeMode()">
<i class="fas fa-calendar-alt"></i>
Range Selection
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors" onclick="window.advancedCalendar.stressTest()">
<i class="fas fa-bolt"></i>
Performance Test
</button>
</div>
<div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900 border-2 border-blue-200 dark:border-blue-800 rounded-xl p-6 relative">
<div class="absolute top-4 left-4 text-xl">π‘</div>
<div class="ml-8 space-y-3">
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Widget Status:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="widgetStatus">Active & Interactive</span>
</div>
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Selected Date:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="widgetSelectedDate">None</span>
</div>
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Current Theme:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="widgetTheme">Default</span>
</div>
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Interaction Mode:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="widgetMode">Single Selection</span>
</div>
</div>
</div>
</div>
</div>
<div class="relative bg-gradient-to-br from-slate-800 to-slate-900 text-slate-200 p-6 rounded-xl font-mono text-sm my-6 overflow-x-auto border border-slate-700 leading-relaxed" data-lang="javascript">
<div class="absolute top-3 right-4 text-slate-500 text-xs uppercase font-semibold bg-slate-700/50 px-2 py-1 rounded border border-slate-600/50">JavaScript</div>
<pre class="m-0 whitespace-pre-wrap break-words">// 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));
});</pre></div>
</section> <!-- Date Selection -->
<section id="basic-selection" class="bg-card backdrop-blur-sm rounded-xl p-6 border border-border/50 shadow-lg">
<div class="flex items-start gap-4 mb-6">
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fas fa-hand-pointer text-primary text-xl"></i>
</div>
<div>
<h2 class="text-2xl font-bold text-foreground mb-2">Intelligent Date Selection</h2>
<p class="text-muted-foreground">Single and multi-date selection with validation, formatting, and smart date handling.</p>
</div>
</div>
<div class="space-y-4">
<div class="flex flex-wrap gap-3">
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.calendarDemo.selectToday()">
<i class="fas fa-calendar-day"></i>
Select Today
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.calendarDemo.selectSpecificDate()">
<i class="fas fa-calendar-plus"></i>
Select Future Date
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors" onclick="window.calendarDemo.clearSelection()">
<i class="fas fa-times"></i>
Clear Selection
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors" onclick="window.calendarDemo.selectRandomDate()">
<i class="fas fa-random"></i>
Random Date
</button>
</div>
<div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900 border-2 border-blue-200 dark:border-blue-800 rounded-xl p-6 relative">
<div class="absolute top-4 left-4 text-xl">π‘</div>
<div class="ml-8 space-y-3">
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Selected Date:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="selectedDateDisplay">None</span>
</div>
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Formatted:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="formattedDateDisplay">--</span>
</div>
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Is Today:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="isTodayDisplay">false</span>
</div>
</div>
</div>
</div>
<div class="relative bg-gradient-to-br from-slate-800 to-slate-900 text-slate-200 p-6 rounded-xl font-mono text-sm my-6 overflow-x-auto border border-slate-700 leading-relaxed" data-lang="javascript">
<div class="absolute top-3 right-4 text-slate-500 text-xs uppercase font-semibold bg-slate-700/50 px-2 py-1 rounded border border-slate-600/50">JavaScript</div>
<pre class="m-0 whitespace-pre-wrap break-words">// 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);</pre></div>
</section> <!-- Range Selection -->
<section id="range-selection" class="bg-card backdrop-blur-sm rounded-xl p-6 border border-border/50 shadow-lg">
<div class="flex items-start gap-4 mb-6">
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fas fa-calendar-week text-primary text-xl"></i>
</div>
<div>
<h2 class="text-2xl font-bold text-foreground mb-2">Advanced Range Selection</h2>
<p class="text-muted-foreground">Select date ranges with visual feedback, smart range validation, and flexible range handling.</p>
</div>
</div>
<div class="space-y-4">
<div class="flex flex-wrap gap-3">
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.calendarDemo.enableRangeSelection()">
<i class="fas fa-calendar-alt"></i>
Enable Range Mode
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.calendarDemo.selectThisWeek()">
<i class="fas fa-calendar-week"></i>
Select This Week
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.calendarDemo.selectNextMonth()">
<i class="fas fa-calendar"></i>
Select Next Month
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors" onclick="window.calendarDemo.disableRangeSelection()">
<i class="fas fa-calendar-day"></i>
Single Date Mode
</button>
</div>
<div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900 border-2 border-blue-200 dark:border-blue-800 rounded-xl p-6 relative">
<div class="absolute top-4 left-4 text-xl">π‘</div>
<div class="ml-8 space-y-3">
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Mode:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="selectionModeDisplay">Single</span>
</div>
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Range Start:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="rangeStartDisplay">--</span>
</div>
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Range End:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="rangeEndDisplay">--</span>
</div>
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Days Selected:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="rangeDaysDisplay">0</span>
</div>
</div>
</div>
</div>
<div class="relative bg-gradient-to-br from-slate-800 to-slate-900 text-slate-200 p-6 rounded-xl font-mono text-sm my-6 overflow-x-auto border border-slate-700 leading-relaxed" data-lang="javascript">
<div class="absolute top-3 right-4 text-slate-500 text-xs uppercase font-semibold bg-slate-700/50 px-2 py-1 rounded border border-slate-600/50">JavaScript</div>
<pre class="m-0 whitespace-pre-wrap break-words">// 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;</pre></div>
</section> <!-- Navigation Controls -->
<section id="navigation" class="bg-card backdrop-blur-sm rounded-xl p-6 border border-border/50 shadow-lg">
<div class="flex items-start gap-4 mb-6">
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fas fa-compass text-primary text-xl"></i>
</div>
<div>
<h2 class="text-2xl font-bold text-foreground mb-2">Powerful Navigation</h2>
<p class="text-muted-foreground">Navigate through dates, months, and years with keyboard support and programmatic control.</p>
</div>
</div>
<div class="space-y-4">
<div class="flex flex-wrap gap-3">
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.calendarDemo.goToNextYear()">
<i class="fas fa-fast-forward"></i>
Next Year
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.calendarDemo.goToPreviousYear()">
<i class="fas fa-fast-backward"></i>
Previous Year
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors" onclick="window.calendarDemo.goToSpecificDate()">
<i class="fas fa-calendar-check"></i>
Go to Date
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors" onclick="window.calendarDemo.jumpToFuture()">
<i class="fas fa-rocket"></i>
Jump to 2030
</button>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
<button class="inline-flex items-center gap-2 px-3 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors text-sm" onclick="window.calendarDemo.testKeyboardNav('ArrowUp')">
<i class="fas fa-arrow-up"></i>
Week Up
</button>
<button class="inline-flex items-center gap-2 px-3 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors text-sm" onclick="window.calendarDemo.testKeyboardNav('ArrowDown')">
<i class="fas fa-arrow-down"></i>
Week Down
</button>
<button class="inline-flex items-center gap-2 px-3 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors text-sm" onclick="window.calendarDemo.testKeyboardNav('ArrowLeft')">
<i class="fas fa-arrow-left"></i>
Day Left
</button>
<button class="inline-flex items-center gap-2 px-3 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors text-sm" onclick="window.calendarDemo.testKeyboardNav('ArrowRight')">
<i class="fas fa-arrow-right"></i>
Day Right
</button>
</div>
<div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900 border-2 border-blue-200 dark:border-blue-800 rounded-xl p-6 relative">
<div class="absolute top-4 left-4 text-xl">π‘</div>
<div class="ml-8 space-y-3">
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Current Date:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="currentDateDisplay">Loading...</span>
</div>
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Focused Date:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="focusedDateDisplay">--</span>
</div>
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Current View:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="currentViewDisplay">Month View</span>
</div>
</div>
</div>
</div>
<div class="relative bg-gradient-to-br from-slate-800 to-slate-900 text-slate-200 p-6 rounded-xl font-mono text-sm my-6 overflow-x-auto border border-slate-700 leading-relaxed" data-lang="javascript">
<div class="absolute top-3 right-4 text-slate-500 text-xs uppercase font-semibold bg-slate-700/50 px-2 py-1 rounded border border-slate-600/50">JavaScript</div>
<pre class="m-0 whitespace-pre-wrap break-words">// 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();</pre></div>
</section> <!-- Date Constraints -->
<section id="constraints" class="bg-card backdrop-blur-sm rounded-xl p-6 border border-border/50 shadow-lg">
<div class="flex items-start gap-4 mb-6">
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fas fa-shield-alt text-primary text-xl"></i>
</div>
<div>
<h2 class="text-2xl font-bold text-foreground mb-2">Smart Date Constraints</h2>
<p class="text-muted-foreground">Set minimum/maximum dates, disable specific dates, and implement business rules with ease.</p>
</div>
</div>
<div class="space-y-4">
<div class="flex flex-wrap gap-3">
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.calendarDemo.setMinMaxDates()">
<i class="fas fa-calendar-times"></i>
Set Date Range
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors" onclick="window.calendarDemo.disableWeekends()">
<i class="fas fa-ban"></i>
Disable Weekends
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors" onclick="window.calendarDemo.disableHolidays()">
<i class="fas fa-gift"></i>
Disable Holidays
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors" onclick="window.calendarDemo.clearConstraints()">
<i class="fas fa-unlock"></i>
Clear All
</button>
</div>
<div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900 border-2 border-blue-200 dark:border-blue-800 rounded-xl p-6 relative">
<div class="absolute top-4 left-4 text-xl">π‘</div>
<div class="ml-8 space-y-3">
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Min Date:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="minDateDisplay">None</span>
</div>
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Max Date:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="maxDateDisplay">None</span>
</div>
<div class="flex items-center">
<span class="font-semibold text-blue-800 dark:text-blue-200 mr-3 inline-block min-w-[120px]">Disabled Dates:</span>
<span class="text-blue-600 dark:text-blue-300 font-mono text-sm bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded" id="disabledDatesDisplay">0</span>
</div>
</div>
</div>
</div>
<div class="relative bg-gradient-to-br from-slate-800 to-slate-900 text-slate-200 p-6 rounded-xl font-mono text-sm my-6 overflow-x-auto border border-slate-700 leading-relaxed" data-lang="javascript">
<div class="absolute top-3 right-4 text-slate-500 text-xs uppercase font-semibold bg-slate-700/50 px-2 py-1 rounded border border-slate-600/50">JavaScript</div>
<pre class="m-0 whitespace-pre-wrap break-words">// 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);
}
}</pre></div>
</section> <!-- Internationalization -->
<section id="internationalization" class="bg-card backdrop-blur-sm rounded-xl p-6 border border-border/50 shadow-lg">
<div class="flex items-start gap-4 mb-6">
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fas fa-globe-americas text-primary text-xl"></i>
</div>
<div>
<h2 class="text-2xl font-bold text-foreground mb-2">Global Internationalization</h2>
<p class="text-muted-foreground">Built-in support for 50+ locales with automatic formatting, RTL languages, and cultural date preferences.</p>
</div>
</div>
<div class="space-y-4">
<div class="flex flex-wrap gap-3">
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.calendarDemo.changeLocale('en-US')">
<i class="fas fa-flag-usa"></i>
English (US)
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.calendarDemo.changeLocale('es-ES')">
<i class="fas fa-flag"></i>
EspaΓ±ol
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.calendarDemo.changeLocale('fr-FR')">
<i class="fas fa-flag"></i>
Français
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.calendarDemo.changeLocale('de-DE')">
<i class="fas fa-flag"></i>
Deutsch
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.calendarDemo.changeLocale('ja-JP')">
<i class="fas fa-flag"></i>
ζ₯ζ¬θͺ
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors" onclick="window.calendarDemo.changeLocale('ar-SA')">
<i class="fas fa-flag"></i>
Ψ§ΩΨΉΨ±Ψ¨ΩΨ©
</button>
</div>
<div class="flex flex-wrap gap-3">
<button class="inline-flex items-center gap-2 px-4 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors" onclick="window.calendarDemo.changeFirstDayOfWeek(0)">
<i class="fas fa-calendar-week"></i>
Sunday First
</button>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors"