lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
179 lines (152 loc) • 8.51 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Appointment</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
feather.replace();
});
</script>
</head>
<body class="font-primarylw bg-gray-100 text-gray-900 min-h-screen flex justify-center items-center">
<div class="relative w-full max-w-sm p-6 bg-white rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-center mb-4">Set Appointment</h2>
<!-- Date Picker Input -->
<input type="text" id="selectedDate" readonly placeholder="Select Date"
class="w-full px-4 py-3 pl-10 pr-12 border rounded-lg shadow-sm focus:outline-none" onclick="openPopover()">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="absolute right-3 top-1/2 transform -translate-y-1/2 w-6 h-6 text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6.75 2.994v2.25m10.5-2.25v2.25m-14.252 13.5V7.491a2.25 2.25 0 0 1 2.25-2.25h13.5a2.25 2.25 0 0 1 2.25 2.25v11.251m-18 0a2.25 2.25 0 0 0 2.25 2.25h13.5a2.25 2.25 0 0 0 2.25-2.25m-18 0v-7.5a2.25 2.25 0 0 1 2.25-2.25h13.5a2.25 2.25 0 0 1 2.25 2.25v7.5" />
</svg>
<!-- Calendar with selected dates highlighted -->
<div class="mt-4">
<div class="flex justify-between items-center mb-3">
<button class="text-sm text-gray-600" onclick="changeMonth(-1)">Prev</button>
<div class="font-semibold text-lg" id="monthName"></div>
<button class="text-sm text-gray-600" onclick="changeMonth(1)">Next</button>
</div>
<div class="grid grid-cols-7 gap-2 text-center text-sm font-medium">
<div>Sun</div>
<div>Mon</div>
<div>Tue</div>
<div>Wed</div>
<div>Thu</div>
<div>Fri</div>
<div>Sat</div>
</div>
<div class="grid grid-cols-7 gap-2 mt-2" id="calendar"></div>
</div>
<!-- Popover for setting reminder -->
<div id="reminderPopover"
class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50 hidden">
<div class="relative w-96 p-6 bg-white rounded-lg shadow-lg">
<button onclick="closePopover()" class="absolute top-2 right-2 text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<h3 class="text-xl font-semibold mb-4">Set Reminder</h3>
<input type="time" id="timeInput" class="w-full px-4 py-2 border rounded-lg shadow-sm mb-4">
<input type="text" id="titleInput" placeholder="Enter event title"
class="w-full px-4 py-2 border rounded-lg shadow-sm mb-4">
<button onclick="setReminder()" class="w-full py-3 rounded-lg bg-blue-500 text-white">
Set Reminder
</button>
</div>
</div>
<!-- Display details for selected scheduled date -->
<div id="eventDetails" class="relative mt-4 bg-gray-100 p-4 rounded-lg shadow-md hidden">
<button onclick="closeDetails()" class="absolute top-2 right-2 text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<h3 class="text-lg font-semibold">Scheduled Event</h3>
<p class="text-sm text-gray-700" id="eventDate">Date: </p>
<p class="text-sm text-gray-700" id="eventTime">Time: </p>
<p class="text-sm text-gray-700" id="eventTitle">Title: </p>
</div>
</div>
<script>
let currentDate = new Date();
let scheduledDates = [];
let selectedDate = null;
// Render Calendar
function renderCalendar() {
const month = currentDate.getMonth();
const year = currentDate.getFullYear();
const firstDay = new Date(year, month, 1).getDay();
const totalDays = new Date(year, month + 1, 0).getDate();
const calendar = document.getElementById('calendar');
calendar.innerHTML = '';
for (let i = 0; i < firstDay; i++) {
calendar.innerHTML += '<div></div>';
}
for (let day = 1; day <= totalDays; day++) {
const dateStr = new Date(year, month, day).toLocaleDateString();
const isScheduled = scheduledDates.some(event => event.date === dateStr);
calendar.innerHTML += `
<div class="cursor-pointer flex items-center justify-center w-12 h-12 rounded-lg transition-all relative ${isScheduled ? 'bg-green-500 text-white' : 'hover:bg-blue-500 text-gray-700 hover:text-white'}" onclick="selectDate(${day}, ${month}, ${year})">
${isScheduled ? `
<div class="absolute top-0 right-0 text-xl text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.25v15.5m7.25-7.25H4.75" />
</svg>
</div>
` : ''}
${day}
</div>
`;
}
feather.replace();
}
function selectDate(day, month, year) {
selectedDate = new Date(year, month, day).toLocaleDateString();
document.getElementById('selectedDate').value = selectedDate;
const existingEvent = scheduledDates.find(event => event.date === selectedDate);
if (existingEvent) {
document.getElementById('eventDate').innerText = `Date: ${existingEvent.date}`;
document.getElementById('eventTime').innerText = `Time: ${existingEvent.time}`;
document.getElementById('eventTitle').innerText = `Title: ${existingEvent.title}`;
document.getElementById('eventDetails').classList.remove('hidden');
} else {
openPopover();
}
}
function openPopover() {
document.getElementById('reminderPopover').classList.remove('hidden');
}
function closePopover() {
document.getElementById('reminderPopover').classList.add('hidden');
}
function closeDetails() {
document.getElementById('eventDetails').classList.add('hidden');
}
function setReminder() {
const timeInput = document.getElementById('timeInput').value;
const titleInput = document.getElementById('titleInput').value;
if (!selectedDate || !timeInput || !titleInput) {
alert("Please fill all fields.");
return;
}
scheduledDates.push({ date: selectedDate, time: timeInput, title: titleInput });
closePopover();
renderCalendar();
}
function changeMonth(offset) {
currentDate.setMonth(currentDate.getMonth() + offset);
renderCalendar();
document.getElementById('monthName').textContent = `${currentDate.toLocaleString("default", { month: "long" })} ${currentDate.getFullYear()}`;
}
renderCalendar();
document.getElementById('monthName').textContent = `${currentDate.toLocaleString("default", { month: "long" })} ${currentDate.getFullYear()}`;
</script>
</body>
</html>