Sermon dates on view page

pages/[slug].vue

@@ -30,7 +30,7 @@
         <!-- Header -->
         <div class="border-b pb-6 mb-8">
           <h1 class="text-4xl font-bold text-gray-900 mb-2">{{ sermon.title }}</h1>
-          <p class="text-lg text-gray-600">{{ formatDate(sermon.date) }}</p>
+          <p class="text-lg text-gray-600">{{ formatDateRange(sermon) }}</p>
         </div>
 
         <!-- Section 1: Bible References -->
@@ -179,4 +179,34 @@ function formatDate(dateString: string) {
     day: 'numeric' 
   })
 }
+
+function formatDateRange(sermon: any) {
+  // Helper function to format a single date with day name
+  const formatWithDayName = (dateString: string) => {
+    const date = new Date(dateString + 'T00:00:00')
+    const dayName = date.toLocaleDateString('en-US', { weekday: 'long' })
+    const dateStr = date.toLocaleDateString('en-US', { 
+      year: 'numeric', 
+      month: '2-digit', 
+      day: '2-digit' 
+    })
+    return `${dayName}, ${dateStr}`
+  }
+
+  // Start with primary date
+  const dates = [sermon.date]
+  
+  // Add additional dates if they exist
+  if (sermon.dates) {
+    try {
+      const additionalDates = JSON.parse(sermon.dates)
+      dates.push(...additionalDates)
+    } catch {
+      // If parsing fails, just use primary date
+    }
+  }
+
+  // Format all dates and join with " - "
+  return dates.map(formatWithDayName).join(' - ')
+}
 </script>