We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add additional fields in the custom appointment window?

Platform: JavaScript |
Control: ejSchedule |
Published Date: June 16, 2015 |
Last Revised Date: May 28, 2019

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:

http://js.syncfusion.com/demos/web/#!/azure/schedule/CustomWindow

 

Document link:

http://docs.syncfusion.com/js/schedule/customization

 

  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.

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

 

  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:

http://www.syncfusion.com/downloads/support/forum/119220/ze/CustomField-449340692

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon