${isSignedUp
- ? `
`
+ ? `
+ ${generateCalendarDropdown(shift)}`
: isFull
? '
'
: `
`
@@ -141,7 +142,10 @@ function displayMySignups() {
${escapeHtml(signup.shift.Title)}
📅 ${shiftDate.toLocaleDateString()} ⏰ ${signup.shift['Start Time']} - ${signup.shift['End Time']}
+ ${generateCalendarDropdown(signup.shift)}
+
+
`;
}).join('');
@@ -159,15 +163,40 @@ function setupShiftCardListeners() {
const newGrid = grid.cloneNode(true);
grid.parentNode.replaceChild(newGrid, grid);
- // Add click listener for signup buttons
+ // Add click listener for all buttons
newGrid.addEventListener('click', async (e) => {
+ // Handle signup buttons
if (e.target.classList.contains('signup-btn')) {
const shiftId = e.target.getAttribute('data-shift-id');
await signupForShift(shiftId);
- } else if (e.target.classList.contains('cancel-signup-btn')) {
+ }
+ // Handle cancel buttons
+ else if (e.target.classList.contains('cancel-signup-btn')) {
const shiftId = e.target.getAttribute('data-shift-id');
await cancelSignup(shiftId);
}
+ // Handle calendar toggle buttons
+ else if (e.target.classList.contains('calendar-toggle')) {
+ e.stopPropagation();
+ const dropdown = e.target.closest('.calendar-dropdown');
+ const options = dropdown.querySelector('.calendar-options');
+ const isOpen = options.style.display !== 'none';
+
+ // Close all other dropdowns
+ document.querySelectorAll('.calendar-options').forEach(opt => {
+ opt.style.display = 'none';
+ });
+
+ // Toggle this dropdown
+ options.style.display = isOpen ? 'none' : 'block';
+ }
+ // Handle calendar option clicks
+ else if (e.target.closest('.calendar-option')) {
+ e.stopPropagation();
+ const dropdown = e.target.closest('.calendar-dropdown');
+ const options = dropdown.querySelector('.calendar-options');
+ options.style.display = 'none';
+ }
});
}
@@ -180,12 +209,35 @@ function setupMySignupsListeners() {
const newList = list.cloneNode(true);
list.parentNode.replaceChild(newList, list);
- // Add click listener for cancel buttons
+ // Add click listener for all interactions
newList.addEventListener('click', async (e) => {
+ // Handle cancel buttons
if (e.target.classList.contains('cancel-signup-btn')) {
const shiftId = e.target.getAttribute('data-shift-id');
await cancelSignup(shiftId);
}
+ // Handle calendar toggle buttons
+ else if (e.target.classList.contains('calendar-toggle')) {
+ e.stopPropagation();
+ const dropdown = e.target.closest('.calendar-dropdown');
+ const options = dropdown.querySelector('.calendar-options');
+ const isOpen = options.style.display !== 'none';
+
+ // Close all other dropdowns
+ document.querySelectorAll('.calendar-options').forEach(opt => {
+ opt.style.display = 'none';
+ });
+
+ // Toggle this dropdown
+ options.style.display = isOpen ? 'none' : 'block';
+ }
+ // Handle calendar option clicks
+ else if (e.target.closest('.calendar-option')) {
+ e.stopPropagation();
+ const dropdown = e.target.closest('.calendar-dropdown');
+ const options = dropdown.querySelector('.calendar-options');
+ options.style.display = 'none';
+ }
});
}
@@ -290,4 +342,209 @@ function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = String(text);
return div.innerHTML;
-}
\ No newline at end of file
+}
+
+// Add these calendar URL generation functions after the existing functions
+function generateCalendarUrls(shift) {
+ const shiftDate = new Date(shift.Date);
+
+ // Parse start and end times
+ const [startHour, startMinute] = shift['Start Time'].split(':').map(n => parseInt(n));
+ const [endHour, endMinute] = shift['End Time'].split(':').map(n => parseInt(n));
+
+ // Create start and end datetime objects
+ const startDate = new Date(shiftDate);
+ startDate.setHours(startHour, startMinute, 0, 0);
+
+ const endDate = new Date(shiftDate);
+ endDate.setHours(endHour, endMinute, 0, 0);
+
+ // Format dates for different calendar formats
+ const formatGoogleDate = (date) => {
+ const year = date.getFullYear();
+ const month = String(date.getMonth() + 1).padStart(2, '0');
+ const day = String(date.getDate()).padStart(2, '0');
+ const hours = String(date.getHours()).padStart(2, '0');
+ const minutes = String(date.getMinutes()).padStart(2, '0');
+ return `${year}${month}${day}T${hours}${minutes}00`;
+ };
+
+ const formatISODate = (date) => {
+ return date.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
+ };
+
+ // Event details
+ const title = shift.Title;
+ const description = shift.Description || 'Volunteer shift';
+ const location = shift.Location || '';
+
+ // Google Calendar URL
+ const googleStartStr = formatGoogleDate(startDate);
+ const googleEndStr = formatGoogleDate(endDate);
+ const googleParams = new URLSearchParams({
+ action: 'TEMPLATE',
+ text: title,
+ dates: `${googleStartStr}/${googleEndStr}`,
+ details: description,
+ location: location
+ });
+ const googleUrl = `https://calendar.google.com/calendar/render?${googleParams.toString()}`;
+
+ // Outlook Web Calendar URL
+ const outlookStartStr = startDate.toISOString();
+ const outlookEndStr = endDate.toISOString();
+ const outlookParams = new URLSearchParams({
+ path: '/calendar/action/compose',
+ rru: 'addevent',
+ subject: title,
+ startdt: outlookStartStr,
+ enddt: outlookEndStr,
+ body: description,
+ location: location
+ });
+ const outlookUrl = `https://outlook.live.com/calendar/0/deeplink/compose?${outlookParams.toString()}`;
+
+ // Apple Calendar (.ics file) - we'll generate this dynamically
+ const icsContent = [
+ 'BEGIN:VCALENDAR',
+ 'VERSION:2.0',
+ 'PRODID:-//BNKops//Volunteer Shifts//EN',
+ 'BEGIN:VEVENT',
+ `UID:${shift.ID}-${Date.now()}@bnkops.com`,
+ `DTSTART:${formatISODate(startDate)}`,
+ `DTEND:${formatISODate(endDate)}`,
+ `SUMMARY:${title}`,
+ `DESCRIPTION:${description.replace(/\n/g, '\\n')}`,
+ `LOCATION:${location}`,
+ 'STATUS:CONFIRMED',
+ 'END:VEVENT',
+ 'END:VCALENDAR'
+ ].join('\r\n');
+
+ // Create a data URL for the .ics file
+ const icsDataUrl = 'data:text/calendar;charset=utf-8,' + encodeURIComponent(icsContent);
+
+ return {
+ google: googleUrl,
+ outlook: outlookUrl,
+ apple: icsDataUrl,
+ icsFilename: `${title.replace(/[^a-z0-9]/gi, '_')}_${shift.ID}.ics`
+ };
+}
+
+// Update calendar dropdown HTML generator (remove onclick handlers)
+function generateCalendarDropdown(shift) {
+ const urls = generateCalendarUrls(shift);
+ return `
+ 
Google Calendar
+ 
Outlook
+ 
Apple Calendar
+