Fix event dates

src/components/event/EventBanner.astro

@@ -6,11 +6,11 @@ let events = await getCollection('events');
 let now = new Date().getTime();
 events
     .map((event) => {
-        event.data.start = new Date(event.data.start_date + ' ' + event.data.start_time);
-        event.data.end = new Date(event.data.end_date + ' ' + event.data.end_time);
+        event.data.start = new Date(event.data.start_date + 'T' + event.data.start_time);
+        event.data.end = new Date(event.data.end_date + 'T' + event.data.end_time);
     })
     .sort((a, b) => {
-        return new Date(a.data.start) - new Date(b.data.start);
+        return a.data.start - b.data.start;
     });
 
 events = events.filter((event) => {

src/components/event/EventBannerElement.svelte

@@ -1,92 +1,105 @@
 <script lang="ts">
     import { EventIsOngoing } from '@components/store';
-    import { formatDistanceToNow } from 'date-fns';
+    import { formatDistanceToNow, set } from 'date-fns';
     import ExportEventButton from '@components/event/ExportEventButton.svelte';
     import VideoButton from '@components/VideoButton.svelte';
+    import { onMount } from 'svelte';
     export let events = [];
     export let event_time_category: string = '';
 
     export let event_type_classes: {}[] = [{}];
     export let event_type_icons: {}[] = [{}];
 
-    let now = new Date().getTime();
     let backgroundIcon = '';
+
+    const event_duration = (event) => {
+        event.data.start = new Date(event.data.start_date + 'T' + event.data.start_time);
+        event.data.end = new Date(event.data.end_date + 'T' + event.data.end_time);
+        event.data.eventCountDown = formatDistanceToNow(event.data.start);
+        if (event.data.start_date === event.data.end_date) {
+            event.data.duration =
+                new Date(event.data.start).toLocaleString('en-US', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                    hour: 'numeric',
+                    minute: 'numeric',
+                    hour12: false,
+                }) +
+                '-' +
+                new Date(event.data.end).toLocaleString('en-US', {
+                    hour: 'numeric',
+                    minute: 'numeric',
+                    hour12: false,
+                });
+        } else {
+            event.data.duration =
+                new Date(event.data.start).toLocaleString('en-US', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                    hour: 'numeric',
+                    minute: 'numeric',
+                    hour12: false,
+                }) +
+                ' - ' +
+                new Date(event.data.end).toLocaleString('en-US', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                    hour: 'numeric',
+                    minute: 'numeric',
+                    hour12: false,
+                });
+        }
+    };
+
     events
         .map((event) => {
             if (event.data.title.toLowerCase().match('bytesize')) {
                 event.data.type = 'bytesize';
             }
-            if (event.data.start_date === event.data.end_date) {
-                event.data.duration =
-                    event.data.start.toLocaleString('en-US', {
-                        year: 'numeric',
-                        month: 'short',
-                        day: 'numeric',
-                        hour: 'numeric',
-                        minute: 'numeric',
-                        hour12: false,
-                    }) +
-                    '-' +
-                    event.data.end.toLocaleString('en-US', {
-                        hour: 'numeric',
-                        minute: 'numeric',
-                        hour12: false,
-                    });
-            } else {
-                event.data.duration =
-                    event.data.start.toLocaleString('en-US', {
-                        year: 'numeric',
-                        month: 'short',
-                        day: 'numeric',
-                        hour: 'numeric',
-                        minute: 'numeric',
-                        hour12: false,
-                    }) +
-                    ' - ' +
-                    event.data.end.toLocaleString('en-US', {
-                        year: 'numeric',
-                        month: 'short',
-                        day: 'numeric',
-                        hour: 'numeric',
-                        minute: 'numeric',
-                        hour12: false,
-                    });
-            }
+            event_duration(event);
+            return event;
         })
         .sort((a, b) => {
             return new Date(a.data.start) - new Date(b.data.start);
         });
     if (event_time_category === 'upcoming') {
         backgroundIcon = 'fa-alarm-clock';
-        events = events.filter((event) => {
-            let time_window = 1 * 24 * 60 * 60 * 1000;
-            const event_start_unix =
-                event.data.start_announcement !== undefined
-                    ? new Date(event.data.start_announcement).getTime()
-                    : event.data.start.getTime();
-            const event_end_unix = event.data.end.getTime();
+        events = events
+            .filter((event) => {
+                let time_window = 1 * 24 * 60 * 60 * 1000;
+                const event_start_unix =
+                    event.data.start_announcement !== undefined
+                        ? new Date(event.data.start_announcement).getTime()
+                        : event.data.start.getTime();
+                const event_end_unix = event.data.end.getTime();
 
-            // increase time window to a week for events longer than 5 hours
-            if (event_end_unix - event_start_unix > 5 * 60 * 60 * 1000) {
-                time_window = 7 * 24 * 60 * 60 * 1000;
-            }
-            if (event.data.start < new Date() && new Date() < event.data.end) {
-                // this is not an upcoming, but an ongoing event
-                return false;
-            }
+                // increase time window to a week for events longer than 5 hours
+                if (event_end_unix - event_start_unix > 5 * 60 * 60 * 1000) {
+                    time_window = 7 * 24 * 60 * 60 * 1000;
+                }
+                if (event.data.start < new Date() && new Date() < event.data.end) {
+                    // this is not an upcoming, but an ongoing event
+                    return false;
+                }
 
-            if (event_start_unix < now + time_window && now < event_end_unix) {
-                return true;
-            }
-        });
+                if (event_start_unix < new Date().getTime() + time_window && new Date().getTime() < event_end_unix) {
+                    return true;
+                }
+            })
+            .sort((a, b) => {
+                return a.data.start - b.data.start;
+            });
     } else if (event_time_category === 'ongoing') {
         backgroundIcon = 'fa-broadcast-tower';
         events = events
             .filter((event) => {
                 return event.data.start < new Date() && new Date() < event.data.end;
             })
             .sort((a, b) => {
-                return a.data.start - b.data.start;
+                return new Date(b.data.start) - new Date(a.data.start);
             });
 
         if (events.length > 0) {
@@ -98,14 +111,12 @@
 
     let heading_title = event_time_category.charAt(0).toUpperCase() + event_time_category.slice(1) + ' event';
     heading_title = events.length > 1 ? heading_title + 's' : heading_title;
-
-    // countdown function to event start which updates every second, by making `now` and the function reactive
-
-    setInterval(() => (now = new Date().getTime()), 1000);
-    $: countdown = (event_start) => {
-        const timeLeftString = formatDistanceToNow(event_start);
-        return timeLeftString;
-    };
+    onMount(() => {
+        events.map((event) => {
+            event_duration(event);
+            return event;
+        });
+    });
 </script>
 
 {#if events.length > 0}
@@ -158,7 +169,7 @@
                                     <div class="text-nowrap ps-1">
                                         <h5>Event starts in</h5>
                                         <span class="display-6">
-                                            {@html countdown(event.data.start)}
+                                            {@html event.data.eventCountDown}
                                         </span>
                                     </div>
                                     <div class="btn-group my-2" role="group" aria-label="Event details">

src/components/event/EventCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import VideoButton from '@components/VideoButton.svelte';
     import ExportEventButton from '@components/event/ExportEventButton.svelte';
+    import { onMount } from 'svelte';
 
     export let frontmatter = {
         title: '',
@@ -17,51 +18,60 @@
     export let time_category: string = '';
     export let showDescription: boolean = true;
     export let narrow: boolean = false;
-    let event_date;
-    if (frontmatter.start_date === frontmatter.end_date) {
-        event_date =
-            frontmatter.start.toLocaleString('en-US', {
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric',
-                hour: 'numeric',
-                minute: 'numeric',
-                hour12: false,
-            }) +
-            '-' +
-            frontmatter.end.toLocaleString('en-US', {
-                hour: 'numeric',
-                minute: 'numeric',
-                hour12: false,
-            });
-    } else {
-        event_date =
-            frontmatter.start.toLocaleString('en-US', {
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric',
-                hour: 'numeric',
-                minute: 'numeric',
-                hour12: false,
-            }) +
-            '<wbr> - <wbr>' +
-            frontmatter.end.toLocaleString('en-US', {
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric',
-                hour: 'numeric',
-                minute: 'numeric',
-                hour12: false,
-            });
-    }
+
+    const event_duration = (event: { start: Date; end: Date; start_date: Date; end_date: Date }) => {
+        let duration: string;
+        if (event.start_date === event.end_date) {
+            duration =
+                new Date(event.start).toLocaleString('en-US', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                    hour: 'numeric',
+                    minute: 'numeric',
+                    hour12: false,
+                }) +
+                '-' +
+                new Date(event.end).toLocaleString('en-US', {
+                    hour: 'numeric',
+                    minute: 'numeric',
+                    hour12: false,
+                });
+        } else {
+            duration =
+                new Date(event.start).toLocaleString('en-US', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                    hour: 'numeric',
+                    minute: 'numeric',
+                    hour12: false,
+                }) +
+                '<wbr> - <wbr>' +
+                new Date(event.end).toLocaleString('en-US', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                    hour: 'numeric',
+                    minute: 'numeric',
+                    hour12: false,
+                });
+        }
+        return duration;
+    };
     const event_type_classes = {
         bytesize: 'success',
         hackathon: 'primary',
         talk: 'info',
         training: 'warning',
     };
 
+    let event_date: string = '';
+
     const type_class = event_type_classes[type];
+    onMount(() => {
+        event_date = event_duration(frontmatter);
+    });
 </script>
 
 <div class={'card mb-3 rounded-0 rounded-end ' + type} style="border-left-color:var(--bs-{type_class});">
@@ -71,7 +81,7 @@
                 <a class="text-center" href={/events/ + slug + '/'}>
                     {frontmatter.title}
                 </a>
-                {#if time_category === 'current'}
+                {#if time_category === 'current' && frontmatter.location_url}
                     <div class="float-end d-none d-md-inline">
                         <VideoButton urls={frontmatter.location_url} btnClass="btn-danger" />
                     </div>
@@ -114,7 +124,7 @@
                 {/if}
             </div>
         </div>
-        {#if time_category === 'current'}
+        {#if time_category === 'current' && frontmatter.location_url}
             <VideoButton
                 urls={frontmatter.location_url}
                 btnClass=" d-md-none btn-danger w-100 rounded-top-0 rounded-start-0"

src/components/event/EventHeader.astro

@@ -1,40 +1,28 @@
 ---
 import ExportEventButton from '@components/event/ExportEventButton.svelte';
+import LocalDateTime from '@components/event/LocalDateTime.svelte';
 
 const { frontmatter } = Astro.props;
-const start = frontmatter.start?.toLocaleString('en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    hour12: false,
-});
-const end = frontmatter.end?.toLocaleString('en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    hour12: false,
-});
 
 if (frontmatter.start === undefined) {
-    frontmatter.start = new Date(frontmatter.start_date + ' ' + frontmatter.start_time);
+    frontmatter.start = new Date(frontmatter.start_date + 'T' + frontmatter.start_time);
 }
 if (frontmatter.end === undefined) {
-    frontmatter.end = new Date(frontmatter.end_date + ' ' + frontmatter.end_time);
+    frontmatter.end = new Date(frontmatter.end_date + 'T' + frontmatter.end_time);
 }
+const start = frontmatter.start;
+const end = frontmatter.end;
+console.log('start', frontmatter.start);
 ---
 
 <div class="">
     <div class="row row-cols-1 row-cols-md-2">
         <div class="col">
             <dl>
                 <dt>Event start:</dt>
-                <dd>{start}</dd>
+                <dd><LocalDateTime date={start} client:visible /></dd>
                 <dt>Event end:</dt>
-                <dd>{end}</dd>
+                <dd><LocalDateTime date={end} client:visible /></dd>
             </dl>
         </div>
         <div class="col">

src/components/event/EventListing.svelte

@@ -60,6 +60,11 @@
             return -1;
         });
 
+    currentEvents = filteredEvents.filter((event) => {
+        const today = new Date();
+        return event.data.start < today && event.data.end > today;
+    });
+
     $: if (currentEvents.length > 0) {
         EventIsOngoing.set(true);
     } else {