Loading schedule from serialized json

[Gene Allen]

I'm saving appointments as serialized JSON in a database.  

Here's an example record:

>>  {"Subject":"bubba","Location":"bubba","StartTime":"2022-08-08T16:30:00.000Z","EndTime":"2022-08-08T17:00:00.000Z","IsAllDay":false,"StartTimezone":null,"EndTimezone":null,"Description":"bubba","CustomerId":"3eb02b34-1814-4e9f-bf42-66b90d469522","TaskId":"582e53cf-f6cf-4a00-ab22-9e805eec4566","CpaUserId":"ee340704-c088-4543-a18d-a087b1b90579","SaasUserId":"5bb24623-dcd7-441a-944e-21e227946e4e","RecurrenceRule":null,"Id":1,"AppointmentId":"3942c795-6759-4f9f-a612-293767009bb6","Guid":"4a36d886-972b-9f02-7a0b-d49891aa9d1a","CreationDate":"2022-08-11T03:28:12.576371Z"}"

The other columns of the table are for server side processing.

My model is returning a list of these strings from the database.  

How do I load them into the Schedule control?    

[Gene Allen]

Let me be a bit more clear.

I'm adding appointments to a database in the OnActionComplete event handler...here's a bit of the code:

    function OnActionComplete(args) {

        if (args.addedRecords && args.addedRecords.length > 0) {

            args.addedRecords.forEach(v => {

                var EventJson = JSON.stringify(v);

                v = AddAppointment(EventJson);

           });

        }

  }

On a later run I get the EventJson and am trying to add it back to the scheduler like this:

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

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

            try {

                var appt = JSON.parse(data);

                scheduleObj.addEvent(appt);

            }

            catch (e) {

                console.log(e);

            }

        }

the problem is I'm getting this exception:

TypeError: Cannot read properties of undefined (reading 'startDate')

Which makes sense because when I do  JSON.stringify on the appointment, the Json contains 'StartTime' not 'startTime'.

Should I be using something other than  JSON.stringify?

[Gene Allen]

Just to be sure, I changed the JSON to be

{"Subject":"asdasd","Id":4,"startDate":"2018-02-15T15:30:00.000Z","endDate":"2018-02-15T16:00:00.000Z","IsAllDay":false,"RoomId":1,"OwnerId":1}

Note: startDate and endDate and no StartTime or EndTime

Same error.  Maybe the problem is that I'm testing INSIDE the onActionComplete.

I put the code in a Button OnClick and it didn't throw and error, but it's not right.  This is the wrong approach.

I guess I can't do it this way and have to rely on the data source.

[Gene Allen]

Actually...maybe just a bit of guidance would be helpful.

I want to support all the fancy features of the scheduler (recurring, all day events, etc...) so I figured that I'd serialize the appointment as JSON and save it.  Then later, deserialize it back into the scheduler.

Is this the wrong approach?

[Ruksar Moosa Sait]

Hi Gene,

You can load the serialized json data into the scheduler control using the DataManager Adaptors. You can filter appointments at the server side as shown in the below code snippet.

[HomeController.cs]

namespace ScheduleSample.Controllers

{

    public class HomeController : Controller

    {

        ScheduleDataDataContext db = new ScheduleDataDataContext();

        public ActionResult Index()

        {

            return View();

        }       

        public JsonResult LoadData(Params param)

        {

            DateTime start = param.StartDate;

            DateTime end = param.EndDate;

            var data = db.ScheduleEventDatas.Where(app => (app.StartTime >= start && app.StartTime <= end)).ToList();  // Here filtering the events based on the start and end date value.

            return Json(data, JsonRequestBehavior.AllowGet);

        }

 

        public class Params

       {

            public DateTime StartDate { get; set; }

            public DateTime EndDate { get; set; }

        }

    }

}

DataManager using UrlAdaptor:

[Index.js]

dataManager = new DataManager({

    url: "http://localhost:54738/Home/LoadData",

    crudUrl: "http://localhost:54738/Home/UpdateData",

    adaptor: new UrlAdaptor,

    crossDomain: true

  });

Sample: https://stackblitz.com/edit/react-yu3c7u?file=index.js,index.html

Kindly try the sample & attached service and let us know if you need any further assistance.

Regards,

Ruksar Moosa Sait

Attachment: ScheduleService_5e321a06.zip

[Gene Allen]

Thank you Ruksar.

I was unable to get the sample project to compile.

My data model has a record for each appointment and stored within it, is the serialized appointment (I'm saving it in OnActionCompleted event).

I tried to find the documentation on how to load the DataManager directly with JSON, but got a Javascript error (Uncaught ReferenceError: DataManager is not defined)

Here's my code and I've attached the sample project that I'm working with.

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule
@{
    string s  = "{\"Subject\":\"asdasd\",\"Id\":4,\"startDate\":\"2022-08-14T15:30:00.000Z\",\"endDate\":\"2022-08-15T16:00:00.000Z\",\"IsAllDay\":false,\"RoomId\":1,\"OwnerId\":1}";
    string sp  = "{\"Subject\":\"asdasd\",\"Id\":5,\"startDate\":\"2022-08-15T15:30:00.000Z\",\"endDate\":\"2022-08-15T16:00:00.000Z\",\"IsAllDay\":false,\"RoomId\":1,\"OwnerId\":1}";
    List<string> attempt = new List<string>();
    attempt.Add(s);
    attempt.Add(sp);
}

<script>
    var ds = [];
    var jsl = @Html.Raw(Json.Serialize(@attempt));
    jsl.forEach(v => {
        var appt = JSON.parse(v);
        ds.push(appt);
    });

    dataManager = new DataManager(ds);
    var scheduleObj = document.getElementById('schedule1').ej2_instances[0];
    scheduleObj.dataSource = dataManager;
</script>

Attachment: ScheduleProject_ccb74bd1.zip

[Ruksar Moosa Sait]

Hi Gene,

We have checked on your shared codes and let you know that you can load the data onto the scheduler using the DataManager adaptors, and perform CRUD (Add, Edit, and delete) operations, it automatically sends the call to the server and hence serialization and deserialization take place automatically with DataManager. Refer to the below UG section for binding data with th Schedule using DataManager.

https://ej2.syncfusion.com/aspnetcore/documentation/schedule/data-binding#binding-remote-data

if you have used custom names for the Schedule fields like the startDate and endDate, then it is necessary to map the fields in the EventSettings. Refer to the below UG for more details.

https://ej2.syncfusion.com/aspnetcore/documentation/schedule/appointments#binding-different-field-names

Sample & Service:

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScheduleFiles-929493647

Kindly try the sample & attached service and let us know if you need any further assistance.

Regards,

Ruksar Moosa Sait

[Gene Allen]

Thank you Ruksar.

I wasn't able to get the DataManager to work but I did figure out how to get the schedule control to accept what I was storing in the database.    

My goal was to not store the details of an appointment in the database but instead just store whatever the schedule control gave me for an appointment.

Anyway, to get it to work, I had to create a class matching what the control was saving, then deserialize into it, then add it to the control.

Again...thank you for your help.

[Ravikumar Venkatesan]

Hi Gene,

Thanks for the update.

Kindly let us know if you need any further assistance on this.

Regards,

Ravikumar Venkatesan