From b4d3acc0de20725cdc2f74e26b4e53b6f0e44f9d Mon Sep 17 00:00:00 2001
From: 778a69cd <778a69cd@potsda.mn>
Date: Tue, 14 Mar 2023 23:36:12 +0100
Subject: [PATCH] new layout for calendar icon, show weekday

Co-authored-by: unkonkret <unkonkret@systemli.org>
---
 js/src/components/Event/DateCalendarIcon.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/js/src/components/Event/DateCalendarIcon.vue b/js/src/components/Event/DateCalendarIcon.vue
index 59a55e3fc..fd1e8103b 100644
--- a/js/src/components/Event/DateCalendarIcon.vue
+++ b/js/src/components/Event/DateCalendarIcon.vue
@@ -19,6 +19,7 @@
   >
     <div class="datetime-container-header" />
     <div class="datetime-container-content">
+      <time :datetime="dateObj.toISOString()" class="wkday">{{ wkday }}</time>
       <time :datetime="dateObj.toISOString()" class="day">{{ day }}</time>
       <time :datetime="dateObj.toISOString()" class="month">{{ month }}</time>
     </div>
@@ -39,6 +40,10 @@ export default class DateCalendarIcon extends Vue {
     return new Date(this.$props.date);
   }
 
+  get wkday(): string {
+    return this.dateObj.toLocaleString(undefined, { weekday: "short" });
+  }
+
   get month(): string {
     return this.dateObj.toLocaleString(undefined, { month: "short" });
   }
@@ -62,17 +67,17 @@ div.datetime-container {
   overflow-y: hidden;
   overflow-x: hidden;
   align-items: stretch;
-  width: calc(40px * var(--small));
+  width: calc(55px * var(--small));
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
-  height: calc(40px * var(--small));
+  height: calc(55px * var(--small));
   background: #fff;
 
   .datetime-container-header {
-    height: calc(10px * var(--small));
+    height: calc(12px * var(--small));
     background: #f3425f;
   }
   .datetime-container-content {
-    height: calc(30px * var(--small));
+    height: calc(43px * var(--small));
   }
 
   time {
@@ -80,6 +85,13 @@ div.datetime-container {
     font-weight: 600;
     color: $violet-3;
 
+    &.wkday {
+      padding: 2px 0;
+      font-size: 12px;
+      line-height: 12px;
+      text-transform: uppercase;
+    }
+
     &.month {
       padding: 2px 0;
       font-size: 12px;