`;
slotsContainer.appendChild(slotEl);
});
document.querySelectorAll('.book-slot-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const { slot, name, duration } = e.target.dataset;
scheduleMeeting(name, parseInt(duration), slot);
e.target.closest('.p-3').innerHTML = `
Booked!`;
});
});
};
const renderSchedule = () => {
scheduleList.innerHTML = '';
const sortedMeetings = scheduledMeetings.sort((a,b) => new Date(a.start) - new Date(b.start));
if (sortedMeetings.length === 0) {
scheduleList.innerHTML = `
| No meetings scheduled. |
`;
return;
}
sortedMeetings.forEach(meeting => {
const row = document.createElement('tr');
row.innerHTML = `
${formatDate(meeting.start)} |
${formatTime(meeting.start)} |
${meeting.name} |
${meeting.duration} min |
|
`;
scheduleList.appendChild(row);
});
};
// --- EVENT HANDLERS --- //
blockTimeForm.addEventListener('submit', (e) => {
e.preventDefault();
const date = document.getElementById('block-date').value;
const startTime = document.getElementById('block-start-time').value;
const endTime = document.getElementById('block-end-time').value;
if (!date || !startTime || !endTime) return;
unavailableBlocks.push({
id: Date.now(),
start: new Date(`${date}T${startTime}`).toISOString(),
end: new Date(`${date}T${endTime}`).toISOString(),
});
blockTimeForm.reset();
renderUnavailableBlocks();
});
proposeForm.addEventListener('submit', (e) => {
e.preventDefault();
const meetingName = document.getElementById('meeting-name').value;
const duration = parseInt(document.getElementById('meeting-duration').value);
const searchDate = document.getElementById('search-start-date').value;
const slots = findAvailableSlots(meetingName, duration, searchDate);
renderSlots(slots, meetingName, duration);
});
window.deleteBlock = (id) => {
unavailableBlocks = unavailableBlocks.filter(b => b.id !== id);
renderUnavailableBlocks();
};
window.deleteMeeting = (id) => {
scheduledMeetings = scheduledMeetings.filter(m => m.id !== id);
renderSchedule();
};
downloadPdfBtn.addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' });
pdf.setFontSize(18);
pdf.text("Meeting Schedule", 40, 40);
pdf.autoTable({
html: '#schedule-list',
startY: 60,
head: [['Date', 'Time', 'Meeting Title', 'Duration', '']],
theme: 'grid',
headStyles: { fillColor: [41, 128, 185] },
columnStyles: { 4: { cellWidth: 'wrap' } } // To handle the empty action column
});
pdf.save('Meeting_Schedule.pdf');
});
// --- TAB NAVIGATION --- //
const updateTabs = (targetTab) => {
currentTab = tabs.indexOf(targetTab);
tabContents.forEach(content => content.classList.add('hidden'));
tabButtons.forEach(button => button.classList.remove('active'));
const activeContent = document.getElementById(`${targetTab}-tab`);
const activeButton = document.querySelector(`.tab-btn[data-tab="${targetTab}"]`);
if(activeContent) activeContent.classList.remove('hidden');
if(activeButton) activeButton.classList.add('active');
prevBtn.disabled = currentTab === 0;
nextBtn.disabled = currentTab === tabs.length - 1;
if (targetTab === 'schedule') {
renderSchedule();
}
};
tabButtons.forEach(button => {
button.addEventListener('click', () => updateTabs(button.dataset.tab));
});
prevBtn.addEventListener('click', () => {
if (currentTab > 0) {
updateTabs(tabs[currentTab - 1]);
}
});
nextBtn.addEventListener('click', () => {
if (currentTab < tabs.length - 1) {
updateTabs(tabs[currentTab + 1]);
}
});
// --- INITIALIZATION --- //
const loadSampleData = () => {
weeklyAvailability = {
'Monday': { isAvailable: true, start: '09:00', end: '17:00' },
'Tuesday': { isAvailable: true, start: '09:00', end: '17:00' },
'Wednesday': { isAvailable: true, start: '09:00', end: '13:00' },
'Thursday': { isAvailable: true, start: '09:00', end: '17:00' },
'Friday': { isAvailable: true, start: '09:00', end: '16:00' },
};
const today = new Date();
const tomorrow = new Date(); tomorrow.setDate(today.getDate() + 1);
scheduledMeetings = [
{ id: 1, name: 'Project Kickoff', start: new Date(new Date().setDate(today.getDate() + 1)).setHours(10,0,0), end: new Date(new Date().setDate(today.getDate() + 1)).setHours(11,0,0), duration: 60 },
{ id: 2, name: 'Marketing Sync', start: new Date(new Date().setDate(today.getDate() + 2)).setHours(14,30,0), end: new Date(new Date().setDate(today.getDate() + 2)).setHours(15,0,0), duration: 30 },
];
// Set default search date to today
document.getElementById('search-start-date').valueAsDate = new Date();
renderAvailability();
renderUnavailableBlocks();
renderSchedule();
updateTabs('availability');
};
loadSampleData();
});
