- Home
- Forum
- JavaScript - EJ 2
- Edit event in a custom template
Edit event in a custom template
Hi,
I have a few problems with a scheduler component when I want to edit an event in a custom template.
When i double click on an existing event, at first, it doesn't give me any information about that event, only the start date, the end date and time. If I close the dialog with the cancel button, that behavior continues, but if I close it with the close button, and open it again, the subject field has value. But I still can't use this value when I want to edit an event.
This is my component with a scheduler:
<template>
<div>
<div class="col-md-12 control-section">
<div class="content-wrapper">
<ejs-schedule id='Schedule'
width='100%'
height="550px"
:selectedDate='selectedDate'
:eventSettings='eventSettings'
:actionBegin="onActionBegin"
:popupOpen="onPopupOpen"
:eventRendered="onEventRendered"
:showQuickInfo="showQuickInfo"
:editorTemplate='editorTemplate'></ejs-schedule>
</div>
</div>
</div>
</template>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/bootstrap.css";
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
</style>
<script>
import Vue from "vue";
import { SchedulePlugin, Day, Week, WorkWeek, Month, View } from "@syncfusion/ej2-vue-schedule";
import editortemplate from './template';
Vue.use(SchedulePlugin);
export default Vue.extend({
data: function () {
return {
selectedDate: new Date(2018, 1, 11),
currentView: 'Week',
eventSettings: {
dataSource: [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 11, 9, 30),
EndTime: new Date(2018, 1, 11, 11, 0),
EventType: 1
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0),
EventType: 1
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0),
EventType: 2
},
],
fields: {
id: { name: 'Id' },
subject: { name: 'Subject' },
startTime: { name: 'StartTime' },
endTime: { name: 'EndTime' },
}
},
showQuickInfo: false,
editorTemplate: function () {
return { template: editortemplate }
},
}
},
provide: {
schedule: [Day, Week, WorkWeek, Month]
},
methods: {
onPopupOpen: function (args) {
if (args.type === 'Editor') {
let statusElement = args.element.querySelector('#EventType');
statusElement.setAttribute('name', 'EventType');
}
},
onEventRendered: function (args) {
switch (args.data.EventType) {
case 'Requested':
(args.element).style.backgroundColor = '#F57F17';
break;
case 'Confirmed':
(args.element).style.backgroundColor = '#7fa900';
break;
case 'New':
(args.element).style.backgroundColor = '#8e24aa';
break;
}
},
onActionBegin: function (args) {
let scheduleObj = document.getElementById('Schedule').ej2_instances[0];
if (args.requestType === 'eventCreate') {
let data = args.data;
if (!scheduleObj.isSlotAvailable(data.StartTime, data.EndTime)) {
args.cancel = true;
}
}
},
onSubmit: function () {
},
}
});
</script>
SIGN IN To post a reply.
4 Replies
LD
Lajos Djerfi
September 3, 2018 01:00 PM UTC
This is my template:
<template>
<div>
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Status</td>
<td colspan="4">
<ejs-dropdownlist id="EventType"
name="EventType"
class="e-field"
placeholder="Choose status"
:dataSource="eventData"
:fields='fields_event_type'
v-model="data.EventType">
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4">
<ejs-datetimepicker id="StartTime"
class="e-field"
name="StartTime"
v-model="data.StartTime">
</ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4">
<ejs-datetimepicker id="EndTime"
class="e-field"
name="EndTime"
v-model="data.EndTime">
</ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Subject"
class="e-field e-input"
name="Subject"
rows="3"
cols="50"
style="width: 100%;height: 60px!important; resize: vertical"
v-model="data.Subject">
</textarea>
</td>
</tr>
</tbody>
</table>
<button v-on:click="writeData">Data</button>
</div>
</template>
<script>
import Vue from "vue";
import { DateTimePickerPlugin } from '@syncfusion/ej2-vue-calendars';
import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns';
Vue.use(DateTimePickerPlugin);
Vue.use(DropDownListPlugin);
export default {
name: 'EventTemplate',
data() {
return {
eventData: [{ NAME: 'test1', ID: '1' }, { NAME: 'test2', ID: '2' }],
fields_event_type: { text: 'NAME', value: 'ID' },
data: {}
};
},
methods: {
writeData: function () {
console.log(this.data);
}
}
};
</script>
VD
Vinitha Devi Murugan
Syncfusion Team
September 5, 2018 04:47 PM UTC
Hi Lajos,
We suspect that the reported problem on editor window not opening with event information, but only with the start and end date is due to the mismatch of datatype of the “EventType” field given in the event datasource and the same value defined in the dropdown dataSource. We have prepared a sample with your shared code and the changes are highlighted in the following code snippet.
Also, the sample can be downloaded from the following location .
App.Vue
|
eventSettings: {
dataSource: [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 11, 9, 30),
EndTime: new Date(2018, 1, 11, 11, 0),
EventType: '1'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0),
EventType: '1'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0),
EventType: '2'
},
],
|
Template.vue
|
<template>
<div>
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Status</td>
<td colspan="4">
<ejs-dropdownlist id="EventType"
name="EventType"
class="e-field"
placeholder="Choose status"
:dataSource="eventData"
:fields='fields_event_type'
v-model="data.EventType">
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4">
<ejs-datetimepicker id="StartTime"
class="e-field"
name="StartTime"
v-model="data.StartTime">
</ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4">
<ejs-datetimepicker id="EndTime"
class="e-field"
name="EndTime"
v-model="data.EndTime">
</ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Subject"
class="e-field e-input"
value=""
name="Subject"
rows="3"
cols="50"
style="width: 100%;height: 60px!important; resize: vertical"
>
</textarea>
</td>
</tr>
</tbody>
</table>
<button v-on:click="writeData">Data</button>
</div>
</template>
<script>
import Vue from "vue";
import { DateTimePickerPlugin } from '@syncfusion/ej2-vue-calendars';
import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns';
Vue.use(DateTimePickerPlugin);
Vue.use(DropDownListPlugin);
export default {
name: 'EventTemplate',
data() {
return {
eventData: [{ NAME: 'test1', ID: '1' }, { NAME: 'test2', ID: '2' }],
fields_event_type: { text: 'NAME', value: 'ID' },
data: {}
};
},
methods: {
writeData: function () {
console.log(this.data);
}
}
};
</script>
|
Kindly try with the above code example and let us know, if you need any further assistance on this.
Regards,
M. Vinitha devi.
TP
Tim Paine
January 21, 2019 12:20 PM UTC
The information which is very useful for the user and it will manage all the possible code that is assigned for them and it will enhance all the information through can't load xpcom will decide to validate the part.
KK
Karthigeyan Krishnamurthi
Syncfusion Team
January 22, 2019 05:07 AM UTC
Hi Tim,
Thanks for your update.
Kindly share the below details to proceed further.
- More details like image / video demo which clearly depicts your requirement.
- Please confirm whether Scheduler control is used in your application?
Regards,
Karthigeyan
SIGN IN To post a reply.
- 4 Replies
- 4 Participants
-
LD Lajos Djerfi
- Sep 3, 2018 01:00 PM UTC
- Jan 22, 2019 05:07 AM UTC
