change the view type, the scheduel is missing

[DamonSnow]

#<!--

Version

"@toast-ui/vue-calendar": "^1.0.3",

Test Environment

win 10

Current Behavior

default view is month, and i implement a api to get schedule data correct.the result is right too. but when i change the view to week or day, the schedule missing. the schedule data will get from api when the view type change or time range change.

the code is below

<template>
    <div>
        <createSchedule ref="createSchedule" :addModal="addModal" :calendarList="calendarList"></createSchedule>
        <Card>
            <Row>
                <Col span="2">
                <Select v-model="model1" size="small" style="width: 100px;" @on-change="viewChg">
                    <Option v-for="item in viewCategory" :value="item.value" :key="item.value">
                        <Icon type="md-apps"/>
                        {{ item.label }}
                    </Option>

                </Select>
                </Col>
                <Col span="4">
                <ButtonGroup shape="circle" size="small">
                    <Button type="primary" icon="ios-arrow-back" @click="goToPre"></Button>
                    <Button type="primary" icon="ios-arrow-forward" @click="goToNext"></Button>
                </ButtonGroup>
                <Button type="primary" size="small" style="margin-left: 20px" @click="goToDay">今天</Button>
                </Col>
                <Col span="6">
                <!--<span class="render-range" style="padding-left: 12px;font-size: 19px;vertical-align: middle;float:right;">{{ renderRange }}</span>-->
                <DatePicker
                        :open="open"
                        :value="rangeValue"

                        :type=rangeType
                        @on-change="handleChange">
                    <a href="javascript:void(0)" @click="handleRangeClick">
                        <Icon type="ios-calendar-outline"></Icon>
                        <template><span style="font-size: 19px;">{{ renderRange }}</span></template>
                    </a>
                </DatePicker>
                </Col>
            </Row>
            <Row style="margin-top: 10px;">
                <Col span="24">
                <calendar ref="tuiCalendar"
                          style="height: 800px;"
                          :calendars="calendarList"
                          :schedules="scheduleList"
                          :view="view"
                          :month="month"
                          :week="week"
                          :taskView="taskView"
                          :scheduleView="scheduleView"
                          :theme="theme"
                          :disableDblClick="disableDblClick"
                          :isReadOnly="isReadOnly"
                          :template="template"
                          :useCreationPopup="useCreationPopup"
                          :useDetailPopup="useDetailPopup"
                          @beforeCreateSchedule="onBeforeCreateSchedule"
                          @clickSchedule="onClickSchedule"
                          @beforeUpdateSchedule="onBeforeUpdateSchedule"
                />
                </Col>
            </Row>
        </Card>
    </div>
