shift updated fixes

map/app/public/js/admin.js

@@ -3,6 +3,16 @@ let adminMap = null;
 let startMarker = null;
 let storedQRCodes = {};
 
+// Utility function to create a local date from YYYY-MM-DD string
+// This prevents timezone issues when displaying dates
+function createLocalDate(dateString) {
+    if (!dateString) return null;
+    const parts = dateString.split('-');
+    if (parts.length !== 3) return new Date(dateString); // fallback to original behavior
+    // Create date using local timezone (year, month-1, day)
+    return new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]));
+}
+
 // A function to set viewport dimensions for admin page
 function setAdminViewportDimensions() {
     const doc = document.documentElement;
@@ -1162,7 +1172,7 @@ function displayAdminShifts(shifts) {
     }
     
     list.innerHTML = shifts.map(shift => {
-        const shiftDate = new Date(shift.Date);
+        const shiftDate = createLocalDate(shift.Date);
         const signupCount = shift.signups ? shift.signups.length : 0;
         
         console.log(`Shift "${shift.Title}" (ID: ${shift.ID}) has ${signupCount} volunteers:`, shift.signups?.map(s => s['User Email']) || []);
@@ -2031,7 +2041,7 @@ async function showShiftUserModal(shiftId, shiftData) {
     
     // Update modal title and info
     document.getElementById('modal-shift-title').textContent = shiftData.Title;
-    const shiftDate = new Date(shiftData.Date);
+    const shiftDate = createLocalDate(shiftData.Date);
     document.getElementById('modal-shift-details').textContent = 
         `${shiftDate.toLocaleDateString()} | ${shiftData['Start Time']} - ${shiftData['End Time']} | ${shiftData.Location || 'TBD'}`;
     

map/app/public/js/shifts.js

@@ -4,6 +4,16 @@ let mySignups = [];
 let currentView = 'grid'; // 'grid' or 'calendar'
 let currentCalendarDate = new Date(); // For calendar navigation
 
+// Utility function to create a local date from YYYY-MM-DD string
+// This prevents timezone issues when displaying dates
+function createLocalDate(dateString) {
+    if (!dateString) return null;
+    const parts = dateString.split('-');
+    if (parts.length !== 3) return new Date(dateString); // fallback to original behavior
+    // Create date using local timezone (year, month-1, day)
+    return new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]));
+}
+
 // Function to set viewport dimensions for shifts page
 function setShiftsViewportDimensions() {
     const doc = document.documentElement;
@@ -108,7 +118,7 @@ function displayShifts(shifts) {
     grid.innerHTML = shifts.map(shift => {
         const isSignedUp = mySignups.some(signup => signup.shift_id === shift.ID);
         const isFull = shift['Current Volunteers'] >= shift['Max Volunteers'];
-        const shiftDate = new Date(shift.Date);
+        const shiftDate = createLocalDate(shift.Date);
         
         return `
             <div class="shift-card ${isSignedUp ? 'signed-up' : ''} ${isFull && !isSignedUp ? 'full' : ''}">
@@ -157,7 +167,7 @@ function displayMySignups() {
     }).filter(s => s.shift); // Only show signups where we can find the shift details
     
     list.innerHTML = signupsWithDetails.map(signup => {
-        const shiftDate = new Date(signup.shift.Date);
+        const shiftDate = createLocalDate(signup.shift.Date);
         return `
             <div class="signup-item">
                 <div>
@@ -280,7 +290,7 @@ function handleMySignupsClick(e) {
 
 // New function to generate calendar URLs
 function generateCalendarUrls(shift) {
-    const shiftDate = new Date(shift.Date);
+    const shiftDate = createLocalDate(shift.Date);
     
     // Parse start and end times
     const [startHour, startMinute] = shift['Start Time'].split(':').map(n => parseInt(n));
@@ -497,7 +507,7 @@ function displayShifts(shifts) {
     grid.innerHTML = shifts.map(shift => {
         const isSignedUp = mySignups.some(signup => signup.shift_id === shift.ID);
         const isFull = shift['Current Volunteers'] >= shift['Max Volunteers'];
-        const shiftDate = new Date(shift.Date);
+        const shiftDate = createLocalDate(shift.Date);
         
         return `
             <div class="shift-card ${isSignedUp ? 'signed-up' : ''} ${isFull && !isSignedUp ? 'full' : ''}">
@@ -547,7 +557,7 @@ function displayMySignups() {
     }).filter(s => s.shift); // Only show signups where we can find the shift details
     
     list.innerHTML = signupsWithDetails.map(signup => {
-        const shiftDate = new Date(signup.shift.Date);
+        const shiftDate = createLocalDate(signup.shift.Date);
         return `
             <div class="signup-item">
                 <div>
@@ -593,7 +603,7 @@ function showShiftPopup(shift, targetElement) {
     
     const isSignedUp = mySignups.some(signup => signup.shift_id === shift.ID);
     const isFull = shift['Current Volunteers'] >= shift['Max Volunteers'];
-    const shiftDate = new Date(shift.Date);
+    const shiftDate = createLocalDate(shift.Date);
     
     popup.innerHTML = `
         <h4>${escapeHtml(shift.Title)}</h4>
@@ -990,10 +1000,12 @@ function createCalendarDay(dayNumber, isOtherMonth, date) {
     const shiftsContainer = document.createElement('div');
     shiftsContainer.className = 'calendar-shifts';
     
-    const dateString = date.toISOString().split('T')[0];
+    // Create a consistent date string for comparison without timezone conversion
+    const calendarDateString = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+    
+    // Debug logging to verify date matching
     const dayShifts = allShifts.filter(shift => {
-        const shiftDate = new Date(shift.Date);
-        return shiftDate.toISOString().split('T')[0] === dateString;
+        return shift.Date === calendarDateString;
     });
     
     dayShifts.forEach(shift => {
@@ -1052,7 +1064,7 @@ function showShiftPopup(shift, targetElement) {
     
     const isSignedUp = mySignups.some(signup => signup.shift_id === shift.ID);
     const isFull = shift['Current Volunteers'] >= shift['Max Volunteers'];
-    const shiftDate = new Date(shift.Date);
+    const shiftDate = createLocalDate(shift.Date);
     
     popup.innerHTML = `
         <h4>${escapeHtml(shift.Title)}</h4>