<template>
    <ul class="list-unstyled mb-0">
        <li v-for="event in events" class="mb-2">
            <CalendarEvent :event="event" :year="year.year" range :key="event.name"/>
        </li>
    </ul>
</template>

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

    export default {
        props: {
            year: { required: true },
            month: { required: true },
        },
        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)) {
                            events.push(event);
                        }
                    }
                }
                return events;
            }
        }
    }
</script>