dootask/resources/assets/js/pages/manage/components/Calendar.vue

<template>
    <div ref="tuiCalendar" class="calendar-wrapper"></div>
</template>
<script>
// import 'tui-date-picker/dist/tui-date-picker.css';
// import 'tui-time-picker/dist/tui-time-picker.css';
import '@toast-ui/calendar/dist/toastui-calendar.css';
import Calendar from '@toast-ui/calendar';
// import Calendar from 'tui-calendar-hi';

export default {
    name: 'Calendar',
    props: {
        calendars: {
            type: Array,
            default() {
                return [];
            }
        },
        schedules: {
            type: Array,
            default() {
                return [];
            },
            validator(value) {
                let notHave = false;

                value.forEach(schedule => {
                    notHave = [ 'start', 'category' ].some(prop => !schedule.hasOwnProperty(prop));
                });

                return !notHave;
            }
        },
        view: {
            type: String,
            default: 'week'
        },
        taskView: {
            type: [Boolean, Array],
            default: true
        },
        scheduleView: {
            type: [Boolean, Array],
            default: true
        },
        theme: {
            type: Object,
            default() {
                return {};
            }
        },
        template: {
            type: Object,
            default() {
                return {};
            }
        },
        week: {
            type: Object,
            default() {
                return {};
            }
        },
        month: {
            type: Object,
            default() {
                return {};
            }
        },
        useCreationPopup: {
            type: Boolean,
            default: true
        },
        useDetailPopup: {
            type: Boolean,
            default: true
        },
        timezones: {
            type: Array,
            default() {
                return [];
            }
        },
        disableDblClick: {
            type: Boolean,
            default: false
        },
        disableClick: {
            type: Boolean,
            default: false
        },
        isReadOnly: {
            type: Boolean,
            default: false
        },
        usageStatistics: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            calendarInstance: null
        }
    },
    watch: {
        calendars(newValue) {
            this.calendarInstance.setCalendars(newValue);
            this.$nextTick(this.resetRender)
        },
        schedules() {
            this.resetRender();
        },
        view(newValue) {
            this.calendarInstance.changeView(newValue, true);
        },
        taskView(newValue) {
            this.calendarInstance.setOptions({taskView: newValue});
        },
        scheduleView(newValue) {
            this.calendarInstance.setOptions({scheduleView: newValue});
        },
        theme: {
            handler(newValue) {
                this.calendarInstance.setTheme($A.cloneJSON(newValue));
            },
            deep: true
        },
        week: {
            handler(newValue) {
                const silent = this.view !== 'week' && this.view !== 'day';
                this.calendarInstance.setOptions({week: $A.cloneJSON(newValue)}, silent);
            },
            deep: true
        },
        month: {
            handler(newValue) {
                const silent = this.view !== 'month';
                this.calendarInstance.setOptions({month: $A.cloneJSON(newValue)}, silent);
            },
            deep: true
        },
        timezones(newValue) {
            this.calendarInstance.setOptions({timezones: newValue});
        },
        disableDblClick(newValue) {
            this.calendarInstance.setOptions({disableDblClick: newValue});
        },
        disableClick(newValue) {
            this.calendarInstance.setOptions({disableClick: newValue});
        },
        isReadOnly(newValue) {
            this.calendarInstance.setOptions({isReadOnly: newValue});
        }
    },
    mounted() {
        let dayNames = [
            this.$L('{日}'),
            this.$L('{一}'),
            this.$L('{二}'),
            this.$L('{三}'),
            this.$L('{四}'),
            this.$L('{五}'),
            this.$L('{六}')
        ]
        this.calendarInstance = new Calendar(this.$refs.tuiCalendar, {
            defaultView: this.view,
            week: {
                taskView: this.taskView,
                dayNames: dayNames,
            },
            month: {
                dayNames: dayNames,
            },
            scheduleView: this.scheduleView,
            theme: this.theme,
            template: this.template,
            calendars: this.calendars,
            useCreationPopup: this.useCreationPopup,
            useDetailPopup: this.useDetailPopup,
            timezone: this.timezones,
            disableDblClick: this.disableDblClick,
            disableClick: this.disableClick,
            usageStatistics: this.usageStatistics,
            // isReadOnly: true,
        });
        // this.calendarInstance.on('beforeUpdateEvent', ( event ) => {
        //     console.log(event); // EventObject
        // });
        this.calendarInstance.on('beforeDeleteEvent', ( event ) => {
            console.log(event); // EventObject
        });
        this.addEventListeners();
        this.reflectSchedules();
    },
    beforeDestroy() {
        this.calendarInstance.off();
        this.calendarInstance.destroy();
    },
    methods: {
        addEventListeners() {
            for (const eventName of Object.keys(this.$listeners)) {
                this.calendarInstance.on(eventName, (...args) => this.$emit(eventName, ...args));
            }
        },
        reflectSchedules() {
            if (this.schedules.length > 0) {
                this.calendarInstance.createEvents(this.schedules)
            }
        },
        getRootElement() {
            return this.$refs.tuiCalendar;
        },
        getInstance() {
            return this.calendarInstance;
        },
        resetRender() {
            this.calendarInstance.clear();
            this.reflectSchedules();
        }
    }
};
</script>