@uplink-protocol/calendar-controller
Version:
Flexible calendar API supporting both calendar and date-picker integrations for any JavaScript framework or library
90 lines (82 loc) • 3.58 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calendar with Multiple Views</title>
<!-- Include Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#007bff',
'primary-light': '#e6f2ff'
}
}
}
}
</script>
</head>
<body class="bg-gray-100 p-4">
<div class="max-w-md mx-auto bg-white shadow-lg rounded-lg p-4">
<h1 class="text-2xl font-bold mb-4 text-center text-gray-800">Calendar with Multiple Views</h1>
<!-- View Toggle -->
<div class="flex justify-center mb-4 space-x-2">
<button id="dayViewBtn" class="px-4 py-2 bg-primary text-white rounded">Day View</button>
<button id="monthViewBtn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded">Month View</button>
<button id="yearViewBtn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded">Year View</button>
</div>
<!-- Calendar Header -->
<div class="flex justify-between items-center mb-4">
<button title="previous" id="prevBtn" class="text-gray-600 hover:text-primary">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
</button>
<div class="text-center">
<h2 id="calendarTitle" class="text-xl font-semibold text-gray-800">May 2025</h2>
</div>
<button title="next" id="nextBtn" class="text-gray-600 hover:text-primary">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</div>
<!-- Day View Container -->
<div id="dayView" class="mb-4">
<!-- Weekday Headers -->
<div class="grid grid-cols-7 gap-1 mb-1">
<div class="text-center text-gray-500 text-sm py-1">Sun</div>
<div class="text-center text-gray-500 text-sm py-1">Mon</div>
<div class="text-center text-gray-500 text-sm py-1">Tue</div>
<div class="text-center text-gray-500 text-sm py-1">Wed</div>
<div class="text-center text-gray-500 text-sm py-1">Thu</div>
<div class="text-center text-gray-500 text-sm py-1">Fri</div>
<div class="text-center text-gray-500 text-sm py-1">Sat</div>
</div>
<!-- Calendar Days Grid -->
<div id="calendarDays" class="grid grid-cols-7 gap-1">
<!-- Days will be populated by JavaScript -->
</div>
</div>
<!-- Month View Container -->
<div id="monthView" class="mb-4 hidden">
<div id="calendarMonths" class="grid grid-cols-3 gap-2">
<!-- Months will be populated by JavaScript -->
</div>
</div>
<!-- Year View Container -->
<div id="yearView" class="mb-4 hidden">
<div id="calendarYears" class="grid grid-cols-4 gap-2">
<!-- Years will be populated by JavaScript -->
</div>
</div>
<!-- Today Button -->
<div class="text-center mt-4">
<button id="todayBtn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-primary hover:text-white">
Today
</button>
</div>
</div>
<!-- Load the main module -->
<script type="module" src="./js/main.js"></script>
</body>
</html>