Merge pull request anuragverma108#2780 from Vin205/main

Added Event Calender
TBorundia · Aug 8, 2024 · 9654f4d · 9654f4d
2 parents 1fa9048 + 16dbe7e
commit 9654f4d
Show file tree

Hide file tree

Showing 2 changed files with 300 additions and 1 deletion.
diff --git a/assets/html/event.html b/assets/html/event.html
@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Reading Events</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f4f4f9;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ header {
+ width: 100%;
+ background-color: #f06d87;
+ color: white;
+ padding: 1em 0;
+ text-align: center;
+ }
+
+ nav ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ nav ul li {
+ display: inline;
+ margin: 0 1em;
+ }
+
+ nav ul li a {
+ color: white;
+ text-decoration: none;
+ }
+
+ main {
+ padding: 1em;
+ width: 100%;
+ max-width: 800px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ section {
+ margin-bottom: 2em;
+ width: 100%;
+ }
+
+ h2 {
+ color: #450105;
+ }
+
+ footer {
+ background-color: #f06d87;
+ color: white;
+ text-align: center;
+ padding: 1em;
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+ }
+
+ .close-button {
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+ }
+
+ .close-button:hover,
+ .close-button:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+ }
+
+ .ul {
+ text-decoration: black;
+ }
+
+ #event-calendar {
+ width: 100%;
+ max-width: 800px;
+ background: #fff;
+ padding: 2em;
+ border-radius: 10px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+ }
+
+ .calendar-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .calendar-header button {
+ background: #2980b9;
+ color: #fff;
+ border: none;
+ padding: 0.5em 1em;
+ border-radius: 5px;
+ cursor: pointer;
+ }
+
+ .calendar-header h3 {
+ margin: 0;
+ }
+
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 1em;
+ }
+
+ thead th {
+ background: #2980b9;
+ color: #fff;
+ padding: 0.5em 0;
+ }
+
+ tbody td {
+ padding: 1em;
+ text-align: center;
+ cursor: pointer;
+ transition: background 0.3s;
+ }
+
+ tbody td:hover {
+ background: #f4f4f9;
+ }
+
+ .event {
+ background: #f39c12;
+ color: #fff;
+ border-radius: 50%;
+ padding: 0.3em;
+ }
+
+ #event-details {
+ margin-top: 2em;
+ width: 100%;
+ }
+
+ #event-list {
+ list-style: none;
+ padding: 0;
+ }
+
+ #event-list li {
+ background: #f39c12;
+ color: #fff;
+ margin: 0.5em 0;
+ padding: 1em;
+ border-radius: 5px;
+ }
+
+ </style>
+</head>
+<body>
+ <header>
+ <h1 style="color: black;">SwapReads</h1>
+ <nav>
+ <ul>
+ <li><a href="./index.html">Home</a></li>
+ <li><a href="./about.html">About Us</a></li>
+ <li><a href="./index.html">Contact</a></li>
+ <li><a href="#authors">Authors</a></li>
+ <li><a href="#community">Community</a></li>
+ </ul>
+ </nav>
+ </header>
+ <main>
+ <section id="event-calendar">
+ <h2>Reading Event Calendar</h2>
+ <div class="calendar">
+ <div class="calendar-header">
+ <button id="prevMonth">‹</button>
+ <h3 id="monthAndYear"></h3>
+ <button id="nextMonth">›</button>
+ </div>
+ <table id="calendar-body">
+ <thead>
+ <tr>
+ <th>Sun</th>
+ <th>Mon</th>
+ <th>Tue</th>
+ <th>Wed</th>
+ <th>Thu</th>
+ <th>Fri</th>
+ <th>Sat</th>
+ </tr>
+ </thead>
+ <tbody id="calendar-days">
+ <!-- Calendar days will be dynamically generated here -->
+ </tbody>
+ </table>
+ </div>
+ <div id="event-details">
+ <h3>Event Details</h3>
+ <ul id="event-list">
+ <!-- Event details will be dynamically generated here -->
+ </ul>
+ </div>
+ </section>
+ </main>
+ <footer>
+ <p>&copy; 2024 SwapReads. All Rights Reserved.</p>
+ </footer>
+ <script>
+ const eventCalendar = {
+ events: [
+ { date: '2024-08-10', title: 'Book Club Meeting' },
+ { date: '2024-08-15', title: 'Author Talk: John Doe' },
+ { date: '2024-08-20', title: 'Children’s Story Hour' },
+ { date: '2024-08-25', title: 'Poetry Reading' },
+ { date: '2024-08-2', title: 'Guest Readers Talk' },
+ ],
+ monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+ today: new Date(),
+ currentMonth: new Date().getMonth(),
+ currentYear: new Date().getFullYear(),
+ };
+
+ function generateCalendar(month, year) {
+ const firstDay = (new Date(year, month)).getDay();
+ const daysInMonth = 32 - new Date(year, month, 32).getDate();
+
+ const calendarBody = document.getElementById('calendar-days');
+ calendarBody.innerHTML = '';
+
+ let date = 1;
+ for (let i = 0; i < 6; i++) {
+ let row = document.createElement('tr');
+
+ for (let j = 0; j < 7; j++) {
+ if (i === 0 && j < firstDay) {
+ let cell = document.createElement('td');
+ let cellText = document.createTextNode('');
+ cell.appendChild(cellText);
+ row.appendChild(cell);
+ } else if (date > daysInMonth) {
+ break;
+ } else {
+ let cell = document.createElement('td');
+ let cellText = document.createTextNode(date);
+ cell.appendChild(cellText);
+
+ let eventDate = `${year}-${String(month + 1).padStart(2, '0')}-${String(date).padStart(2, '0')}`;
+ let event = eventCalendar.events.find(event => event.date === eventDate);
+
+ if (event) {
+ cell.classList.add('event');
+ cell.addEventListener('click', () => showEventDetails(event));
+ }
+
+ row.appendChild(cell);
+ date++;
+ }
+ }
+
+ calendarBody.appendChild(row);
+ }
+
+ document.getElementById('monthAndYear').innerText = `${eventCalendar.monthNames[month]} ${year}`;
+ }
+
+ function showEventDetails(event) {
+ const eventList = document.getElementById('event-list');
+ eventList.innerHTML = '';
+ let listItem = document.createElement('li');
+ listItem.innerText = event.title;
+ eventList.appendChild(listItem);
+ }
+
+ document.getElementById('prevMonth').addEventListener('click', () => {
+ eventCalendar.currentYear = (eventCalendar.currentMonth === 0) ? eventCalendar.currentYear - 1 : eventCalendar.currentYear;
+ eventCalendar.currentMonth = (eventCalendar.currentMonth === 0) ? 11 : eventCalendar.currentMonth - 1;
+ generateCalendar(eventCalendar.currentMonth, eventCalendar.currentYear);
+ });
+
+ document.getElementById('nextMonth').addEventListener('click', () => {
+ eventCalendar.currentYear = (eventCalendar.currentMonth === 11) ? eventCalendar.currentYear + 1 : eventCalendar.currentYear;
+ eventCalendar.currentMonth = (eventCalendar.currentMonth === 11) ? 0 : eventCalendar.currentMonth + 1;
+ generateCalendar(eventCalendar.currentMonth, eventCalendar.currentYear);
+ });
+
+ generateCalendar(eventCalendar.currentMonth, eventCalendar.currentYear);
+ </script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -1260,7 +1260,9 @@
 
  <li class="navbar-item">
  <a href="#rate-us" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a></li>
-
+ <li class="navbar-item" id="login-signup-link">
+ <a href="./assets/html/event.html" class="navbar-link">Events</a>
+ </li>
  <li class="navbar-item" id="login-signup-link">
  <a href="./assets/html/login.html" class="navbar-link">Login/Signup</a>
  </li>