Not available on this day.
';
return;
}
const startTime = new Date(`${date.toDateString()} ${config.startTime}`);
const endTime = new Date(`${date.toDateString()} ${config.endTime}`);
const bookedTimes = meetings[date.toISOString().split('T')[0]]?.map(m => m.time) || [];
let currentTime = startTime;
while(currentTime < endTime) {
const timeStr = currentTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'time-slot-btn p-2 rounded-lg text-sm';
btn.textContent = timeStr;
if(bookedTimes.includes(timeStr)) {
btn.disabled = true;
}
btn.addEventListener('click', () => openBookingModal(date, timeStr));
container.appendChild(btn);
currentTime.setMinutes(currentTime.getMinutes() + config.duration + config.break);
}
};
// --- Meeting Functions ---
const renderScheduledMeetings = (date) => {
const container = getElem('scheduled-meetings-list');
const dateStr = date.toISOString().split('T')[0];
const dayMeetings = meetings[dateStr] || [];
container.innerHTML = '';
if (dayMeetings.length === 0) {
container.innerHTML = '
No meetings scheduled for this day.
';
return;
}
dayMeetings.sort((a,b) => new Date('1970/01/01 ' + a.time.replace(/( AM| PM)/, '')) - new Date('1970/01/01 ' + b.time.replace(/( AM| PM)/, '')));
dayMeetings.forEach(meeting => {
container.innerHTML += `
${meeting.time}
${meeting.name} (${meeting.email})
`;
});
};
// --- Modal & Form Handling ---
const openBookingModal = (date, time) => {
getElem('booking-date').value = date.toISOString().split('T')[0];
getElem('booking-time').value = time;
getElem('modal-title').textContent = `Book Meeting for ${time}`;
const modal = getElem('booking-modal');
modal.classList.remove('hidden');
setTimeout(() => modal.classList.remove('opacity-0'), 10);
};
const closeBookingModal = () => {
const modal = getElem('booking-modal');
modal.classList.add('opacity-0');
setTimeout(() => modal.classList.add('hidden'), 300);
};
getElem('booking-form').addEventListener('submit', (e) => {
e.preventDefault();
const dateStr = getElem('booking-date').value;
const newMeeting = {
time: getElem('booking-time').value,
name: getElem('booker-name').value,
email: getElem('booker-email').value
};
if (!meetings[dateStr]) meetings[dateStr] = [];
meetings[dateStr].push(newMeeting);
closeBookingModal();
renderCalendar();
if (selectedDate) {
renderTimeSlots(selectedDate);
renderScheduledMeetings(selectedDate);
}
});
// --- PDF Generation ---
const downloadPDF = () => {
if(!selectedDate) {
alert("Please select a date to download the schedule.");
return;
}
const dateStr = selectedDate.toISOString().split('T')[0];
const dayMeetings = meetings[dateStr] || [];
if (dayMeetings.length === 0) {
alert("No meetings scheduled for the selected date.");
return;
}
dayMeetings.sort((a,b) => new Date('1970/01/01 ' + a.time.replace(/( AM| PM)/, '')) - new Date('1970/01/01 ' + b.time.replace(/( AM| PM)/, '')));
let html = `
Meeting Schedule
${selectedDate.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
`;
dayMeetings.forEach(m => {
html += `
${m.time}
Name: ${m.name}
Email: ${m.email}
`;
});
html += '
';
getElem('pdf-output').innerHTML = html;
const { jsPDF } = window.jspdf;
html2canvas(getElem('pdf-output'), { scale: 2 }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'p', unit: 'px', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save(`Schedule_${dateStr}.pdf`);
});
};
// --- Event Listeners & Initial Load ---
tabBtns.forEach((btn, i) => btn.addEventListener('click', () => changeTab(i + 1)));
getElem('prev-month-btn').addEventListener('click', () => { currentDate.setMonth(currentDate.getMonth() - 1); renderCalendar(); });
getElem('next-month-btn').addEventListener('click', () => { currentDate.setMonth(currentDate.getMonth() + 1); renderCalendar(); });
getElem('save-config-btn').addEventListener('click', saveConfig);
getElem('cancel-btn').addEventListener('click', closeBookingModal);
getElem('download-btn').addEventListener('click', downloadPDF);
const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
getElem('available-days').innerHTML = daysOfWeek.map((day, i) => `
`).join('');
saveConfig();
renderCalendar();
changeTab(1);
});
