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. Image for the cookie policy date

Customized add appointment window

I want to customize defaul appointment window, becous i need some additional fields(capacity, status), but i don't know how to get similar functionality with resources binding.
Problem is with resources, becous i use resources(employees, projects), and with default appointment window we get this functionality out of the box. 
How to create similar functionality in custom appointment window?what i want i my custom add appointment window

1 Reply

SK Sarath Kumar P K Syncfusion Team July 23, 2015 11:24 AM UTC

Hi Desfero,


Thank you for using Syncfusion Products.


We have prepared the Schedule sample on which we have customized the appointment window (using Custom Appointment window) as per your requirement for using the resources functionality in it along with other additional fields like capacity and status in it, which can be downloaded from the following location



Refer the below code snippet to design the Custom Appointment window with Resource grouping options and your required custom fields (capacity and status),



       width: "100%",

       height: "525px",

       timeZone: "UTC +00:00",

       currentDate:new Date(2015,4,10),

       appointmentWindowOpen: "onAppointmentWindowOpen",//Bind the appointmentWindow open event

       appointmentSettings: {

           dataSource: dManager,

           id: "Id",

           subject: "Subject",

           startTime: "StartTime",

           endTime: "EndTime",

           description: "Description",

           allDay: "AllDay",

           recurrence: "Recurrence",

           recurrenceRule: "RecurrenceRule",

           resourceFields: "RoomId,OwnerId"




//Custom appointment window design

<div id="customWindow" style="display: none">

        <form id="custom">

            <table width="100%" cellpadding="5">



                            <textarea id="customdescription" name="Description" rows="3" cols="50" style="width: 100%; resize: vertical"></textarea>






                        <td colspan="2">

                            <input id="capacity" type="text" value="" name="Capacity" style="width:100%"/>





                        <td colspan="2">

                            <input id="status" type="text" value="" name="Status" style="width:100%"/>








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



//Here we populate the appointment details before window opens

function onAppointmentWindowOpen(args) {

            args.cancel = true;

            var quickobj = $("#Schedule1AppointmentQuickWindow").data("ejDialog");


            $("#StartTime").ejDateTimePicker({ value: args.startTime, width: "150px" });

            $("#EndTime").ejDateTimePicker({ value: args.endTime, width: "150px" });

            if (!ej.isNullOrUndefined(args.target)) {

                if ($(args.target.currentTarget).hasClass("e-alldaycells"))

                    $("#allday").prop("checked", true);


            if (!ej.isNullOrUndefined(args.appointment)) {

                var userValue;



                $("#EndTime").ejDateTimePicker({ value: new Date(args.appointment.EndTime) });

                var roomObject = $("#Room").data("ejDropDownList");

                var roomValue = ej.DataManager(Rooms).executeLocal(new ej.Query().where("id", "equal", args.appointment.RoomId))[0]["text"];

                var ownerObject = $("#Owner").data("ejDropDownList");

                var ownerValue = ej.DataManager(Owners).executeLocal(new ej.Query().where("id", "equal", args.appointment.OwnerId))[0]["text"];



                $("#Room").ejDropDownList({ text: roomValue, value: roomValue });

                $("#Owner").ejDropDownList({ text: ownerValue, value: ownerValue });





//Get the appointment window field values and saved in schedule appointment object.

function save() {

            var obj = {}, temp = {}, rType;

            formelement = $("#customWindow").find("#custom").get(0);



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





Here we have shared some of the important codes that we have used for the custom design. You can find the complete coding from the attached sample.

Note: We would like to let you know that it is also possible to achieve this behavior as a workaround in default appointment window itself with your required custom fields and resource binding options. If we have misunderstand your query or else if you need to customize the default appointment window instead of using custom window, please revert back to us, so that we will provide the way to achieve it.


Please let us know if you need any further assistance on this.



Sarath Kumar P K

Live Chat Icon For mobile
Up arrow icon