1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Can't edit event in schedule

Can't edit event in schedule

Hi,

I have a problem when I want to edit events in the scheduler. I am getting the error that says: "Uncaught TypeError: Cannot read property 'RecurrenceRule' of undefined".

I didn't define the recurrence rule, because my every event is unique.


Here is the component where I am getting the error:

</style>

<script>
    import Vue from "vue";
    import moment from 'moment';

    import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
    import { SchedulePlugin, Day, Week, WorkWeek, Month, View } from "@syncfusion/ej2-vue-schedule";
    import { extend } from '@syncfusion/ej2-base';
    import { DropDownList } from '@syncfusion/ej2-dropdowns';
    import { DateTimePicker } from '@syncfusion/ej2-calendars';
    import { PopupOpenEventArgs, EventRenderedArgs } from '@syncfusion/ej2-vue-schedule';

    import editortemplate from './template';
    Vue.use(SchedulePlugin);

    class SerialNoAdaptor extends UrlAdaptor {

        beforeSend(a, b, ajax) {
            ajax.successHandler = function (data) {
                if (this.onSuccess) {
                    console.log('odgovor');
                    console.log(data);
                    // here you can check whether the data is valid or not
                    console.log(this.httpRequest.response);
                    this.onSuccess(data, this);
                }
                return data;
            }
            super.beforeSend.call(this, a, b, ajax)

        }

        processResponse() {
            let original = super.processResponse.apply(this, arguments);

            for (var i = 0; i < original.length; i++) {
                var persons = JSON.parse(original[i].PERSONS_ON_EVENT);
                original[i].PERSONS_ON_EVENT = [];
                for (var j = 0; j < persons.length; j++) {
                    original[i].PERSONS_ON_EVENT.push(persons[j].PERSONS_ID);
                }
            }

            return original;
        }

        processQuery() {
            let original = super.processQuery.apply(this, arguments);
            var parametri = JSON.parse(original.data).params;

            parametri['officeID'] = 15;

            for (var index in parametri) {
                if (index.toLowerCase().indexOf('date') >= 0) {
                    parametri[index] = moment(parametri[index]
                    ).format('YYYY-MM-DD');
                }
            };

            original.data = JSON.stringify(parametri);
            return original;
        }

        insert() {
            let original = super.insert.apply(this, arguments);
            var parametri = JSON.parse(original.data);
            console.log(parametri.value);

            for (var index in parametri.value) {
                if (index.toLowerCase().indexOf('date') >= 0) {
                    parametri.value[index] = moment(parametri.value[index]
                    ).format('YYYY-MM-DD HH:mm:SS');
                }
            };

            parametri.value.CASES_ID = document.getElementById('CASES_ID_hidden').value;

            console.log(parametri.value);

            original.data = JSON.stringify(parametri);
            console.log('insert');
            return original;
        }

        update() {
            console.log('update');
            let original = super.insert.apply(this, arguments);

            var parametri = JSON.parse(original.data);
            console.log(parametri.table);

            for (var index in parametri.table) {
                if (index.toLowerCase().indexOf('date') >= 0) {
                    parametri.table[index] = moment(parametri.table[index]
                    ).format('YYYY-MM-DD HH:mm:SS');
                }
            };

            original.data = JSON.stringify(parametri);
            console.log(original);
            return original;
        }

    }

    //var dataManger = new DataManager({
    //    url: '/api/persons/getDataScheduler',
    //    insertUrl: '/api/persons/insertEventScheduler',
    //    updateUrl: '/api/persons/updateEventScheduler',
    //    adaptor: new SerialNoAdaptor,
    //    requestType: 'json',
    //    crossDomain: true
    //});

    var dataManger = [
        {
            "EVENT_ID": 30155,
            "DATE": "2018-09-25T03:00:00",
            "DATE_TO": "2018-09-25T04:00:00",
            "DESCRIPTION": "Test 6",
        },
        {
            "EVENT_ID": 30155,
            "DATE": "2018-09-26T13:00:00",
            "DATE_TO": "2018-09-26T14:00:00",
            "DESCRIPTION": "Test 6",
        },
        {
            "EVENT_ID": 30155,
            "DATE": "2018-09-25T13:10:00",
            "DATE_TO": "2018-09-25T14:00:00",
            "DESCRIPTION": "Test 6",

        },
        {
            "EVENT_ID": 30155,
            "DATE": "2018-09-26T03:00:00",
            "DATE_TO": "2018-09-26T04:00:00",
            "DESCRIPTION": "Test 6",
        },
    ]

    export default Vue.extend({
        data: function () {
            return {
                selectedDate: new Date(),
                currentView: 'Week',
                eventSettings: {
                    dataSource: dataManger,
                    fields: {
                        id: { name: 'EVENT_ID' },
                        subject: { name: 'DESCRIPTION' },
                        startTime: { name: 'DATE' },
                        endTime: { name: 'DATE_TO' },
                    }
                },
                locale: this.$store.state.app.scLang,
                showQuickInfo: false,
                editorTemplate: function () {
                    return { template: editortemplate }
                },
            }
        },
        provide: {
            schedule: [Day, Week, WorkWeek, Month]
        },
        methods: {
            onPopupOpen: function (args) {
                if (args.type === 'Editor') {

                }
            },
            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;
                    }
                }
            },
        }
    });
</script>


2 Replies
LD Lajos Djerfi September 27, 2018 05:52 PM UTC

Here is my template:

<template>
    <div>
        <div class="row custom-event-editor" width="100%">


            <div class="col-md-12">
                <div class="form-group row IzaberiOpciju">
                    <label class="col-md-2 text-right">{{ $t('Vreme') }}</label>
                    <div class="col-md-8">
                        <div class="col-md-12">
                            <div class="form-group row m-b-10">
                                <div class="col-md-6 p-0 p-l-0 p-r-5">
                                    <ejs-datetimepicker class="e-field"
                                                        id="DATE"
                                                        name="DATE"
                                                        :format="format"
                                                        locale="sr-Latn"
                                                        v-model="data.DATE">
                                    </ejs-datetimepicker>
                                </div>
                                <div class="col-md-6 p-r-0 p-l-5">
                                    <ejs-datetimepicker class="e-field"
                                                        id="DATE_TO"
                                                        name="DATE_TO"
                                                        :format="format"
                                                        locale="sr-Latn"
                                                        v-model="data.DATE_TO">
                                    </ejs-datetimepicker>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
    import Vue from "vue";

    import { Query, DataManager, UrlAdaptor } from '@syncfusion/ej2-data';

    import { DateTimePickerPlugin } from '@syncfusion/ej2-vue-calendars';
    import { DropDownListPlugin, AutoCompletePlugin, MultiSelectPlugin } from '@syncfusion/ej2-vue-dropdowns';
    import { CheckBoxPlugin } from "@syncfusion/ej2-vue-buttons";

    Vue.use(AutoCompletePlugin);
    Vue.use(CheckBoxPlugin);
    Vue.use(DateTimePickerPlugin);
    Vue.use(DropDownListPlugin);
    Vue.use(MultiSelectPlugin);

    class CustomAdaptor extends UrlAdaptor {
        beforeSend(a, b, ajax) {
            ajax.successHandler = function (data) {
                if (this.onSuccess) {
                    console.log('odgovor');
                    console.log(data);
                    console.log(this.httpRequest.response);
                    this.onSuccess(data, this);
                }
                return data;
            }
            super.beforeSend.call(this, a, b, ajax)

        }
    }

    export default {
        name: 'EventTemplate',
        data() {
            return {
                vrsta: 1,
                novo: 2,
                showReminderDateTime: false,
                prikaziCheckbox: true,
                povezanSaPredmetom: false,
                eventData: [{ NAME: this.$t('Resenje'), ID: 1 }, { NAME: this.$t('Rociste'), ID: 2 }],
                fields_event_type: { text: 'NAME', value: 'ID' },
                format: 'dd.MM.yyyy HH:mm',
                data: {
                    EVENT_TYPES_ID: 0,
                },
                COURT_NUMBER: false,
                CASES_ID_data: new DataManager({
                    url: '/api/persons/caseNumber',
                    crossDomain: true,
                    adaptor: new CustomAdaptor(),
                    requestType: 'json',
                }),
                CASES_ID_fields: { text: 'value', value: 'id' },
                PERSONS_ON_EVENT_data: new DataManager({
                    url: '/api/persons/personsOnEvent',
                    crossDomain: true,
                    adaptor: new CustomAdaptor(),
                    requestType: 'json',
                }),
                PERSONS_ON_EVENT_fields: { text: 'value', value: 'id' },
                radnjaNaPredmetu: false,
                schedulerEvent: true,
                allowFiltering: true,
                USERS_data: new DataManager({
                    url: '/api/persons/usersOnTask',
                    crossDomain: true,
                    adaptor: new CustomAdaptor(),
                    requestType: 'json',
                }),
                USERS_fields: { text: 'value', value: 'id' },
                path: {
                    saveUrl: '/api/contract/saveFile'
                },
                autoUpload: false,
            };
        },
        computed: {
            CASES_ID_query: function () {
                return new Query().addParams('sudskiBroj', JSON.stringify({ courtNumber: this.COURT_NUMBER }));
            },
        },
        methods: {
            onFileUpload: function (args) {
                console.log('upload');
                console.log(this);
                args.customFormData = [{ 'eventID': this.$parent.EVENT_ID }];
            },
            COURT_NUMBER_onChange: function () {
                var checkboxObj = event.target.ej2_instances[0];
                this.COURT_NUMBER = checkboxObj.checked;
            },
            POVEZAN_SA_PREDMETOM_onChange: function () {
                var checkboxObj = event.target.ej2_instances[0];
                this.povezanSaPredmetom = checkboxObj.checked;
                console.log(this);
            },
            SHOW_IN_NOTIFICATION_onChange: function () {
                var checkboxObj = event.target.ej2_instances[0];
                this.showReminderDateTime = checkboxObj.checked;
                console.log(this);
            },
            ispisi: function () {
                console.log(this);
            }
        }
    };
</script>
<style>
    .e-upload-actions {
        display: none;
    }

    .e-input-group,
    select,
    .disabled {
        pointer-events: initial !important;
    }
</style>


SV Sabritha Venu Gopal Syncfusion Team October 8, 2018 09:20 AM UTC

Hi Lajos, 
 
Thank you for contacting Syncfusion support. 
 
We have checked the provided code example and found that id field mapping is not in correct format which is the cause for the issue. We have prepared the below sample for your reference and kindly use the below code example in your application to overcome the issue. 
 
 
 fields: { 
                 id: 'EVENT_ID', 
                 subject: { name: 'DESCRIPTION' }, 
                 startTime: { name: 'DATE' }, 
                 endTime: { name: 'DATE_TO' }, 
           }  
 
 
Regards, 
Sabritha V 
 


Loader.
Up arrow icon