Booking Calendar

Manage your availability and bookings

December 2024

Sun
Mon
Tue
Wed
Thu
Fri
Sat
Time

Legend

Available
Booked
Blocked
Pending
Today

Today's Schedule

This Month

Total Bookings 28
Available Days 12
Revenue ₹2,45,000

Recent Bookings

Client Event Date Time Status Actions
Client

Priya & Arjun

priya.sharma@email.com

 Wedding Photography Dec 15, 2024 10:00 AM - 8:00 PM Confirmed
Client

Rahul & Neha

rahul.gupta@email.com

 Engagement Session Dec 18, 2024 4:00 PM - 7:00 PM Pending
`; } emailClient(bookingId) { const booking = this.bookings.find(b => b.id === bookingId); if (!booking) { this.showError('Booking not found.'); return; } const subject = `Booking Confirmation - ${booking.eventType} on ${new Date(booking.date).toLocaleDateString()}`; const body = `Dear ${booking.clientName}, Thank you for booking with Rajesh Photography! Here are your booking details: - Event: ${booking.eventType} - Date: ${new Date(booking.date).toLocaleDateString()} - Time: ${booking.startTime} - ${booking.endTime} - Location: ${booking.location} - Total Amount: ₹${booking.price.toLocaleString()} - Advance Paid: ₹${(booking.advancePaid || 0).toLocaleString()} - Balance Due: ₹${(booking.price - (booking.advancePaid || 0)).toLocaleString()} We look forward to capturing your special moments! Best regards, Rajesh Photography Team Contact: +91 98765 43210 Email: contact@rajeshphotography.com`; const mailtoLink = `mailto:${booking.clientEmail}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`; window.location.href = mailtoLink; } // Block time and bulk availability functions blockTime() { const startDate = document.getElementById('blockStartDate').value; const endDate = document.getElementById('blockEndDate').value; const blockType = document.getElementById('blockType').value; if (!startDate || !endDate) { this.showError('Please select start and end dates.'); return; } if (new Date(startDate) > new Date(endDate)) { this.showError('End date must be after start date.'); return; } this.showSuccess('Time period blocked successfully!'); this.closeModal('blockTimeModal'); this.refreshCalendar(); } setBulkAvailability() { const startDate = document.getElementById('bulkDateStart').value; const endDate = document.getElementById('bulkDateEnd').value; if (!startDate || !endDate) { this.showError('Please select date range.'); return; } if (new Date(startDate) > new Date(endDate)) { this.showError('End date must be after start date.'); return; } this.showSuccess('Bulk availability set successfully!'); this.closeModal('bulkAvailabilityModal'); this.refreshCalendar(); } exportCalendar() { this.showSuccess('Calendar exported successfully! Download will begin shortly.'); } // Schedule display updateSelectedDaySchedule() { const dateStr = this.selectedDate.toISOString().split('T')[0]; const dayBookings = this.bookings.filter(booking => booking.date === dateStr); const content = document.getElementById('dayScheduleContent'); if (!content) return; if (dayBookings.length === 0) { content.innerHTML = `

No bookings for this day

`; return; } let scheduleHTML = ''; dayBookings.forEach(booking => { const statusClass = booking.status === 'confirmed' ? 'booked' : 'available'; const statusBg = booking.status === 'confirmed' ? 'harmony-green' : 'celebration-orange'; const statusText = booking.status === 'confirmed' ? 'Confirmed' : 'Pending'; scheduleHTML += `

${booking.startTime} - ${booking.endTime}

${booking.eventType}

${booking.clientName}

