Zaimki/routes/calendarDay.vue

<template>
    <div v-if="year.eventsByDate[day.toString()] || basic" :class="basic ? 'py-5' : ''">
        <CommunityNav v-if="!basic"/>

        <h2 class="d-flex justify-content-between">
            <span>
                <Icon v="calendar-star"/>
                <nuxt-link :to="`/${config.calendar.route}`"><T>calendar.headerLong</T></nuxt-link>
                <small class="text-muted">({{day}})</small>
            </span>
            <span v-if="basic" class="h4 mt-2">
                <nuxt-link :to="`/${ config.calendar.route }`">
                    <Icon v="tags"/>
                    <T>domain</T>/{{ config.calendar.route }}
                </nuxt-link>
            </span>
        </h2>

        <section>
            <div class="d-flex justify-content-evenly flex-column-reverse flex-md-row align-items-center align-items-md-start">
                <div class="calendar-month my-3">
                    <h3 class="text-center"><T>calendar.months.{{day.month}}</T></h3>
                    <Calendar :year="year" :month="day.month" :mark="day"/>
                </div>
                <div class="calendar-events my-3">
                    <h3>
                        {{$t('calendar.date', {year: day.year, date: $t('calendar.dates.' + day.month, {day: day.day})})}}
                    </h3>
                    <ul class="list-unstyled mb-0">
                        <li v-for="event in year.eventsByDate[day.toString()]" class="mb-2">
                            <CalendarEvent :event="event" :year="year.year" :key="event.name" ics/>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <template v-if="!basic">
            <CalendarExtra :day="day"/>

            <Separator icon="heart"/>
            <Support/>

            <section>
                <Share :title="$t('calendar.header')"/>
            </section>
        </template>
    </div>
    <NotFound v-else/>
</template>

<script>
    import { head } from "../src/helpers";
    import { calendar } from '../src/calendar/calendar';
    import { Day } from '../src/calendar/helpers';

    export default {
        layout({route}) {
            return route.query.layout === 'basic' ? 'basic' : 'default';
        },
        data() {
            const day = new Day(
                this.$route.params.year,
                this.$route.params.month,
                this.$route.params.day,
            );

            return {
                day,
                year: calendar.getYear(day.year),
                basic: this.$route.query.layout === 'basic',
            }
        },
        head() {
            return head({
                title: this.$t('calendar.headerLong'),
                banner: `calendar/${this.day}.png`,
            });
        },
    };
</script>

<style lang="scss" scoped>
    .calendar-month {
        width: min(18rem, 100%);
    }
    .calendar-events {
        width: min(20rem, 100%);
    }
</style>