Articles in this section
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.


  1. Create a Schedule sample with the Custom Appointment window by referring the following links.


Sample link:!/azure/schedule/CustomWindow


Document link:


  1. 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.


<div id="customWindow" style="display: none">
        <form id="custom">
            <table width="100%" cellpadding="5">
                          <input id="EndTime" type="text" value="" name="EndTime" />
                            <input type="text" id="Room" />
                        <td colspan="2">
                            <input type="text" id="Owner" />
            <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>
  1. Add the following additional code changes for the newly added fields in the Script section as follows.


      // 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 () {
                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' });
                dataSource: Rooms,
                fields: { text: "text", id: "id", value: "text" }
                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");
            $("#StartTime").ejDateTimePicker({ value: args.startTime });
            $("#EndTime").ejDateTimePicker({ value: args.endTime });
            if (!ej.isNullOrUndefined( {
                if ($("e-alldaycells"))
                    $("#allday").prop("checked", true);
            if (!ej.isNullOrUndefined(args.appointment)) {
                var userValue;
                $("#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({ 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");
        //Saves the appointment object with the additional field details
        function save() {
            if ($("#subject").val().trim() == "") {
                return false;
            var obj = {}, temp = {}, rType;
                obj["RecurrenceRule"] = null;
            var roomobj = $("#Room").data("ejDropDownList");
            var ownerobj = $("#Owner").data("ejDropDownList");
            obj["RoomId"] = roomobj.getSelectedItemsID()[0];
            obj["OwnerId"] = ownerobj.getSelectedItemsID()[0];
            var object = $("#Schedule1").data("ejSchedule");
        // Clears the fields values from the appointment window
        function clearFields() {
            $("#allday").prop("checked", false);
            $("#recurrence").prop("checked", false);
            document.getElementById("rType").selectedIndex = "0";
            $("tr.recurrence").css("display", "none");
  1. Initialize the client-side event appointmentWindowOpen to open the custom appointment window as follows. 


            var dManager = window.Startend;
                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"


  1. Now, run the sample and you can view the newly added Owner field and Room field in the Custom appointment window.


Room field values in the dropdownlist

Figure 1: Room field values in the dropdownlist

Owner field values in the dropdownlist

Figure 2: Owner field values in the dropdownlist

Edit/View appointment details

Figure 3: Edit/View appointment details

Sample link:

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied