OEKZident.de/ovdashboard
2
0
Fork 0
Code Releases 1 Packages Activity

Add time to EventDate

Browse source
This commit is contained in:
Jörn-Michael Miehe 2022-09-15 01:12:45 +00:00
parent e4056f3825
commit ef6582bc0a
1 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
ui/src/components/calendar/EventDate.vue
View file

@ -1,9 +1,18 @@
<template> <template>
<div class="d-flex align-end justify-center mr-1 mr-md-2"> <div class="d-flex justify-center mr-1 mr-md-2">
<span class="d-flex text-h4 text-md-h3">{{ day }}</span> <div class="d-flex flex-column align-end">
<span class="d-flex text-h5 text-md-h4 blue-grey--text text--darken-1"> <div class="d-flex align-end">
{{ month }} <span class="d-flex text-h4 text-md-h3">{{ day }}</span>
</span> <span class="d-flex text-h5 text-md-h4 blue-grey--text text--darken-1">
{{ month }}
</span>
</div>
<span
class="d-flex text-h6 text-md-h5 blue-grey--text text--lighten-1 mt-n1"
>
{{ time }}
</span>
</div>
</div> </div>
</template> </template>
@ -23,13 +32,17 @@ export default class EventDate extends Vue {
private get month(): string { private get month(): string {
return this.date.toFormat("MM."); return this.date.toFormat("MM.");
} }
private get time(): string {
return this.date.toLocaleString(DateTime.TIME_24_SIMPLE);
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~vuetify/src/styles/settings/_variables"; @import "~vuetify/src/styles/settings/_variables";
div { div.justify-center {
min-width: 95px; min-width: 95px;
@media #{map-get($display-breakpoints, "md-and-up")} { @media #{map-get($display-breakpoints, "md-and-up")} {