PronounsPage/routes/calendar.vue

<template>
    <component :is="basic ? 'div' : 'Page'" v-if="$config.calendar?.enabled">
        <div v-if="year" :class="basic ? 'py-5' : ''">
            <CommunityNav v-if="!basic" />

            <h2 class="d-flex justify-content-between flex-column flex-md-row">
                <span>
                    <Icon v="calendar-star" />
                    <T>calendar.headerLong</T> <small class="text-muted">({{ year.year }})</small>
                </span>
                <span v-if="basic" class="h4 mt-2">
                    <nuxt-link :to="`/${$config.calendar.route}`">
                        <Logo />
                        <T>domain</T>/{{ $config.calendar.route }}
                    </nuxt-link>
                </span>
                <span v-else class="btn-group">
                    <button :class="['btn', labels ? 'btn-outline-primary' : 'btn-primary']" @click="labels = false">
                        <Icon v="table" />
                        <T>calendar.view.grid</T>
                    </button>
                    <button :class="['btn', labels ? 'btn-primary' : 'btn-outline-primary']" @click="labels = true">
                        <Icon v="list" />
                        <T>calendar.view.list</T>
                    </button>
                </span>
            </h2>

            <CalendarBanner v-if="!basic && year.isCurrent()" />

            <AdPlaceholder v-if="!basic" phkey="main-0" />

            <template v-if="basic">
                <section v-if="labels" class="columns-4 pb-4">
                    <div v-for="i in 12" class="py-3">
                        <h3 class="text-center">
                            <T>calendar.months.{{ i }}</T>
                        </h3>
                        <CalendarMonthEvents :year="year" :month="i" class="small my-3" />
                    </div>
                </section>

                <section v-else class="row pb-4">
                    <div v-for="i in 12" class="col-12 col-lg-3 py-3">
                        <h3 class="text-center">
                            <T>calendar.months.{{ i }}</T>
                        </h3>
                        <Calendar :year="year" :month="i" />
                    </div>
                </section>
            </template>
            <template v-else>
                <section v-if="labels">
                    <CalendarEventsList :year="year" />
                </section>
                <section v-else class="row">
                    <div v-for="i in 12" class="col-12 col-sm-6 col-lg-4 py-3">
                        <h3 class="text-center">
                            <T>calendar.months.{{ i }}</T>
                        </h3>
                        <Calendar :year="year" :month="i" :mark="today" tooltips />
                    </div>
                </section>
            </template>

            <template v-if="!basic">
                <AdPlaceholder :phkey="['content-1', 'content-mobile-1']" />
                <CalendarExtra :year="year" />

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

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

<script lang="ts">
import Vue from 'vue';
import { head } from '../src/helpers.ts';
import { calendar } from '../src/calendar/calendar.ts';
import { Day } from '../src/calendar/helpers.ts';

export default Vue.extend({
    layout({ route }) {
        return route.query.layout === 'basic' ? 'basic' : 'default';
    },
    data() {
        return {
            year: this.$route.params.year
                ? calendar.getYear(parseInt(this.$route.params.year))
                : calendar.getCurrentYear(),
            today: Day.today(),
            basic: this.$route.query.layout === 'basic',
            labels: this.$route.query.labels === 'true',
        };
    },
    head() {
        if (!this.year) {
            return {};
        }
        return head({
            title: this.$t('calendar.headerLong'),
            banner: `calendar/${this.year.year}-overview.png`,
        }, this.$translator);
    },
});
</script>