I'm using SyncFusion with vue, and I'm trying to change the modal at the moment of see all the details for an event, my problem is that I'm doing what documentations says I should do, but it doesn't works, when I make double click on an event the modal doesn't work with the changes that the documentation says it should work.
Also I tried to change all the modal, using :editorTemplate='showModal' showModal called a modal that I import into the vue documento, it works, but at the moment of recharge the page it makes an error into the librarys of syncfusion, it looks like it was looking for the template of the editor popUp but I'm not using an template. So I need to use exactly the way documantion says I should work with it but it doesnt work, my calendar does not open nothing.
Here is my vue document:
<template >
<div class="pr-5" id='app'>
<ejs-schedule height='100vh' :locale = 'locale' :popupOpen='onPopupOpen' :popupClose='onPopupClose' :currentView='currentView' :editorTemplate='editorTemplate' >
<e-views>
<e-view option='Month' showWeekend=false></e-view>
</e-views>
</ejs-schedule>
<task-drawer :showTask="ShowModal"></task-drawer>
</div>
</template>
<script >
import Vue from 'vue'
import { SchedulePlugin, Month, Resize } from '@syncfusion/ej2-vue-schedule'
import { loadCldr, L10n} from '@syncfusion/ej2-base'
import { DropDownList } from '@syncfusion/ej2-dropdowns'
import { DateTimePicker } from '@syncfusion/ej2-calendars'
import TaskDrawer from '../TaskDrawer/Index.vue'
loadCldr(
// eslint-disable-next-line @typescript-eslint/no-var-requires
require('cldr-data/supplemental/numberingSystems.json'),
// eslint-disable-next-line @typescript-eslint/no-var-requires
require('cldr-data/main/es-MX/ca-gregorian.json'),
// eslint-disable-next-line @typescript-eslint/no-var-requires
require('cldr-data/main/es-MX/numbers.json'),
// eslint-disable-next-line @typescript-eslint/no-var-requires
require('cldr-data/main/es-MX/timeZoneNames.json')
)
L10n.load({
'es-MX': {
schedule: {
day: 'Día',
week: 'Semana',
month: 'Mes',
today: 'Hoy',
addTitle: 'Tarea Nueva',
moreDetails: 'Ver Detalles',
save: 'Guardar',
more: 'más',
allDay: 'Todo el día',
},
calendar: {
today: 'Aujourd`hui'
}
}
})
Vue.use(SchedulePlugin)
var editorTemplateVue = Vue.component('editorTemplate', {
template: `<table class="custom-event-editor" width="100%" cellpadding="5"><tbody><tr>
<td class="e-textlabel">Summary</td><td colspan="4"><input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" /></td></tr><tr><td class="e-textlabel">Status</td><td colspan="4"><input type="text" id="EventType" name="EventType" class="e-field" style="width: 100%" /></td></tr><tr><td class="e-textlabel">From</td><td colspan="4"><input id="StartTime" class="e-field" type="text" name="StartTime" /></td></tr><tr>
<td class="e-textlabel">To</td><td colspan="4"><input id="EndTime" class="e-field" type="text" name="EndTime" /></td></tr><tr><td class="e-textlabel">Reason</td><td colspan="4">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" style="width: 100%; height: 60px !important; resize: vertical"></textarea></td></tr></tbody></table>`,
data () {
return {
data: {}
}
}
})
export default Vue.extend({
data: () => {
return {
locale: 'es-MX',
currentView: 'Month',
ShowModal: false,
selectedDate: new Date(2018, 1, 15),
showQuickInfo: false,
editorTemplate: function (e) {
return {
template: editorTemplateVue
}
}
}
},
provide: {
schedule: [Month, Resize]
},
components: {
TaskDrawer
},
methods: {
onPopupOpen: function (args) {
if (args.type === 'Editor') {
let subjectElement = args.element.querySelector('#Subject')
if (subjectElement) {
subjectElement.value = args.data.Subject || ''
}
let statusElement = args.element.querySelector('#EventType')
if (!statusElement.classList.contains('e-dropdownlist')) {
let dropDownListObject = new DropDownList({
placeholder: 'Choose status',
value: args.data.EventType,
dataSource: ['New', 'Requested', 'Confirmed']
})
dropDownListObject.appendTo(statusElement)
statusElement.setAttribute('name', 'EventType')
}
let startElement = args.element.querySelector('#StartTime')
if (!startElement.classList.contains('e-datetimepicker')) {
// eslint-disable-next-line no-new
new DateTimePicker(
{ value: new Date(args.data.StartTime) || new Date() },
startElement
)
}
let endElement = args.element.querySelector('#EndTime')
if (!endElement.classList.contains('e-datetimepicker')) {
// eslint-disable-next-line no-new
new DateTimePicker(
{ value: new Date(args.data.EndTime) || new Date() },
endElement
)
}
let descriptionElement = args.element.querySelector('#Description')
if (descriptionElement) {
descriptionElement.value = args.data.Description || ''
}
}
},
onPopupClose: function (args) {
// eslint-disable-next-line no-undef
if (args.type === 'Editor' && !isNullOrUndefined(args.data)) {
let subjectElement = args.element.querySelector('#Subject')
if (subjectElement) {
args.data.Subject = subjectElement.value
}
let statusElement = args.element.querySelector('#EventType')
if (statusElement) {
args.data.EventType = statusElement.value
}
let startElement = args.element.querySelector('#StartTime')
if (startElement) {
args.data.StartTime = startElement.value
}
let endElement = args.element.querySelector('#EndTime')
if (endElement) {
args.data.EndTime = endElement.value
}
let descriptionElement = args.element.querySelector('#Description')
if (descriptionElement) {
args.data.Description = descriptionElement.value
}
}
}
},
})
</script>
And here is the documentation: Documentation Link
More Details: I'm Using Vue 2
Error from console in navigator
If you need more details please ask for them
We have validated your reported query at our end by preparing sample with your shared code. We could reproduce the reported issue. On validating it, the reported issue is due to you have missed to import the isNullOrUndefind from ej2-base, which causes the issue on save click. To overcome this we suggest you to import isNullOrUndefind like below for the same we have modified your shared code and prepared below sample for your reference.
https://codesandbox.io/s/vue-template-forked-1molt?file=/src/App.vue
import { loadCldr, L10n, isNullOrUndefined } from "@syncfusion/ej2-base";