Adding Weekday to .datetime-container-header

js/src/components/Event/DateCalendarIcon.vue

@@ -4,7 +4,11 @@
     :class="{ small }"
     :style="`--small: ${smallStyle}`"
   >
-    <div class="datetime-container-header" />
+    <div class="datetime-container-header">
+      <time :datetime="dateObj.toISOString()" class="weekday">{{
+        weekday
+      }}</time>
+    </div>
     <div class="datetime-container-content">
       <time :datetime="dateObj.toISOString()" class="day block font-semibold">{{
         day
@@ -12,12 +16,12 @@
       <time
         :datetime="dateObj.toISOString()"
         class="month font-semibold block uppercase py-1 px-0"
-        >{{ month }}</time
+        >{{ month }}</time>
-      >
     </div>
   </div>
 </template>
 <script lang="ts" setup>
+import { localeShortWeekDayNames } from "@/utils/datetime";
 import { computed } from "vue";
 
 const props = withDefaults(
@@ -38,6 +42,10 @@ const day = computed<string>(() =>
   dateObj.value.toLocaleString(undefined, { day: "numeric" })
 );
 
+const weekday = computed<string>(() =>
+  dateObj.value.toLocaleString(undefined, { weekday: "short" })
+);
+
 const smallStyle = computed<string>(() => (props.small ? "1.2" : "2"));
 </script>
 
@@ -51,6 +59,13 @@ div.datetime-container {
     height: calc(10px * var(--small));
     background: #f3425f;
   }
+  .datetime-container-header .weekday
+  {
+    font-size: calc(9px * var(--small));
+    font-weight: bold;
+    vertical-align: top;
+    line-height: calc(9px * var(--small));
+  }
   .datetime-container-content {
     height: calc(30px * var(--small));
   }