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" class="mb-2" v-show="visible(event)" :key="event.name">
            <CalendarEvent :event="event" :year="year.year" range :addButton="addButton" @add="(e) => $emit('add', e)"/>
        </li>
    </ul>
</template>

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

    export default {
        props: {
            year: { required: true },
            month: { required: true },
            filter: { default: '' },
            addButton: { type: Boolean },
        },
        computed: {
            events() {
                let events = [];
                for (let day of iterateMonth(this.year.year, this.month)) {
                    for (let 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>