Category / Section
How to add additional fields in the custom appointment window?
3 mins read
You can add and display the additional fields such as Room field, Owner field etc., in the customized appointment window. The following steps helps you to include and display the additional fields in the custom appointment window.
- Create a Schedule sample with the Custom Appointment window by referring the following links.
Sample link:
https://js.syncfusion.com/demos/jquery/#!/azure/schedule/CustomWindow
Document link:
https://help.syncfusion.com/js/schedule/customization
- To the existing Custom Appointment window design, add the two additional dropdown controls, one for the Owner field and another for the Room field as follows.
HTML
<div id="customWindow" style="display: none"> <form id="custom"> <table width="100%" cellpadding="5"> <tbody> ---------------------------- ---------------------------- <tr> <td>EndTime: </td> <td> <input id="EndTime" type="text" value="" name="EndTime" /> </td> </tr> <tr> <td>Room: </td> <td> <input type="text" id="Room" /> </td> </tr> <tr> <td>Owner: </td> <td colspan="2"> <input type="text" id="Owner" /> </td> </tr> --------------------------------------- --------------------------------------- </tbody> </table> </form> <div> <button type="submit" onclick="cancel()" id="btncancel" style="float: right; margin-right: 20px;">Cancel</button> <button type="submit" onclick="save()" id="btnsubmit" style="float: right; margin-right: 20px;">Submit</button> </div> </div>
- Add the following additional code changes for the newly added fields in the Script section as follows.
JavaScript
// DataSource values for the "Room and Owner field"
var Rooms = [{ text: "ROOM1", id: 1, groupId: 1, color: "#cb6bb2" },
{ text: "ROOM2", id: 2, groupId: 1, color: "#56ca85" }];
var Owners = [
{ text: "Nancy", id: 1, groupId: 1, color: "#ffaa00" },
{ text: "Steven", id: 3, groupId: 2, color: "#f8a398" },
{ text: "Michael", id: 5, groupId: 1, color: "#7499e1" }
];
// Creates the additional dropdownlist fields
$(function () {
$("#customWindow").ejDialog({
width: 600,
height: "auto",
position: { X: 400, Y: 200 },
showOnInit: false,
enableModal: true,
title: "Create Appointment",
enableResize: false,
allowKeyboardNavigation: false,
close: "clearFields"
});
$("#btncancel").ejButton({ width: '85px' });
$("#btnsubmit").ejButton({ width: '85px' });
$("#Room").ejDropDownList({
dataSource: Rooms,
fields: { text: "text", id: "id", value: "text" }
});
$("#Owner").ejDropDownList({
dataSource: Owners,
fields: { text: "text", id: "id", value: "text" }
});
});
//Displays the custom appointment window with the additional fields
function onAppointmentWindowOpen(args) {
args.cancel = true;
var quickobj = $("#Schedule1AppointmentQuickWindow").data("ejDialog");
quickobj.close();
$("#subject").removeClass("validation");
$("#customdescription").removeClass("validation");
$("#StartTime").ejDateTimePicker({ value: args.startTime });
$("#EndTime").ejDateTimePicker({ value: args.endTime });
if (!ej.isNullOrUndefined(args.target)) {
if ($(args.target.currentTarget).hasClass("e-alldaycells"))
$("#allday").prop("checked", true);
}
if (!ej.isNullOrUndefined(args.appointment)) {
var userValue;
$("#customId").val(args.appointment.Id);
$("#subject").val(args.appointment.Subject);
$("#customdescription").val(args.appointment.Description);
$("#StartTime").ejDateTimePicker({ value: new Date(args.appointment.StartTime) });
$("#EndTime").ejDateTimePicker({ value: new Date(args.appointment.EndTime) });
var roomObject = $("#Room").data("ejDropDownList");
var roomValue = ej.DataManager(roomObject.model.dataSource).executeLocal(new ej.Query().where("id", "equal", args.appointment.RoomId))[0]["text"];
var ownerObject = $("#Owner").data("ejDropDownList");
var ownerValue = ej.DataManager(ownerObject.model.dataSource).executeLocal(new ej.Query().where("id", "equal", args.appointment.OwnerId))[0]["text"];
$("#Room").ejDropDownList("clearText");
$("#Owner").ejDropDownList("clearText");
$("#Room").ejDropDownList({ text: roomValue, value: roomValue });
$("#Owner").ejDropDownList({ text: ownerValue, value: ownerValue });
$("#allday").prop("checked", args.appointment.AllDay);
$("#recurrence").prop("checked", args.appointment.Recurrence);
if (args.appointment.Recurrence) { $("#rType").val(args.appointment.RecurrenceRule.split(";")[0].split("=")[1].toLowerCase());
$("tr.recurrence").css("display", "table-row");
}
$("#customWindow").ejDialog("open");
}
else
$("#customWindow").ejDialog("open");
}
//Saves the appointment object with the additional field details
function save() {
if ($("#subject").val().trim() == "") {
$("#subject").addClass("error");
return false;
}
var obj = {}, temp = {}, rType;
----------------------------------
----------------------------------
----------------------------------
else
obj["RecurrenceRule"] = null;
var roomobj = $("#Room").data("ejDropDownList");
var ownerobj = $("#Owner").data("ejDropDownList");
obj["RoomId"] = roomobj.getSelectedItemsID()[0];
obj["OwnerId"] = ownerobj.getSelectedItemsID()[0];
$("#customWindow").ejDialog("close");
var object = $("#Schedule1").data("ejSchedule");
object.saveAppointment(obj);
clearFields();
}
// Clears the fields values from the appointment window
function clearFields() {
$("#customId").val("");
$("#subject").val("");
$("#customdescription").val("");
$("#Room").val("");
$("#Owner").val("");
$("#allday").prop("checked", false);
$("#recurrence").prop("checked", false);
document.getElementById("rType").selectedIndex = "0";
$("tr.recurrence").css("display", "none");
}
- Initialize the client-side event appointmentWindowOpen to open the custom appointment window as follows.
JavaScript
var dManager = window.Startend;
$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
currentDate:new Date(2014, 4, 7),
appointmentSettings: {
dataSource: dManager,
id: "Id",
subject: "Subject",
startTime: "StartTime",
endTime: "EndTime",
description: "Description",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule",
resourceFields: "RoomId,OwnerId"
},
appointmentWindowOpen: "onAppointmentWindowOpen"
});
- Now, run the sample and you can view the newly added Owner field and Room field in the Custom appointment window.
Figure 1: Room field values in the dropdownlist
Figure 2: Owner field values in the dropdownlist
Figure 3: Edit/View appointment details
Sample link:
https://www.syncfusion.com/downloads/support/forum/119220/ze/CustomField-449340692