<template>
    <div class="calendar">
        <full-calendar :options="calendarOptions" />
    </div>
</template>
<script lang="ts">
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import zhLocale from '@fullcalendar/core/locales/zh-cn'
import bootstrap5Plugin from '@fullcalendar/bootstrap5'
import { DateSelectArg, EventClickArg } from '@fullcalendar/core'

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
        calendarOptions: {
            locale: zhLocale,
            // themeSystem: 'bootstrap5',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            plugins: [ dayGridPlugin, bootstrap5Plugin, timeGridPlugin, interactionPlugin ],
            initialView: 'timeGridWeek',
            droppable: true,
            editable: true,
            dayMaxEvents: true,
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
            selectMirror: true,
            height: '100%',
            select: function(selectInfo: DateSelectArg) {
                console.log('select')
                var title = prompt('Event Title:');
                let { calendar } = selectInfo.view;
                if (title) {
                    calendar.addEvent({
                        title: title,
                        start: selectInfo.startStr,
                        end: selectInfo.endStr,
                        allDay: selectInfo.allDay
                    })
                }
                calendar.unselect()
            },
            eventClick: function(clickInfo: EventClickArg) {
                if (confirm('Are you sure you want to delete this event?')) {
                    clickInfo.event.remove()
                }
            }
        }
    }
  }
}
</script>
<style lang="less" scoped>
.calendar {
    font-size: 10px;
    padding: 8px;
    height: calc(100% - 1rem);
}
</style>
