toast-ui.vue-calendar
toast-ui.vue-calendar copied to clipboard
Published
20 hours ago •
nhn
nhn
change the view type, the scheduel is missing
#<!--
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.
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
i cann't delete shcedule when i use deleteSchedule function:
this.$refs.tuiCalendar.invoke('deleteSchedule', '5', '2');
@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');
