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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customized add appointment window

Thread ID:

Created:

Updated:

Platform:

Replies:

119697 Jul 22,2015 12:38 PM UTC Jul 23,2015 11:24 AM UTC JavaScript 1
loading
Tags: ejSchedule
desfero
Asked On July 22, 2015 12:38 PM UTC

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

Sarath Kumar P K [Syncfusion]
Replied On 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

http://www.syncfusion.com/downloads/support/forum/119697/ze/CustomWindow89826777

 

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

<code>

   $("#Schedule1").ejSchedule({

       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>

                    </tr>

                    <tr>

                        <td>Capacity:

                        </td>

                        <td colspan="2">

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

                        </td>

                    </tr><tr>

                        <td>Status:

                        </td>

                        <td colspan="2">

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

                        </td>

                    </tr>


   ---------------------------

                 ---------------------------

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


//Here we populate the appointment details before window opens

function onAppointmentWindowOpen(args) {

            args.cancel = true;

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

            quickobj.close();

            $("#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("clearText");

                $("#Owner").ejDropDownList("clearText");

                $("#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];

            $("#customWindow").ejDialog("close");

            var object = $("#Schedule1").data("ejSchedule");

            object.saveAppointment(obj);

            clearFields();

        }

</code>

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.

 

Regards,

Sarath Kumar P K


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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

;