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"
            });