</template>
<script>
    import 'tui-calendar/dist/tui-calendar.css'
    import {Calendar} from '@toast-ui/vue-calendar'
    import createSchedule from './components/create-shcedule.vue'
    import moment from 'moment'
    import theme from './components/theme'
    import {calendars, getSchedules} from '@/api/schedule'
    export default {
        name: 'myCalendar',
        components: {
            'calendar': Calendar,
            createSchedule,
            theme
        },
        data() {
            return {
                addModal: false,
                open: false,
                renderRange: '2019-03',
                rangeValue: '2019-03',
                rangeType: 'date',
                viewCategory: [
                    {
                        value: "month",
                        label: 'Month'
                    },
                    {
                        value: "week",
                        label: 'Week'
                    },
                    {
                        value: "day",
                        label: 'Day'
                    }
                ],
                model1: "month",
                calendarList: [],
                scheduleList: [],
                view: 'month',
                taskView: false,
                scheduleView: ['time'],
                theme: theme.theme,
                month: {
                    daynames: [this.$t("Sun"), this.$t("Mon"), this.$t("Tue"), this.$t("Wed"), this.$t("Thu"), this.$t("Fri"), this.$t("Sat")],
                    narrowWeekend: true,
                    startDayOfWeek: 1, // monday
                    visibleScheduleCount: 4
                },
                week: {
                    narrowWeekend: true,
                    daynames: [this.$t("Sun"), this.$t("Mon"), this.$t("Tue"), this.$t("Wed"), this.$t("Thu"), this.$t("Fri"), this.$t("Sat")],
                },
                disableDblClick: false,
                isReadOnly: false,
                template: {
                    milestone: function (schedule) {
                        return `<span style="color:red;">${schedule.title}</span>`;
                    },
                    milestoneTitle: function () {
                        return 'MILESTONE';
                    },
                    allday: function (schedule) {
                        return schedule.title;
                    },
                },
                useCreationPopup: false,
                useDetailPopup: false,
            }
        },
        mounted: function () {
            calendars().then(res => {
                res.data.data.forEach(item => {
                    if (typeof item != 'undefined') {
                        this.$refs.tuiCalendar.invoke('setCalendarColor', String(item['id']), {
                            "name": item['name'],
                            "color": item['color'],
                            "bgColor": item['bgColor'],
                            "dragBgColor": item['dragBgColor'],
                            "borderColor": item['borderColor']
                        })
                    }
                })
                this.calendarList = res.data.data
            })
            //get schedules

            this.setRenderRangeText()
        },
        methods: {
            handleRangeClick () {
                this.open = !this.open;
            },
            handleChange (date) {
                let viewName = this.$refs.tuiCalendar.invoke('getViewName');
                this.renderRange = moment(date).format('YYYY-MM-DD');
                this.$refs.tuiCalendar.invoke('setDate', date);
                this.setRenderRangeText();
                this.open = false;
            },
            axiosGetSchedules (condition) {
                let scheduleData = [];
                getSchedules(condition).then(res => {
                    res.data.data.forEach(item => {
                        scheduleData.push({
                            id: item['id'],
                            calendarId: String(item['calendarId']),
                            title: item['title'],
                            category: item['category'],
                            dueDateClass: '',
                            start: item['start'],
                            end: item['end']
                        })
                    })
                    console.log(scheduleData)
                    this.$refs.tuiCalendar.invoke('clear')
                    this.$refs.tuiCalendar.invoke('createSchedules',scheduleData)
                    this.$refs.tuiCalendar.invoke('render')
                })
            },
            onBeforeCreateSchedule(e) {
                // implement your code
                console.log('onBeforeCreateSchedule', e)
                this.openCreateForm(e, this.$refs.tuiCalendar)
//                e.guide.clearGuideElement();
            },
            onClickSchedule(e) {
                // implement your code
                console.log('onClickSchedule', e)

            },
            onBeforeUpdateSchedule(e) {
                // implement your code
                e.schedule.start = e.start;
                e.schedule.end = e.end;
                this.$refs.tuiCalendar.invoke('updateSchedule', e.schedule.id, e.schedule.calendarId, e.schedule);
            },
            viewChg (val) {
                this.open = false
                this.$refs.tuiCalendar.invoke('changeView', val, true);
                this.setRenderRangeText();
            },
            goToDay() {
                this.$refs.tuiCalendar.invoke('today');
                this.setRenderRangeText()
            },
            goToPre() {
                this.$refs.tuiCalendar.invoke('prev');
                this.setRenderRangeText()
            },
            goToNext() {
                this.$refs.tuiCalendar.invoke('next');
                this.setRenderRangeText()
            },
            setRenderRangeText() {
                let condition = {start: '2019-03-01', end: '2019-03-31', calendar_id: null}

                let options = this.$refs.tuiCalendar.invoke('getOptions');
                let viewName = this.$refs.tuiCalendar.invoke('getViewName');
                let html = [];
                if (viewName === 'day') {
                    this.rangeType = 'date'
                    this.renderRange = moment(this.$refs.tuiCalendar.invoke('getDate').getTime()).format('YYYY-MM-DD');
                    this.renderValue = this.renderRange
                    condition.start = moment(this.renderRange).format('YYYY-MM-DD') + ' 00:00:00';
                    condition.end = moment(this.renderRange).add(1, 'd').format('YYYY-MM-DD') + ' 00:00:00';
//                    html.push(moment(this.$refs.tuiCalendar.invoke('getDate').getTime()).format('YYYY-MM-DD'));
                } else if (viewName === 'month' &&
                    (!options.month.visibleWeeksCount || options.month.visibleWeeksCount > 4)) {
                    this.rangeType = 'date'
                    this.renderRange = moment(this.$refs.tuiCalendar.invoke('getDate').getTime()).format('YYYY-MM')
                    this.renderValue = moment(this.$refs.tuiCalendar.invoke('getDate').getTime()).format('YYYY-MM-DD')
                    condition.start = this.renderRange + '-01 00:00:00';
                    condition.end = moment(condition.start).add(1, 'M').format('YYYY-MM') + '-01 00:00:00';
                    console.log('get options', this.$refs.tuiCalendar.invoke('getOptions'))
                } else {
                    this.rangeType = 'date'
                    this.renderValue = null
                    this.renderValue = []
                    this.renderValue[0] = this.$refs.tuiCalendar.invoke('getDateRangeStart');
                    this.renderValue[1] = this.$refs.tuiCalendar.invoke('getDateRangeEnd');
                    html.push(moment(this.$refs.tuiCalendar.invoke('getDateRangeStart').getTime()).format('YYYY-MM-DD'));
                    html.push(' ~ ');
                    html.push(moment(this.$refs.tuiCalendar.invoke('getDateRangeEnd').getTime()).format('YYYY-MM-DD'));
                    this.renderRange = html.join('');
                    condition.start = moment(this.renderValue[0].getTime()).format('YYYY-MM-DD') + ' 00:00:00';
                    condition.end = moment(this.renderValue[1].getTime()).add(1, 'd').format('YYYY-MM-DD') + ' 00:00:00';
                }
                console.log(condition);
                this.axiosGetSchedules(condition);
            },
            openCreateForm (schedule, tuiCalendar) {
                this.$refs.createSchedule.open(schedule, tuiCalendar);
            },
        }
    }