${statusText}
`; }); content.innerHTML = scheduleHTML; } quickBookForSelectedDate() { const dateStr = this.selectedDate.toISOString().split('T')[0]; document.getElementById('eventDate').value = dateStr; this.openQuickBookModal(); } // Error and success handling showError(message) { this.showNotification(message, 'error'); } showSuccess(message) { this.showNotification(message, 'success'); } showNotification(message, type) { // Create notification element const notification = document.createElement('div'); notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm transition-all duration-300 ${ type === 'error' ? 'bg-red-500 text-white' : 'bg-green-500 text-white' }`; notification.innerHTML = `
${message}
`; document.body.appendChild(notification); // Auto remove after 5 seconds setTimeout(() => { if (notification.parentElement) { notification.remove(); } }, 5000); } } // Global functions for HTML onclick handlers function openQuickBookModal() { bookingCalendar.openQuickBookModal(); } function openBlockTimeModal() { bookingCalendar.openBlockTimeModal(); } function openBulkAvailabilityModal() { bookingCalendar.openBulkAvailabilityModal(); } function closeModal(modalId) { bookingCalendar.closeModal(modalId); } function createBooking() { bookingCalendar.createBooking(); } function blockTime() { bookingCalendar.blockTime(); } function setBulkAvailability() { bookingCalendar.setBulkAvailability(); } function exportCalendar() { bookingCalendar.exportCalendar(); } function viewBookingDetails(bookingId) { bookingCalendar.viewBookingDetails(bookingId); } function editBooking(bookingId) { bookingCalendar.editBooking(bookingId); } function updateBooking() { bookingCalendar.updateBooking(); } function cancelBooking(bookingId) { bookingCalendar.cancelBooking(bookingId); } function printBooking(bookingId) { bookingCalendar.printBooking(bookingId); } function emailClient(bookingId) { bookingCalendar.emailClient(bookingId); } function duplicateBooking() { const originalBooking = bookingCalendar.bookings.find(b => b.id === document.getElementById('editBookingId').value); if (!originalBooking) return; const newBookingId = 'B' + Date.now(); document.getElementById('editBookingId').value = newBookingId; document.getElementById('editEventDate').value = ''; document.getElementById('editBookingStatus').value = 'pending'; document.getElementById('editPaymentStatus').value = 'pending'; document.getElementById('editAdvancePaid').value = '0'; const currentNotes = document.getElementById('editInternalNotes').value; document.getElementById('editInternalNotes').value = `[Duplicated from booking ${originalBooking.id}] ${currentNotes}`; bookingCalendar.showSuccess('Booking duplicated! Please select a new date and save to create the duplicate booking.'); } function rescheduleBooking() { const bookingId = document.getElementById('editBookingId').value; const newDate = document.getElementById('editEventDate').value; const newStartTime = document.getElementById('editStartTime').value; const newEndTime = document.getElementById('editEndTime').value; if (!newDate || !newStartTime || !newEndTime) { bookingCalendar.showError('Please select new date and time for rescheduling.'); return; } if (confirm('Are you sure you want to reschedule this booking? This will update the booking status and send notifications to the client.')) { document.getElementById('editBookingStatus').value = 'rescheduled'; const currentNotes = document.getElementById('editInternalNotes').value; const rescheduleNote = `\n[Rescheduled on ${new Date().toLocaleDateString()}] - Moved to ${newDate} ${newStartTime}-${newEndTime}`; document.getElementById('editInternalNotes').value = currentNotes + rescheduleNote; bookingCalendar.updateBooking(); bookingCalendar.showSuccess('Booking rescheduled successfully! Client will be notified.'); } } // Initialize the booking calendar when DOM is loaded let bookingCalendar; document.addEventListener('DOMContentLoaded', function() { bookingCalendar = new BookingCalendar(); }); // Toggle notifications panel function toggleNotifications() { window.location.href = '/05_communication/notifications-center.html'; } // Toggle profile menu dropdown function toggleProfileMenu() { window.location.href = '/07_vendors/vendor-profile-management.html'; } // View all bookings function viewAllBookings() { bookingCalendar.showInfo('Showing all bookings...'); // Scroll to calendar and switch to month view to show all bookings document.getElementById('monthViewContainer').scrollIntoView({ behavior: 'smooth' }); }