39 lines
765 B
Vue
39 lines
765 B
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<span class="text-h4 text-md-h3">{{ day }}</span>
|
||
|
|
<span class="text-h5 text-md-h4 grey--text text--darken-1">{{
|
||
|
|
month
|
||
|
|
}}</span>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
||
|
|
import { DateTime } from "luxon";
|
||
|
|
|
||
|
|
@Component
|
||
|
|
export default class EventDate extends Vue {
|
||
|
|
@Prop()
|
||
|
|
private readonly date!: DateTime;
|
||
|
|
|
||
|
|
private get day(): string {
|
||
|
|
return this.date.toFormat("dd.");
|
||
|
|
}
|
||
|
|
|
||
|
|
private get month(): string {
|
||
|
|
return this.date.toFormat("MM.");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import "~vuetify/src/styles/settings/_variables";
|
||
|
|
|
||
|
|
div {
|
||
|
|
min-width: 95px;
|
||
|
|
|
||
|
|
@media #{map-get($display-breakpoints, "md-and-up")} {
|
||
|
|
min-width: 130px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|