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
