Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Full-Screen Calendar with Important Dates for 2024</title> | |
| <style> | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| margin: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| background: linear-gradient(35deg, rgb(247, 247, 245), #ca6a03); | |
| color: #fff; | |
| } | |
| .calendar { | |
| width: 100%; | |
| max-width: 1200px; | |
| height: 90%; | |
| display: flex; | |
| flex-direction: column; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| overflow: hidden; | |
| background-color: #282c34; | |
| } | |
| .calendar-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px; | |
| background-color: #1f222a; | |
| border-bottom: 1px solid #444; | |
| } | |
| .calendar-header button { | |
| background-color: #ff5722; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| color: white; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| .calendar-header button:hover { | |
| background-color: #e64a19; | |
| } | |
| .calendar-header #monthYear { | |
| font-size: 24px; | |
| font-weight: bold; | |
| } | |
| .calendar-body { | |
| padding: 20px; | |
| flex-grow: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .day-names, .days { | |
| display: flex; | |
| flex-wrap: wrap; | |
| flex-grow: 1; | |
| } | |
| .day-names div, .days div { | |
| width: calc(100% / 7); | |
| text-align: center; | |
| padding: 5px 0; /* Adjusted padding */ | |
| border: 1px solid #444; | |
| box-sizing: border-box; | |
| box-sizing: border-box; | |
| font-size: 14px; /* Adjusted font size */ | |
| } | |
| .days div { | |
| position: relative; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: background-color 0.3s, transform 0.3s; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; /* Center content vertically */ | |
| align-items: center; /* Center content horizontally */ | |
| } | |
| .days div .date { | |
| font-size: 20px; | |
| font-weight: bold; /* Make the date number bold */ | |
| } | |
| .days div .event-description { | |
| font-size: 16px; | |
| color: #fff; | |
| font-weight: bold; /* Make the event description bold */ | |
| margin-top: 5px; | |
| margin-left: 5px; | |
| text-align: center; | |
| } | |
| .days div:hover { | |
| background-color: #ffab91; | |
| transform: scale(1.05); | |
| } | |
| .today { | |
| background-color: #ffeb3b; | |
| color: #000; | |
| } | |
| .important { | |
| background-color: #ff5722; | |
| color: white; | |
| } | |
| .add-event-form { | |
| width: 90%; | |
| max-width: 1200px; | |
| display: flex; | |
| flex-direction: column; | |
| margin-top: 20px; | |
| color: #000; | |
| } | |
| .add-event-form input, .add-event-form button { | |
| margin-bottom: 10px; | |
| padding: 15px; | |
| font-size: 18px; | |
| border-radius: 5px; | |
| border: 1px solid #ccc; | |
| } | |
| .add-event-form button { | |
| background-color: #ff5722; | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| .add-event-form button:hover { | |
| background-color: #e64a19; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="calendar"> | |
| <div class="calendar-header"> | |
| <button id="prevMonth">Prev</button> | |
| <div id="monthYear"></div> | |
| <button id="nextMonth">Next</button> | |
| </div> | |
| <div class="calendar-body"> | |
| <div class="day-names"> | |
| <div>Sun</div> | |
| <div>Mon</div> | |
| <div>Tue</div> | |
| <div>Wed</div> | |
| <div>Thu</div> | |
| <div>Fri</div> | |
| <div>Sat</div> | |
| </div> | |
| <div class="days" id="days"></div> | |
| </div> | |
| </div> | |
| <form class="add-event-form" id="addEventForm"> | |
| <input type="date" id="eventDate" required> | |
| <input type="text" id="eventDescription" placeholder="Event Description" required> | |
| <button type="submit">Add Event</button> | |
| </form> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const daysElement = document.getElementById('days'); | |
| const monthYearElement = document.getElementById('monthYear'); | |
| const prevMonthButton = document.getElementById('prevMonth'); | |
| const nextMonthButton = document.getElementById('nextMonth'); | |
| const addEventForm = document.getElementById('addEventForm'); | |
| const eventDateInput = document.getElementById('eventDate'); | |
| const eventDescriptionInput = document.getElementById('eventDescription'); | |
| let currentDate = new Date(2024, 0, 1); // Start from January 2024 | |
| const defaultImportantDates = { | |
| // National Holidays | |
| '2024-01-01': 'New Year\'s Day', | |
| '2024-01-26': 'Republic Day', | |
| '2024-03-11': 'Maha Shivaratri', | |
| '2024-03-25': 'Holi', | |
| '2024-04-14': 'Ambedkar Jayanti', | |
| '2024-04-22': 'Ram Navami', | |
| '2024-05-01': 'Labor Day', | |
| '2024-08-15': 'Independence Day', | |
| '2024-08-28': 'Krishna Janmashtami', | |
| '2024-10-02': 'Gandhi Jayanti', | |
| '2024-10-20': 'Dussehra', | |
| '2024-10-31': 'Diwali', | |
| '2024-11-01': 'Kannada Rajyotsava', | |
| '2024-11-15': 'Children\'s Day', | |
| '2024-12-25': 'Christmas Day', | |
| // Karnataka Specific Holidays | |
| '2024-01-14': 'Makar Sankranti', | |
| '2024-03-24': 'Ugadi', | |
| '2024-04-08': 'Basava Jayanti', | |
| '2024-07-29': 'Vara Mahalakshmi Vrata', | |
| '2024-08-08': 'Karnataka Rajyotsava', | |
| '2024-08-16': 'Vara Mahalakshmi', | |
| '2024-10-13': 'Maha Navami', | |
| '2024-10-14': 'Ayudha Puja', | |
| '2024-11-02': 'Kannada Rajyotsava', | |
| '2024-11-30': 'Kanakadasa Jayanti', | |
| }; | |
| let importantDates = JSON.parse(localStorage.getItem('importantDates')) || defaultImportantDates; | |
| function saveImportantDates() { | |
| localStorage.setItem('importantDates', JSON.stringify(importantDates)); | |
| } | |
| function renderCalendar(date) { | |
| date.setDate(1); | |
| const month = date.getMonth(); | |
| const year = date.getFullYear(); | |
| const lastDay = new Date(year, month + 1, 0).getDate(); | |
| const prevLastDay = new Date(year, month, 0).getDate(); | |
| const firstDayIndex = date.getDay(); | |
| const lastDayIndex = new Date(year, month + 1, 0).getDay(); | |
| const nextDays = 7 - lastDayIndex - 1; | |
| const months = [ | |
| "January", "February", "March", "April", "May", "June", | |
| "July", "August", "September", "October", "November", "December" | |
| ]; | |
| monthYearElement.innerHTML = months[month] + ' ' + year; | |
| let days = ""; | |
| for (let x = firstDayIndex; x > 0; x--) { | |
| days += `<div class="prev-date">${prevLastDay - x + 1}</div>`; | |
| } | |
| for (let i = 1; i <= lastDay; i++) { | |
| const dateString =`${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`; | |
| let classList = ''; | |
| let eventDescription = ''; | |
| if (i === new Date().getDate() && date.getMonth() === new Date().getMonth() && date.getFullYear() === new Date().getFullYear()) { | |
| classList += ' today'; | |
| } | |
| if (importantDates[dateString]) { | |
| classList += ' important'; | |
| eventDescription = `<span class="event-description">${importantDates[dateString]}</span>`; | |
| } | |
| days += `<div class="${classList.trim()}"><div class="date">${i}</div>${eventDescription}</div>`; | |
| } | |
| for (let j = 1; j <= nextDays; j++) { | |
| days += `<div class="next-date">${j}</div>`; | |
| } | |
| daysElement.innerHTML = days; | |
| } | |
| prevMonthButton.addEventListener('click', () => { | |
| currentDate.setMonth(currentDate.getMonth() - 1); | |
| renderCalendar(currentDate); | |
| }); | |
| nextMonthButton.addEventListener('click', () => { | |
| currentDate.setMonth(currentDate.getMonth() + 1); | |
| renderCalendar(currentDate); | |
| }); | |
| addEventForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const date = eventDateInput.value; | |
| const description = eventDescriptionInput.value; | |
| if (date && description) { | |
| importantDates[date] = description; | |
| saveImportantDates(); | |
| renderCalendar(currentDate); | |
| eventDateInput.value = ''; | |
| eventDescriptionInput.value = ''; | |
| } | |
| }); | |
| renderCalendar(currentDate); | |
| }); | |
| </script> | |
| </body> | |
| </html> |