diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts
index cb76246..c6d4817 100644
--- a/frontend/src/app/app.config.ts
+++ b/frontend/src/app/app.config.ts
@@ -1,5 +1,11 @@
-import { DATE_PIPE_DEFAULT_OPTIONS, IMAGE_LOADER, ImageLoaderConfig } from '@angular/common';
+import {
+  DATE_PIPE_DEFAULT_OPTIONS,
+  IMAGE_LOADER,
+  ImageLoaderConfig,
+  registerLocaleData
+} from '@angular/common';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import localeCa from '@angular/common/locales/en-CA';
 import {
   ApplicationConfig,
   inject,
@@ -16,6 +22,8 @@ import { environment } from '../environments/environment';
 import { routes } from './app.routes';
 import { LOCALE } from './config';
 
+registerLocaleData(localeCa, LOCALE);
+
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
diff --git a/frontend/src/app/screens/events/event.types.ts b/frontend/src/app/screens/events/event.types.ts
index c15e772..912ce74 100644
--- a/frontend/src/app/screens/events/event.types.ts
+++ b/frontend/src/app/screens/events/event.types.ts
@@ -1,5 +1,6 @@
 import { type Event, EventStatusEnum } from '@csss-api';
 import { CalendarEvent } from 'angular-calendar';
+import { LOCALE } from '../../config';
 
 const TIME_RANGE_FORMATTER: Intl.DateTimeFormatOptions = {
   hour: 'numeric',
@@ -55,8 +56,8 @@ export class KioskEvent implements Event {
   }
 
   get timeRange(): string {
-    const start = this.startDatetime.toLocaleTimeString('en-CA', TIME_RANGE_FORMATTER);
-    const end = this.endDatetime.toLocaleTimeString('en-CA', TIME_RANGE_FORMATTER);
+    const start = this.startDatetime.toLocaleTimeString(LOCALE, TIME_RANGE_FORMATTER);
+    const end = this.endDatetime.toLocaleTimeString(LOCALE, TIME_RANGE_FORMATTER);
 
     return `${start} - ${end}`;
   }
@@ -65,8 +66,8 @@ export class KioskEvent implements Event {
    * Used if the event is multi-day.
    */
   get datetimeRange(): [string, string] {
-    const start = this.startDatetime.toLocaleString('en-CA', DATETIME_RANGE_FORMATTER);
-    const end = this.endDatetime.toLocaleString('en-CA', DATETIME_RANGE_FORMATTER);
+    const start = this.startDatetime.toLocaleString(LOCALE, DATETIME_RANGE_FORMATTER);
+    const end = this.endDatetime.toLocaleString(LOCALE, DATETIME_RANGE_FORMATTER);
 
     return [start, end];
   }