How to add additional controls and customize the default quick window?
The following steps shows the way to customize the Quick window.
Step 1: Create a scheduler default sample by referring this link and bind the create, cellClick, appointmentClick, beforeAppointmentCreate events as shown below,
Step 2: Define all those above mentioned events with event functions such as OnCreate, OnCellClick, OnAppointmentClick, and OnBeforeAppointmentCreate, which contains the code to customize the quick window.
Within the OnCreate function, the code to add custom fields in the quick window is defined.
function OnCreate(args) {
this._renderQuickWindow();
if ($(".customfields1").length == 0) {
var customDesign1 = "<tr class='customfields1'><td class='customlabel'>Description</td><td><input name='Description' class='Description' type='text'/></td></tr>";
var customDesign = "<tr class='customfields'><td><div class='descValue'/></td></tr>";
$(".e-subjectlabel").parent().after(customDesign1); // here we are adding the custom fields in quick window
$(".e-quicksubject").parent().parent().after(customDesign); // here we are adding the custom fields in app quick window
$(".e-detailedwindow").css("display", "none");
}
}
Within the OnAppointmentClick function, the code to change the date format of quick appointment detail window and to get the custom field value is defined.
function OnAppointmentClick(args) {
if (!ej.isNullOrUndefined(args.appointment.Description))
this._quickAppDetailsWindow.find(".descValue").html(args.appointment.Description);
else
this._quickAppDetailsWindow.find(".descValue").html("");
$(".e-quickbottomcontainer").find(".e-floatright").css("display", "none"); //to hide edit appointment button
appointment = args.appointment;
var x = document.getElementById("Schedule1AppDetailsWindow");
x.addEventListener("focus", myFocusFunction);
}
function myFocusFunction() { // this will be called when the quick window is focused
var obj = $("#Schedule1").data("ejSchedule")
if (appointment.StartTime.getDate() != appointment.EndTime.getDate())
dateShow = ej.format(appointment.StartTime, "MMMM dd") + " - " + ej.format(appointment.EndTime, "MMMM dd");
else
dateShow = ej.format(appointment.StartTime, "MMMM dd")
obj._quickAppDetailsWindow.find('.e-quickstartendtime').html(dateShow); //to change the time format in quick window header
obj._quickAppDetailsWindow.blur();
}
Within the OnClick function, the code to change the date format of quick window is defined.
function OnCellClick(args) {
args.quickString = ej.format(args.startTime, "dddd MMMM dd yyyy");
this._quickAppointWindow.find(".Description").val("");
}
Within the OnBeforeAppointmentCreate function, the code to save an appointment with custom field is defined.
function OnBeforeAppointmentCreate(args) {
args.appointment["Description"] = this._quickAppointWindow.find('.Description').val(); //to save description while saving the appointment
}
Sample: https://jsplayground.syncfusion.com/1gpikzyo
Step 3: Run the above sample and the quick window will be displayed with customizations as shown below.
Figure 1: Customized quick window displaying on appointment click.
Figure 2: Customized quick window displaying on cell click
