1. Home
  2. Forum
  3. jQuery
  4. How can I remake the schedule to work in SPA MVC ?

How can I remake the schedule to work in SPA MVC ?

I've attached the files in the RAR file. I want to get the Appointment list in Syncfusion schedule. I've included the code screenshot as well. Where am I going wrong ?
Whenever I try to run it wont show anything. Btw this is a Single Page Application. 

Attachment: Screenshots_cac72fb.rar

3 Replies
KK Karthigeyan Krishnamurthi Syncfusion Team December 20, 2017 11:37 AM UTC

Hi Shalini, 
 
Thank you for contacting Syncfusion support. 
 
In the provided image, appointment (s) fields seems to be not mapped correctly and StartTime field may not be defined in your database collection which could be the cause for the issue. We have prepared the sample for your reference which can be downloaded from the below location. 

Note: The appointment field mapper names are case sensitive, as it should be provided with the same name values with which it is defined in the database. For example, if you have defined the field name StartTime in database, then the same casing should be followed to map it under appointmentSettings as startTime: “StartTime” 

 
 
<Code> 
$("#Schedule1").ejSchedule({ 
    width: "100%", 
    height: "525px", 
    currentDate: new Date(2015, 5, 15), 
    appointmentSettings: { 
        applyTimeOffset: false, 
        dataSource: dataManager, 
        id: "Id", 
       subject: "Subject", 
        startTime: "StartTime", 
        endTime: "EndTime", 
        allDay: "AllDay", 
        recurrence: "Recurrence", 
        recurrenceRule: "RecurrenceRule" 
    } 
}); 
</Code> 
 
Note: If still issue persist, kindly share the list collection with us to proceed further. 
 
Regards, 
Karthigeyan 
 


SH Shalini December 21, 2017 06:16 AM UTC

This is the list


[
    {
        "appointmentID": xxxx,
        "patientName": "xxxx",
        "doctorName": "xxxx",
        "appointmentDate": "21-Sep-17 12:00:45 PM",
        "status": "xxxx",
        "patientID": xxxx
        "doctorID": xxxx
    }
    (and so on)
]


So I need to bind this data to the schedule control. Also how can I make custom "appointment settings" with custom "columns" ? Do the columns need to have the same name as that in the table ?

KK Karthigeyan Krishnamurthi Syncfusion Team December 21, 2017 06:33 AM UTC

 
Thanks for your update. 
 
As mentioned earlier, StartTime field is not used in your list collection which is the cause for the issue. Both start and end time are mandatory for appointment rendering in Schedule. Kindly include StartTime field in your list collection as shown below to overcome the reported issue. 

By default, custom fields used in the appointment collection can be accessed in Schedule and appointmentSettings will not support the custom fields. 

<Code> 
var dManager = [{ 
    appointmentID: 101, 
    doctorName: "Shalini", 
    patientName: "Jack", 
    StartTime: "21-Sep-17 11:00:45 AM", 
    appointmentDate: "21-Sep-17 12:00:45 PM", 
    status: "xxxx", 
    patientID: 1, 
    doctorID: 2 
}]; 
$("#Schedule1").ejSchedule({ 
    width: "100%", 
    height: "525px", 
    currentDate: new Date(2017, 8, 21), 
    appointmentSettings: { 
        applyTimeOffset: false, 
        dataSource: dManager, 
        id: "appointmentID", 
        subject: "doctorName", 
        startTime: "StartTime", 
        endTime: "appointmentDate" 
    } 
}); 
</Code> 

Regards, 
Karthigeyan 


Loader.
Up arrow icon