</script>

Expected Behavior

i hope that the schedule can display correct when i change view type or time range.

[DamonSnow]

the schedule that i created in month view can't display in week view or day view. the schedule data is:

title: "test time range 2"
body: ""
calendarId: "1"
category: "time"
start: TZDate {_date: Mon Apr 08 2019 10:04:00 GMT+0800 (中国标准时间)}
end: TZDate {_date: Tue Apr 09 2019 11:04:00 GMT+0800 (中国标准时间)}
id: 8
isAllDay: false
isFocused: false
isPending: false
isPrivate: false
isReadOnly: false
isVisible: true

but if i create a schedule that time range is in same day, it can display in week view, data is below

title: "test time range 1"
body: ""
calendarId: "1"
category: "time"
start: TZDate {_date: Mon Apr 02 2019 10:04:00 GMT+0800 (中国标准时间)}
end: TZDate {_date: Tue Apr 02 2019 11:04:00 GMT+0800 (中国标准时间)}
id: 7
isAllDay: false
isFocused: false
isPending: false
isPrivate: false
isReadOnly: false
isVisible: true

[DamonSnow]

i cann't delete shcedule when i use deleteSchedule function:

this.$refs.tuiCalendar.invoke('deleteSchedule', '5', '2');

[jungeun-cho]

@DamonSnow

• Does the viewChg method handler get the correct 'val' value?
  *https://vuejs.org/v2/guide/forms.html#Select

 this.$refs.tuiCalendar.invoke('changeView', this.model1, true);

• Is your schedule id string? I think your schedule id is number.
  • https://nhnent.github.io/tui.calendar/latest/Calendar#deleteSchedule
  • deleteSchedule(scheduleId, calendarId, silent)

this.$refs.tuiCalendar.invoke('deleteSchedule', 7, '2');