Adding Weekday to .datetime-container-header
This commit is contained in:
parent
be8a206b0d
commit
a50b9128fe
|
@ -4,7 +4,11 @@
|
||||||
:class="{ small }"
|
:class="{ small }"
|
||||||
:style="`--small: ${smallStyle}`"
|
: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">
|
<div class="datetime-container-content">
|
||||||
<time :datetime="dateObj.toISOString()" class="day block font-semibold">{{
|
<time :datetime="dateObj.toISOString()" class="day block font-semibold">{{
|
||||||
day
|
day
|
||||||
|
@ -12,12 +16,12 @@
|
||||||
<time
|
<time
|
||||||
:datetime="dateObj.toISOString()"
|
:datetime="dateObj.toISOString()"
|
||||||
class="month font-semibold block uppercase py-1 px-0"
|
class="month font-semibold block uppercase py-1 px-0"
|
||||||
>{{ month }}</time
|
>{{ month }}</time>
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { localeShortWeekDayNames } from "@/utils/datetime";
|
||||||
import { computed } from "vue";
|
import { computed } from "vue";
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
|
@ -38,6 +42,10 @@ const day = computed<string>(() =>
|
||||||
dateObj.value.toLocaleString(undefined, { day: "numeric" })
|
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"));
|
const smallStyle = computed<string>(() => (props.small ? "1.2" : "2"));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -51,6 +59,13 @@ div.datetime-container {
|
||||||
height: calc(10px * var(--small));
|
height: calc(10px * var(--small));
|
||||||
background: #f3425f;
|
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 {
|
.datetime-container-content {
|
||||||
height: calc(30px * var(--small));
|
height: calc(30px * var(--small));
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue