Scheduler addEvent and saveEvent not working

[Marc Walen]

I have a databound scheduler with grouped timeline view and custom Add, Edit and Delete dialogs. After adding or editing an event I want to update the scheduler view to reflect the changes without reloading the entire page. But only deleteEvent is working. AddEvent and saveEvent don't display the added or edited appointment. No errors are being thrown.

Here is my scheduler:

<div id="schedule_section" style="height: 920px;">

    <ejs-schedule id="schedule"  width="100%" height="100%" currentView="TimelineMonth" selectedDate=@ViewBag.scheduleDate workDays="@ViewBag.workDays" actionBegin="onActionBegin" eventRendered="onEventRendered" workHours="@ViewBag.workHours" rowAutoHeight="true" popupOpen="OnPopupOpen">

        <e-schedule-views>

            <e-schedule-view option="TimelineWeek"></e-schedule-view>

            <e-schedule-view option="TimelineMonth"></e-schedule-view>

            <e-schedule-view option="TimelineYear" allowVirtualScrolling=true></e-schedule-view>

        </e-schedule-views>

        <e-schedule-group resources="@ViewBag.Resources"></e-schedule-group>

        <e-schedule-quickinfotemplates header="#header-template" content="#content-template" footer="#footer-template">

        </e-schedule-quickinfotemplates>

        <e-schedule-resources>

            <e-schedule-resource dataSource="@ViewBag.Projects" field="ProjectId" title="Choose Project" name="Projects" textField="text" idField="id"></e-schedule-resource>

            <e-schedule-resource dataSource="@ViewBag.Categories" field="TaskId" title="Category" name="Categories" textField="text" idField="id" groupIDField='groupId' allowMultiple="true"></e-schedule-resource>

        </e-schedule-resources>

        <e-schedule-eventsettings dataSource="@ViewBag.datasource">

            <e-eventsettings-fields>

                <e-field-subject name="Subject" title="Summary"></e-field-subject>

                <e-field-description name="Description" title="Comments"></e-field-description>

            </e-eventsettings-fields>

        </e-schedule-eventsettings>

        <e-schedule-header-rows>

            <e-schedule-header-row option="Month" template="#month-template"></e-schedule-header-row>

            <e-schedule-header-row option="Week" template="#week-template"></e-schedule-header-row>

            <e-schedule-header-row option="Date"></e-schedule-header-row>

        </e-schedule-header-rows>

    </ejs-schedule>

</div>

<div>

    <ejs-contextmenu id="contextmenu" cssClass="schedule-context-menu" target=".e-schedule" items="ViewBag.menuItems" beforeOpen="onContextMenuBeforeOpen" select="onMenuItemSelect"></ejs-contextmenu>

</div>

And these are the functions for adding/editing:

function addVerplaatsing(eventData) {

    var scheduleObj = document.getElementById('schedule').ej2_instances[0];        

    eventData.Id = scheduleObj.getEventMaxID();        

    scheduleObj.addEvent(eventData);

}

function deleteVerplaatsing(eventId) {

    var scheduleObj = document.getElementById('schedule').ej2_instances[0];

    scheduleObj.deleteEvent(eventId);

}

function editVerplaatsing(eventData) {

    var scheduleObj = document.getElementById('schedule').ej2_instances[0];

    scheduleObj.saveEvent(eventData);

}

These functions are called like:

editVerplaatsing(@Html.Raw(ViewBag.newEvent));

Event object:

public class eventData

{

    public int Id { get; set; }

    public string Subject { get; set; }

    public DateTime StartTime { get; set; }

    public DateTime EndTime { get; set; }

    public bool IsAllDay { get; set; }

    public int ProjectId { get; set; }

    public int TaskId { get; set; }

    public string eventColor { get; set; }

    public string Status { get; set; }

    public string Data { get; set; }

    public string Description { get; set; }

    public string fromLocation { get; set; }

    public string currentLocation { get; set; }

    public string currentMatOrd { get; set; }

    public string code { set; get; }

    public string no { set; get; }

    public string inspectionNo { set; get; }

    public string matOrd { get; set; }

    public bool IsReadonly { get; set; }

    public bool posted { get; set; }

}

Why isn't the scheduler updated with the changes (except for deleting, that works)? Am I doing somthing wrong?

[Vijay Ravi]

Hi Marc,
 

We have validated your reported query regarding the addEvent and saveEvent methods not working. Based on your requirements, we have prepared the Schedule sample with a context menu using addEvent to add a new event, saveEvent to edit an existing event, and deleteEvent to delete an event. Please refer to the below-shared sample for your reference. Kindly try our shared sample.

addEvent: you can use resourceGrouping so resourceId and proper event field mapping can be given as shown in the below shared snippet.

var selectedCells = scheduleObj.getSelectedElements();

var activeCellsData = scheduleObj.getCellDetails(selectedCells.length > 0 ? selectedCells : selectedTarget);

var eventData = {

    Id: scheduleObj.getEventMaxID(),

    StartTime: activeCellsData.startTime,

    EndTime: activeCellsData.endTime,

    OwnerId: scheduleObj.getResourcesByIndex(activeCellsData.groupIndex).resourceData.Id,

    RoomId: scheduleObj.getResourcesByIndex(activeCellsData.groupIndex).resourceData.OwnerGroupId

};

scheduleObj.addEvent(eventData);

saveEvent:

eventObj.Subject = "Test";

scheduleObj.saveEvent(eventObj);

Please get back to us if you need any further assistance.

Regards,

Vijay

Attachment: addEvent_and_saveEvent_sample_54d98fc3.zip

[Marc Walen]

I changed my function according to your sample:

function addNewVerplaatsing(eventData) {

    var scheduleObj = document.getElementById('schedule').ej2_instances[0];        

    var selectedCells = scheduleObj.getSelectedElements();

    var activeCellsData = scheduleObj.getCellDetails(selectedCells.length > 0 ? selectedCells : selectedTarget);

    var event = {

        Id: scheduleObj.getEventMaxID(),

        StartTime: activeCellsData.startTime,

        EndTime: activeCellsData.endTime,

        groupId: scheduleObj.getResourcesByIndex(activeCellsData.groupIndex).resourceData.id,

        TaskId: scheduleObj.getResourcesByIndex(activeCellsData.groupIndex).resourceData.groupId,

        Subject: eventData.Subject

    };

    scheduleObj.addEvent(event);

}

But the event is still not showing up in the scheduler. No errors are thrown. Only after a full page reload, when the added event is loaded from the database it is added to the scheduler.

I also tried:

function onMenuItemSelect(args) {

    var scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];

    var selectedMenuItem = args.item.id;

    var eventObj;

    if (selectedTarget.classList.contains('e-appointment')) {

        eventObj = scheduleObj.getEventDetails(selectedTarget);

    }

    switch (selectedMenuItem) {

        case 'Add':

            var selectedCells = scheduleObj.getSelectedElements();

            var activeCellsData = scheduleObj.getCellDetails(selectedCells.length > 0 ? selectedCells : selectedTarget);

            var eventData = {

                Id: scheduleObj.getEventMaxID(),

                StartTime: activeCellsData.startTime,

                EndTime: activeCellsData.endTime,

                TaskId: scheduleObj.getResourcesByIndex(activeCellsData.groupIndex).resourceData.id,

                ProjectId: scheduleObj.getResourcesByIndex(activeCellsData.groupIndex).resourceData.groupId

            };

            scheduleObj.addEvent(eventData);

            break;

     }

}

But this also doesn't work.

When running the supplied sample it does work.

[Marc Walen]

Here is a sample of my project with dummy data.

Attachment: sample_d610b2a5.zip

[Vijay Ravi]

Hi Marc,

We have validated your reported query regarding addEvent not being properly added in your shared sample. In your shared sample, the resourceID field is not properly mapped, and the eventRendered event is not setting the color. In this case, the newly added event does not have a color, so the event is not shown in the UI, as demonstrated in the code snippet below. Refer to the shared video demo and modified sample for your reference. Kindly try it out.

[index.cshtml]

function onMenuItemSelect(args) {

    var scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];

    var selectedMenuItem = args.item.id;

    var eventObj;

    if (selectedTarget.classList.contains('e-appointment')) {

        eventObj = scheduleObj.getEventDetails(selectedTarget);

    }

    switch (selectedMenuItem) {

        case 'Add':

            var scheduleObj = document.getElementById('schedule').ej2_instances[0];

            var selectedCells = scheduleObj.getSelectedElements();

            var activeCellsData = scheduleObj.getCellDetails(selectedCells.length > 0 ? selectedCells : selectedTarget);

            var event = {

                Id: scheduleObj.getEventMaxID(),

                StartTime: activeCellsData.startTime,

                EndTime: activeCellsData.endTime,

                ProjectId: scheduleObj.getResourcesByIndex(activeCellsData.groupIndex).resourceData.groupId,

                TaskId: scheduleObj.getResourcesByIndex(activeCellsData.groupIndex).resourceData.id,

                Subject: 'Test'

            };

            scheduleObj.addEvent(event);

            break;

           

           case 'Save':

            eventObj.Subject = "Edit Test";

            scheduleObj.saveEvent(eventObj);

            break;

        }

}

 

function onEventRendered(args) {

     var data = args.data;

     var color = data.eventColor ? data.eventColor.toString() : 'red';

     //alert(color);

     if (!args.element) {

         return;

     }

     args.element.style.backgroundColor = color;

     var scheduleObj = document.getElementById('schedule').ej2_instances[0];

     scheduleObj.closeQuickInfoPopup();

}

Please get back to us if you need any further assistance.

Regards,

Vijay

Attachment: addEvent_issue_706b003c.zip

[Marc Walen]

Okay, I finally figured it out. There was nothing wrong with my code except for 1 thing. ResourceId was properly mapped and color was set correctly. I only had to change (found it in the returned sample):

function onActionBegin(args) {

    if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') {

        var data;

        if (args.requestType === 'eventCreate') {

            data = args.data[0];

        } else if (args.requestType === 'eventChange') {

            data = args.data;

        }

        var scheduleObj = document.getElementById('schedule').ej2_instances[0];

        if (!scheduleObj.isSlotAvailable(data.StartTime, data.EndTime)) {

            args.cancel = true;

        }

    }

}

to:

function onActionBegin(args) {

    if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') {

        var data;

        if (args.requestType === 'eventCreate') {

            data = args.data[0];

        } else if (args.requestType === 'eventChange') {

            data = args.data;

        }

        var scheduleObj = document.getElementById('schedule').ej2_instances[0];

        if (!scheduleObj.isSlotAvailable(data.StartTime, data.EndTime)) {

            // args.cancel = true;

        }

    }

}

Thank you for your efforts.

[Indhumathy Loganathan]

Hi Marc,

We are glad to hear that your reported query has been resolved. Please get back to us if you need any further assistance.

Regards,

Indhumathy L