Skip to content

Commit

Permalink
Adding calendar
Browse files Browse the repository at this point in the history
  • Loading branch information
@alkhafaji4
alkhafaji4 committed Nov 14, 2024
1 parent 6b2487d commit a5bc078
Show file tree
Hide file tree
Showing 3 changed files with 310 additions and 56 deletions.
80 changes: 69 additions & 11 deletions public/scripts/calendar.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,69 @@
ocument.addEventListener('DOMContentLoaded', function () {
const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
{ title: 'Monthly Book Club Meeting', start: '2023-11-10' },
{ title: 'Next Book Review', start: '2023-11-20' }
]
});
calendar.render();
});
const calendarDays = document.getElementById('calendarDays');
const monthYear = document.getElementById('monthYear');
const prevMonth = document.getElementById('prevMonth');
const nextMonth = document.getElementById('nextMonth');
const meetingPopup = document.getElementById('meetingPopup');
const closePopup = document.getElementById('closePopup');
const meetingDetails = document.getElementById('meetingDetails');

// Example meeting data
const meetings = {
'2024-11-20': 'Discuss "To Kill a Mockingbird"',
'2024-12-15': 'Discuss "Pride and Prejudice"',
'2025-01-10': 'Discuss "1984"'
};

let currentDate = new Date();

function renderCalendar(date) {
calendarDays.innerHTML = '';
const year = date.getFullYear();
const month = date.getMonth();

monthYear.textContent = `${date.toLocaleString('default', { month: 'long' })} ${year}`;

const firstDayOfMonth = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();

for (let i = 0; i < firstDayOfMonth; i++) {
const emptyCell = document.createElement('div');
emptyCell.classList.add('day');
calendarDays.appendChild(emptyCell);
}

for (let day = 1; day <= daysInMonth; day++) {
const cell = document.createElement('div');
cell.classList.add('day');
const dateString = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;

if (meetings[dateString]) {
cell.classList.add('highlight');
cell.addEventListener('click', () => showMeetingPopup(meetings[dateString]));
}

cell.textContent = day;
calendarDays.appendChild(cell);
}
}

function showMeetingPopup(details) {
meetingDetails.textContent = details;
meetingPopup.style.display = 'flex';
}

closePopup.addEventListener('click', () => {
meetingPopup.style.display = 'none';
});

prevMonth.addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() - 1);
renderCalendar(currentDate);
});

nextMonth.addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() + 1);
renderCalendar(currentDate);
});

// Initialize calendar
renderCalendar(currentDate);
226 changes: 192 additions & 34 deletions public/webpages/css/calendar.css
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,218 @@
/* Basic CSS to center and style the calendar */
/* General Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
align-items: flex-start; /* Use 'center' if you want vertical centering */
padding-top: 80px; /* Space for fixed header */
min-height: 100vh;
margin: 0;
padding: 20px;
background-color: #f9f9f9;
}

h2 {
margin-top: 0;
/* Header Styles */
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
padding: 15px 30px;
color: #333;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo-container {
display: flex;
align-items: center;
}

.logo {
height: 40px;
margin-right: 10px;
}

.site-title {
font-size: 24px;
font-weight: bold;
color: #ff7043;
}

/* Navigation Menu Styles */
.nav-container {
display: flex;
align-items: center;
}

.nav-list {
display: flex;
list-style: none;
gap: 15px;
}

.nav-list li {
display: inline-block;
}

.nav-list a {
color: #333;
text-decoration: none;
font-size: 16px;
padding: 5px 15px;
transition: background-color 0.3s ease;
}

#calendar {
width: 80%;
max-width: 1000px;
margin-top: 20px;
background: white;
border: 1px solid #ddd;
.nav-list a:hover {
background-color: #ff7043;
color: white;
border-radius: 5px;
}

/* Button Styles */
.loginbutton {
background-color: #ff7043;
color: white;
border: none;
padding: 8px 12px;
cursor: pointer;
font-size: 14px;
border-radius: 5px;
transition: background-color 0.3s ease;
margin-left: 10px;
}

.loginbutton:hover {
background-color: #d84315;
}

/* Calendar Container */
.calendar-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 100%;
text-align: center;
margin: 20px 0; /* Space between header and calendar */
}

/* Calendar Header */
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.calendar-header button {
background-color: #3f51b5;
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 18px;
border-radius: 5px;
transition: background-color 0.3s;
}
body {
font-family: Arial, sans-serif;
margin: 20px;

.calendar-header button:hover {
background-color: #303f9f;
}

h2 {
text-align: center;
.calendar-header h2 {
font-size: 24px;
font-weight: bold;
color: #333;
margin: 0;
}

#bookInfo {
margin-top: 20px;
text-align: center;
/* Days of the Week */
.day-names {
display: grid;
grid-template-columns: repeat(7, 1fr);
color: #757575;
font-weight: bold;
padding-bottom: 10px;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 10px;
}

#bookCover {
width: 100px;
height: 150px;
object-fit: cover;
/* Calendar Days Grid */
.days-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
}

.progress-bar {
width: 100%;
background-color: #f3f3f3;
.day {
padding: 15px;
background-color: #f0f0f0;
border-radius: 5px;
margin-top: 10px;
text-align: center;
font-size: 16px;
color: #333;
transition: background-color 0.2s;
}

.progress {
height: 20px;
.day:hover {
background-color: #d0d0d0;
}

.day.highlight {
background-color: #4caf50;
width: 0%; /* Progress starts at 0% */
border-radius: 5px;
color: white;
}

.day.empty {
background-color: transparent;
cursor: default;
}

/* Popup Style */
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}

.popup-content {
background-color: white;
padding: 20px;
border-radius: 8px;
max-width: 300px;
text-align: center;
position: relative;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#closePopup {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
color: #333;
}

#meetingDetails {
font-size: 16px;
color: #555;
margin-top: 10px;
}

Loading

0 comments on commit a5bc078

Please sign in to comment.