PronounsPage/components/PersonalCalendar.vue

<template>
    <div class="row">
        <div v-for="columnEventObjects in eventObjectsColumns" class="col-md-6">
            <ul class="list-unstyled small">
                <li v-for="event in columnEventObjects" :key="event.name" class="mb-2">
                    <CalendarEvent
                        :event="event"
                        :year="year.year"
                        range
                        month
                        :remove-button="removeButton"
                        @delete="(e) => $emit('delete', e)"
                    />
                </li>
            </ul>
        </div>
    </div>
</template>

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

export default {
    props: {
        year: { required: true },
        events: { required: true },
        removeButton: { type: Boolean },
    },
    computed: {
        eventObjects() {
            return Calendar.generatePersonalCalendarEvents(this.events, this.year);
        },
        eventObjectsColumns() {
            if (this.eventObjects.length < 8) {
                return [this.eventObjects];
            }

            const cutoff = Math.ceil(this.eventObjects.length / 2);

            return [
                this.eventObjects.slice(0, cutoff),
                this.eventObjects.slice(cutoff),
            ];
        },
    },
};
</script>