PronounsPage/components/CalendarMonthEvents.vue

<template>
    <ul class="list-unstyled mb-0">
        <li v-show="events.filter(e => visible(e)).length === 0" class="text-center">
            —
        </li>
        <li v-for="event in events" v-show="visible(event)" :key="event.name" class="mb-2">
            <CalendarEvent :event="event" :year="year.year" range :add-button="addButton" @add="(e) => $emit('add', e)" />
        </li>
    </ul>
</template>

<script>
import { iterateMonth } from '../src/calendar/helpers.js';

export default {
    props: {
        year: { required: true },
        month: { required: true },
        filter: { default: '' },
        addButton: { type: Boolean },
    },
    computed: {
        events() {
            const events = [];
            for (const day of iterateMonth(this.year.year, this.month)) {
                for (const event of this.year.eventsByDate[day.toString()] || []) {
                    if (event.isFirstDay(day)) {
                        event.translatedName = this.translateName(event);
                        events.push(event);
                    }
                }
            }
            return events;
        },
    },
    methods: {
        translateName(event) {
            const [name, param] = event.name.split('$');
            return this.$te(`calendar.events.${name}`, true) ? this.$t(`calendar.events.${name}`, { param }) : name;
        },
        visible(event) {
            return !this.filter || event.translatedName.toLowerCase().includes(this.filter.toLowerCase());
        },
    },
};
</script>