@uplink-protocol/calendar-controller
Version:
Flexible calendar API supporting both calendar and date-picker integrations for any JavaScript framework or library
212 lines (193 loc) • 13.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Calendar Test</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-100 min-h-screen">
<div class="container mx-auto p-8">
<h1 class="text-3xl font-bold text-gray-800 mb-4">Floating Calendar Test</h1>
<p class="text-gray-600 mb-8">This page tests the floating calendar widget functionality.</p>
<div class="bg-white rounded-lg p-6 shadow-lg">
<h2 class="text-xl font-semibold mb-4">Test Controls</h2>
<div class="flex gap-4">
<button onclick="testMinimize()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
Test Minimize
</button>
<button onclick="testDragMode()" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">
Test Drag Mode
</button>
<button onclick="testSettings()" class="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700">
Test Settings
</button>
<button onclick="testToday()" class="px-4 py-2 bg-orange-600 text-white rounded hover:bg-orange-700">
Select Today
</button>
</div>
</div>
</div>
<!-- Floating Calendar Widget -->
<div id="floating-calendar-widget" class="fixed top-5 right-5 w-80 max-w-[90vw] z-50 shadow-2xl sm:top-5 sm:right-5 max-sm:top-2 max-sm:right-2 max-sm:w-[calc(100vw-1rem)]">
<!-- Widget Header -->
<div class="bg-gradient-to-r from-blue-600 to-blue-700 dark:from-blue-700 dark:to-blue-800 text-white rounded-t-xl px-4 py-3 cursor-move select-none">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold tracking-tight">Smart Calendar</h3>
<div class="flex items-center gap-1">
<button class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-white/10 hover:bg-white/20 transition-colors duration-200" onclick="window.advancedCalendar.toggleMinimize()" title="Minimize/Maximize">
<i class="fas fa-window-minimize text-sm" id="minimizeIcon"></i>
</button>
<button class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-white/10 hover:bg-white/20 transition-colors duration-200" onclick="window.advancedCalendar.enableDragMode()" title="Drag to Move">
<i class="fas fa-arrows-alt text-sm"></i>
</button>
<button class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-white/10 hover:bg-white/20 transition-colors duration-200" onclick="window.advancedCalendar.showSettings()" title="Settings">
<i class="fas fa-cog text-sm"></i>
</button>
</div>
</div>
</div>
<!-- Mini View (when minimized) -->
<div id="miniView" class="hidden bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900 dark:to-blue-950 rounded-b-xl p-4 text-center border-t border-white/20">
<div class="text-3xl font-bold text-blue-900 dark:text-blue-100" id="miniDate">1</div>
<div class="text-sm font-medium text-blue-700 dark:text-blue-300 uppercase tracking-wide" id="miniMonth">JUN</div>
</div>
<!-- Full Calendar Content -->
<div id="fullView" class="bg-white dark:bg-gray-900 rounded-b-xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
<!-- Enhanced Calendar Display -->
<div class="p-4">
<div class="flex items-center justify-between mb-4 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 rounded-lg p-3">
<button class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors shadow-sm" onclick="window.advancedCalendar.goToPreviousMonth()" title="Previous Month">
<i class="fas fa-chevron-left text-sm"></i>
</button>
<div class="text-lg font-semibold text-gray-900 dark:text-gray-100" id="floatingMonthYear">June 2025</div>
<button class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors shadow-sm" onclick="window.advancedCalendar.goToNextMonth()" title="Next Month">
<i class="fas fa-chevron-right text-sm"></i>
</button>
</div>
<!-- Enhanced Calendar Grid with Proper Structure -->
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
<!-- Weekday Headers Row -->
<div class="grid grid-cols-7 gap-1 mb-2" id="floatingWeekdayHeaders">
<div class="text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-2">SUN</div>
<div class="text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-2">MON</div>
<div class="text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-2">TUE</div>
<div class="text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-2">WED</div>
<div class="text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-2">THU</div>
<div class="text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-2">FRI</div>
<div class="text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-2">SAT</div>
</div>
<!-- Calendar Days Grid -->
<div class="grid grid-cols-7 gap-1" id="floatingCalendarDays">
<!-- Populated by JavaScript -->
</div>
</div>
</div>
<!-- Quick Actions Panel -->
<div class="border-t border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-800">
<div class="grid grid-cols-2 gap-2">
<button class="inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/50 hover:bg-blue-100 dark:hover:bg-blue-900/75 rounded-lg transition-colors" onclick="window.advancedCalendar.selectToday()">
<i class="fas fa-calendar-day text-xs"></i>
Today
</button>
<button class="inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-900/50 hover:bg-green-100 dark:hover:bg-green-900/75 rounded-lg transition-colors" onclick="window.advancedCalendar.selectTomorrow()">
<i class="fas fa-calendar-plus text-xs"></i>
Tomorrow
</button>
<button class="inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium text-purple-700 dark:text-purple-300 bg-purple-50 dark:bg-purple-900/50 hover:bg-purple-100 dark:hover:bg-purple-900/75 rounded-lg transition-colors" onclick="window.advancedCalendar.selectWeekend()">
<i class="fas fa-calendar-week text-xs"></i>
Weekend
</button>
<button class="inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 hover:bg-indigo-100 dark:hover:bg-indigo-900/75 rounded-lg transition-colors" onclick="window.advancedCalendar.selectNextWeek()">
<i class="fas fa-forward text-xs"></i>
Next Week
</button>
<button class="inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-900/50 hover:bg-red-100 dark:hover:bg-red-900/75 rounded-lg transition-colors" onclick="window.advancedCalendar.clearAll()">
<i class="fas fa-times text-xs"></i>
Clear
</button>
<button class="inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-900/50 hover:bg-amber-100 dark:hover:bg-amber-900/75 rounded-lg transition-colors" onclick="window.advancedCalendar.showTooltips()">
<i class="fas fa-info-circle text-xs"></i>
Help
</button>
</div>
</div>
<!-- Enhanced Status Display -->
<div class="border-t border-gray-200 dark:border-gray-700 bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-700 p-4">
<div class="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Calendar Status</div>
<div class="text-sm text-slate-600 dark:text-slate-400 bg-white dark:bg-slate-800 rounded-lg p-3 border border-slate-200 dark:border-slate-600" id="floatingStatus">
Ready - Click any date to select
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="js/advanced-floating-calendar.js"></script>
<script>
// Test functions
function testMinimize() {
if (window.advancedCalendar) {
window.advancedCalendar.toggleMinimize();
} else {
alert('Floating calendar not initialized');
}
}
function testDragMode() {
if (window.advancedCalendar) {
window.advancedCalendar.enableDragMode();
} else {
alert('Floating calendar not initialized');
}
}
function testSettings() {
if (window.advancedCalendar) {
window.advancedCalendar.showSettings();
} else {
alert('Floating calendar not initialized');
}
}
function testToday() {
if (window.advancedCalendar) {
window.advancedCalendar.selectToday();
} else {
alert('Floating calendar not initialized');
}
}
// Initialize the floating calendar when page is loaded
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM loaded, initializing floating calendar...');
if (typeof AdvancedFloatingCalendar !== 'undefined') {
try {
window.advancedCalendar = new AdvancedFloatingCalendar({
container: '#floating-calendar-widget',
initialDate: new Date(),
position: { top: 20, right: 20 },
features: {
draggable: true,
minimizable: true,
quickActions: true,
animations: true,
rangeSelection: true
}
});
console.log('Advanced floating calendar initialized successfully');
// Update status
setTimeout(() => {
const status = document.getElementById('floatingStatus');
if (status) {
status.textContent = 'Calendar initialized successfully!';
}
}, 1000);
} catch (error) {
console.error('Error initializing floating calendar:', error);
alert('Error initializing floating calendar: ' + error.message);
}
} else {
console.error('AdvancedFloatingCalendar class not found');
alert('AdvancedFloatingCalendar class not found');
}
});
</script>
</body>
</html>