@uplink-protocol/calendar-controller
Version:
Flexible calendar API supporting both calendar and date-picker integrations for any JavaScript framework or library
45 lines (43 loc) • 1.89 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#007bff',
'primary-light': '#e6f2ff'
}
}
}
}
</script>
</head>
<body class="container mx-auto max-w-6xl p-6 font-sans">
<h1 class="text-3xl font-bold mb-6">Year Calendar Example</h1>
<div class="flex items-center mb-6 space-x-4">
<button id="prevYear" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded transition flex items-center">
<i class="fa-solid fa-chevron-left mr-2"></i>Previous Year
</button>
<span id="currentYear" class="text-xl font-semibold"></span>
<button id="nextYear" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded transition flex items-center">
Next Year<i class="fa-solid fa-chevron-right ml-2"></i>
</button>
<button id="goToToday" class="px-4 py-2 bg-primary text-white hover:bg-blue-600 rounded transition flex items-center">
<i class="fa-solid fa-calendar-day mr-2"></i>Today
</button>
</div>
<div class="mb-6">
<div id="monthGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"></div>
</div>
<script src="js/controller.js" type="module"></script>
<script src="js/view.js" type="module"></script>
<script src="js/main.js" type="module"></script>
</body>
</html>