CODE HERE
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=2.0">
<title>TurnipSchedule - Edington Hill Diary </title>
</head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TurnipSchedule - Edington Hill Diary </title>
</head>
<script>
// Calendar functionality
// Make a Calendar
const calendar = {
currentDate: new Date(),
selectedDate: new Date(),
events: {
'2026-04-16': [
{ type: 'Type 1', title: 'Firts Test', time: '9:00' },
{ type: 'Type 2', title: ' Test 001', time: '10:00' }
],
'2026-04-24': [
{ type: 'Type 3', title: 'Type 3', time: '9:00' },
{ type: 'Type 4', title: ' Type 4', time: '10:00' }
],
},
setupEventListeners() {
document.getElementById('prev-month').addEventListener('click', () => {
this.currentDate.setMonth(this.currentDate.getMonth() - 1);
this.updateCalendar();
});
document.getElementById('next-month').addEventListener('click', () => {
this.currentDate.setMonth(this.currentDate.getMonth() + 1);
this.updateCalendar();
});
document.getElementById('today-btn').addEventListener('click', () => {
this.currentDate = new Date();
this.selectedDate = new Date();
this.updateCalendar();
this.updateSelectedDate();
this.updateAppointments();
});
document.getElementById('schedule-btn').addEventListener('click', this.scheduleAppointment.bind(this));
},
updateCalendar() {
const daysContainer = document.getElementById('calendar-days');
daysContainer.innerHTML = '';
const year = this.currentDate.getFullYear();
const month = this.currentDate.getMonth();
// Update month and year in header
document.getElementById('current-month').textContent =
new Intl.DateTimeFormat('en-US', { month: 'long', year: 'numeric' }).format(this.currentDate);
// First day of month
const firstDay = new Date(year, month, 1);
// Last day of month
const lastDay = new Date(year, month + 1, 0);
// First day of the calendar grid (might be from previous month)
const startDay = new Date(firstDay);
startDay.setDate(startDay.getDate() - startDay.getDay());
const today = new Date();
// Generate 49 days (7 weeks)
for (let i = 0; i < 47; i++) {
const currentDate = new Date(startDay);
currentDate.setDate(startDay.getDate() + i);
const isOtherMonth = currentDate.getMonth() !== month;
const isToday = currentDate.toDateString() === today.toDateString();
const isSelected = currentDate.toDateString() === this.selectedDate.toDateString();
// Format date as YYYY-MM-DD for event lookup
const dateKey = this.formatDateKey(currentDate);
const dayEvents = this.events[dateKey] || [];
const dayElement = document.createElement('div');
dayElement.className = `day${isOtherMonth ? ' other-month' : ''}${isToday ? ' today' : ''}${isSelected ? ' selected' : ''}`;
dayElement.dataset.date = dateKey;
// Add day number
const dayNumber = document.createElement('div');
dayNumber.className = 'day-number';
dayNumber.textContent = currentDate.getDate();
dayElement.appendChild(dayNumber);
// Add events
if (dayEvents.length > 0) {
const eventsContainer = document.createElement('div');
eventsContainer.className = 'day-events';
dayEvents.forEach(event => {
const eventElement = document.createElement('div');
eventElement.className = `day-event ${event.type}`;
eventElement.innerHTML = `<span class="event-dot"></span>${event.title}`;
eventsContainer.appendChild(eventElement);
});
dayElement.appendChild(eventsContainer);
}
// Add click handler to select day
dayElement.addEventListener('click', () => {
// Remove selected class from previously selected day
const previousSelected = document.querySelector('.day.selected');
if (previousSelected) {
previousSelected.classList.remove('selected');
}
// Add selected class to clicked day
dayElement.classList.add('selected');
// Update selected date
this.selectedDate = new Date(currentDate);
this.updateSelectedDate();
this.updateAppointments();
});
daysContainer.appendChild(dayElement);
}
},
formatDateKey(date) {
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
},
updateSelectedDate() {
document.getElementById('selected-date').textContent =
new Intl.DateTimeFormat('en-UK', { weekday: 'long', day: 'numeric',month: 'long', year: 'numeric' }).format(this.selectedDate);
},
updateAppointments() {
const appointmentList = document.getElementById('appointment-list');
appointmentList.innerHTML = '';
const dateKey = this.formatDateKey(this.selectedDate);
const dayEvents = this.events[dateKey] || [];
if (dayEvents.length === 0) {
const noAppointments = document.createElement('div');
noAppointments.style.textAlign = 'center';
noAppointments.style.padding = '20px';
noAppointments.style.color = 'var(--text-light)';
noAppointments.innerHTML = `
<div style="font-size: 1.5rem; margin-bottom: 10px;">??</div>
<div style="font-weight: 500; margin-bottom: 5px;">No appointments scheduled</div>
<div style="font-size: 0.8rem;">Use the form below to schedule a new appointment</div>
`;
appointmentList.appendChild(noAppointments);
return;
}
dayEvents.forEach(event => {
const timeFormat = event.time.includes(':') ? event.time : `${event.time}:00`;
const hour = parseInt(timeFormat.split(':')[0]);
const minute = timeFormat.split(':')[1];
const period = hour >= 12 ? 'PM' : 'AM';
const hour12 = hour > 12 ? hour - 12 : (hour === 0 ? 12 : hour);
const formattedTime = `${hour12}:${minute} ${period}`;
// Calculate end time (30 minutes for normal, 60 for therapy)
const endHour = event.type === 'therapy' ? hour + 1 : hour;
const endMinute = event.type === 'therapy' ? minute : (parseInt(minute) + 30).toString().padStart(2, '0');
const endPeriod = endHour >= 12 ? 'PM' : 'AM';
const endHour12 = endHour > 12 ? endHour - 12 : (endHour === 0 ? 12 : endHour);
const formattedEndTime = `${endHour12}:${endMinute} ${endPeriod}`;
const item = document.createElement('div');
item.className = `appointment-item ${event.type}`;
// Use the event data to construct the appointment item
let doctorName = 'Dr. Sarah Johnson';
// if (event.type === 'therapy') doctorName = 'Therapist Mike Brown';
// if (event.type === 'lab') doctorName = 'Lab Technician Alice Miller';
// if (event.title.toLowerCase().includes('dental')) doctorName = 'Dr. Robert Chen, DDS';
item.innerHTML = `
<div class="appointment-time">
<i>?</i> ${formattedTime} - ${formattedEndTime}
</div>
<div class="appointment-title">${event.title}</div>
<div class="appointment-doctor">${doctorName}</div>
<div class="appointment-actions">
<button class="appointment-btn btn-primary" onclick="showNotification('Reminder sent!', ' Robot sent a reminder for your Diary ${event.title.toLowerCase()}.')">
<i>??</i> Remind
</button>
<button class="appointment-btn btn-outline" onclick="showNotification('Rescheduling options', ' *** WORK IN PROGRESS *** ')">
<i>??</i> Reschedule
</button>
</div>
`;
appointmentList.appendChild(item);
});
},
// Blue box in Diary dates ???
scheduleAppointment() {
const type = document.getElementById('appointment-type').value;
const time = document.getElementById('appointment-time').value;
const provider = document.getElementById('appointment-provider').value;
// Generate appointment title based on type
let title = 'Hangar';
if (type === 'Type 1') title = 'Type 1';
if (type === 'Type 2') title = 'Type 2';
if (type === 'Type 3') title = 'Type 3';
if (type === 'Type 4') title = 'Type 4';
if (type === 'Type 5') title = 'Type 5';
// Format date for events object
const dateKey = this.formatDateKey(this.selectedDate);
// Create new event
const newEvent = {
type: type,
title: title,
time: time,
provider: provider
};
// Add to events object
if (!this.events[dateKey]) {
this.events[dateKey] = [];
}
// Check for time conflicts
const timeHour = parseInt(time.split(':')[0]);
let hasConflict = false;
for (const event of this.events[dateKey]) {
const eventHour = parseInt(event.time.split(':')[0]);
// Check if the same hour or adjacent hour for therapy (which takes longer)
if (eventHour === timeHour || (event.type === 'therapy' && eventHour + 1 === timeHour) ||
(type === 'therapy' && eventHour === timeHour + 1)) {
hasConflict = true;
break;
}
}
if (hasConflict) {
showNotification('Time Conflict', 'This time slot conflicts with an existing appointment. Please select a different time.', 'warning');
return;
}
this.events[dateKey].push(newEvent);
// Update calendar and appointments
this.updateCalendar();
this.updateAppointments();
// Show confirmation notification
showNotification('Appointment Scheduled', `Your ${title.toLowerCase()} has been scheduled with ${provider} on ${new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric' }).format(this.selectedDate)} at ${time}.`);
}
};
// Show notification
function showNotification(title, message, type = 'success') {
const notification = document.getElementById('notification');
const notificationTitle = document.getElementById('notification-title');
const notificationMessage = document.getElementById('notification-message');
notificationTitle.textContent = title;
notificationMessage.textContent = message;
// Change icon and color based on type
const notificationIcon = notification.querySelector('.notification-icon');
if (type === 'warning') {
notificationIcon.style.background = 'var(--alert)';
notificationIcon.innerHTML = '<i>!</i>';
} else {
notificationIcon.style.background = 'var(--primary)';
notificationIcon.innerHTML = '<i>?</i>';
}
notification.classList.add('show');
// Auto hide after 4 seconds
setTimeout(closeNotification,2000);
}
function closeNotification() {
const notification = document.getElementById('notification');
notification.classList.remove('show');
}
// Initialize calendar
document.addEventListener('DOMContentLoaded', () => {
calendar.init();
});
</script>
