PronounsPage/components/CalendarEventsList.vue

<template>
    <div>
        <input v-model="filter" type="text" :placeholder="$t('crud.filterLong')" class="form-control form-control-sm">
        <div class="columns-3">
            <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"
                    :filter="filter"
                    :add-button="addButton"
                    @add="(e) => $emit('add', e)"
                />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        year: { required: true },
        addButton: { type: Boolean },
    },
    data() {
        return {
            filter: '',
        };
    },
};
</script>