How to customize the default appointment window of Schedule and perform CRUD actions through it?
The following steps shows the way to customize the default appointment window.
Step 1: Create an MVC application and include the Schedule control in it using this link.
Step 2: Bind the appointmentWindowOpen event as shown below,
$(function () {
var dataManager = ej.DataManager({
// get the appointment data from the specified controller action
url: '@Url.Action("GetData","Home")', // This will trigger to bind the appointment data initially to the Schedule control
crudUrl: '@Url.Action("Batch","Home")', // This will trigger while performing CRUD operation on the Scheduler appointments
crossDomain: true
});
dataManager.adaptor = new ej.UrlAdaptor();
$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
currentDate: new Date(2015, 5, 15),
appointmentSettings: {
dataSource: dataManager,
id: "Id",
subject: "Subject",
startTime: "StartTime",
endTime: "EndTime",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule"
},
appointmentWindowOpen: "onAppointmentWindowOpen"
});
});
Step 3: Define the appointmentWindowOpen event function OnAppointmentWindowOpen which contains the code to customize the default appointment window. The following code example shows the logic.
function onAppointmentWindowOpen(args) {
// to add custom element in default appointment window
if (this._appointmentAddWindow.find(".customfields").length == 0) {
var customDesign = "<tr class='customfields'><td class='e-textlabel'>Organizer</td><td colspan='3'><input class='organizer e-inputtext' type='text' name='Organizer'/></td></tr><tr class='customfields'><td class='e-textlabel'>Event completed </td><td><input class='status' type='checkbox' name='Status'/></td></tr>";
this._appointmentAddWindow.find(".e-appwindow").find(".e-table").eq(0).find("tbody").eq(0).append(customDesign);
this._appointmentAddWindow.find(".e-appwindow").find(".beverages,.catering").ejCheckBox();
}
if (!ej.isNullOrUndefined(args.appointment)) {
// if double clicked on the appointments, retrieve the custom field values from the appointment object and fills it in the appropriate fields.
this._appointmentAddWindow.find(".organizer").val(args.appointment.Organizer);
this._appointmentAddWindow.find(".status").ejCheckBox({ checked: args.appointment.Status });
}
else {
// if double clicked on the cells, clears the field values.
this._appointmentAddWindow.find(".organizer").val("");
this._appointmentAddWindow.find(".status").ejCheckBox({ checked: false });
}
}
Step 4: To perform CRUD operations with the additional custom field, use the below code.
public JsonResult Batch(EditParams param)
{
if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments
{
var value = param.action == "insert" ? param.value : param.added[0];
int intMax = db.Appointments.ToList().Count > 0 ? db.Appointments.ToList().Max(p => p.Id) : 1;
DateTime startTime = Convert.ToDateTime(value.StartTime);
DateTime endTime = Convert.ToDateTime(value.EndTime);
Appointment appoint = new Appointment()
{
Id = intMax + 1,
StartTime = startTime,
EndTime = endTime,
StartTimeZone=value.StartTimeZone,
EndTimeZone=value.EndTimeZone,
Subject = value.Subject,
AllDay = value.AllDay,
Recurrence = value.Recurrence,
RecurrenceRule = value.RecurrenceRule,
Organizer = value.Organizer,
Status = value.Status
};
db.Appointments.InsertOnSubmit(appoint);
db.SubmitChanges();
}
if (param.action == "remove" || param.deleted != null) // this block of code will execute while removing the appointment
{
if (param.action == "remove")
{
int key = Convert.ToInt32(param.key);
Appointment app = db.Appointments.Where(c => c.Id == key).FirstOrDefault();
if (app != null) db.Appointments.DeleteOnSubmit(app);
}
else
{
foreach (var apps in param.deleted)
{
Appointment app = db.Appointments.Where(c => c.Id == apps.Id).FirstOrDefault();
if (apps != null) db.Appointments.DeleteOnSubmit(app);
}
}
db.SubmitChanges();
}
if ((param.action == "batch" && param.changed != null) || param.action == "update") // this block of code will execute while updating the appointment
{
var value = param.action == "update" ? param.value : param.changed[0];
var filterData = db.Appointments.Where(c => c.Id == Convert.ToInt32(value.Id));
if (filterData.Count() > 0)
{
DateTime startTime = Convert.ToDateTime(value.StartTime);
DateTime endTime = Convert.ToDateTime(value.EndTime);
Appointment appoint = db.Appointments.Single(A => A.Id == Convert.ToInt32(value.Id));
appoint.StartTime = startTime;
appoint.EndTime = endTime;
appoint.StartTimeZone = value.StartTimeZone;
appoint.EndTimeZone = value.EndTimeZone;
appoint.Subject = value.Subject;
appoint.Recurrence = Convert.ToByte(value.Recurrence);
appoint.AllDay = value.AllDay;
appoint.RecurrenceRule = value.RecurrenceRule;
appoint.Organizer = value.Organizer;
appoint.Status = value.Status;
}
db.SubmitChanges();
}
IEnumerable data = new ScheduleDataDataContext().Appointments.Take(200);
return Json(data, JsonRequestBehavior.AllowGet);
}
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-61329619

Figure 1: Default appointment window with customized fields.