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.
// In the following code block, we are designing the custom form and append to the Schedule element
var customwindow=$("<div id='customWindow' style='display: none'></div>");
var form=$("<form id='custom'/>");
var formtable=$("<table width='100%' cellpadding='5'><tbody><tr style='display: none'><td>Id:</td><td colspan='2'><input id='customId' type='text' name='Id' /></td></tr></tbody></table>");
--------------------------------
--------------------------------
--------------------------------
btndiv = $("<div><button type='submit' data-role='none' onclick='cancel()' id='btncancel' style='float:right;margin-right:20px;margin-bottom:10px;'>Cancel</button><button type='submit' data-role='none' onclick='save()' id='btnsubmit' style='float:right;margin-right:20px;margin-bottom:10px;'>Submit</button></div>");
subtr.appendTo(formtable); dectr.appendTo(formtable); starttr.appendTo(formtable); endtr.appendTo(formtable); alldaytr.appendTo(formtable); recurrencetr.appendTo(formtable);
formtable.appendTo(form);
btndiv.appendTo(form);
form.appendTo(customwindow);
customwindow.appendTo($(element));
itemTemplate.appendTo($(element));
AppointmentWindowOpen event trigger:
itemTemplate.ejSchedule({
width: "100%",
------------------
------------------
create: "onCreate",
appointmentWindowOpen: "onAppointmentWindowOpen", // Here we are declaring the event name
});
onAppointmentWindowOpen event:
function onAppointmentWindowOpen(args) {
args.cancel = true; // Here we are blocking the default window to display the custom window
$("#StartTime").ejDateTimePicker({ value: args.startTime });
$("#EndTime").ejDateTimePicker({ value: args.endTime }); // Here we are assigning the value to the StartTime and EndTime field
-----------------------
-----------------------
if (!ej.isNullOrUndefined(args.appointment)) { // Here we are assigning the value to the fields to display the appointment details while opening the appointment
$("#customId").val(args.appointment.Id);
$("#subject").val(args.appointment.Subject);
------------------------------------
------------------------------------
$("#customWindow").ejDialog("open"); // Here we are opening the custom window
}
else
$("#customWindow").ejDialog("open"); // Here we are opening the custom window
}
</code>
Saving the appointment:
function save() {
// Within this block read the values from the custom form
if ($.trim($("#subject").val()) == "") {
$("#subject").addClass("error");
return false;
}
---------------------------
---------------------------
---------------------------
$("#customWindow").ejDialog("close");
var object = $("#Schedule1").data("ejSchedule"); // Here we are creating the object for scheduler
object.saveAppointment(obj); // Here we are calling the saveAppointment public method by using the created object to save the appointment
clearFields();
}
Regards,
Velmurugan
Hi Velmurugan,
thank you very much for your reply. It gave me a deeper insight in the customization possibilities.
Maybe i can clearify my problem a little bit. I don not need a customized form to edit the appointment, but i want to call an add-method for another table and pass the id of the appointment.
In my example I have a schedule with events, where users can subscribe to. Therefore a user should click on an event in the schedule. Now i want to show the user an already existing add-subscription-form. This form needs the id of the event.
I want to use the onAppointmentClick(). Could you please help me and give me an hint how to call my exisitng HTMLCLient form and how to pass the Id of the selected event in the schedule?
Your help would be appreciated.
Regards,
Alex
Hi Alexandar,
Thanks for your update.
We have prepared a sample as per your requirement to call an existing HTMLClient form on clicking an appointment and also depicted the way to pass the id value of the selected event in the scheduler to it, which can be downloaded from the following location.
http://www.syncfusion.com/downloads/support/forum/121386/ze/Application3-546736971
In the attached sample we have used the following code example.
<code>
itemTemplate.ejSchedule({
width: "100%",
------------------
------------------
showQuickWindow:false,
appointmentClick: "onAppointmentClick"
});
};
};
//onAppointmentClick event:
function onAppointmentClick(args) {
var data = args.appointment;
//Navigate to AddEdit screen
myapp.showAddEdit(data);
}
// add the createdevent for AddEdit screen to get the appointment collecton.
myapp.AddEdit.created = function (screen) {
//Here you can get the appointment collection
var d = screen.__c_Event.Id;
console.log("Event Id",d);
};
</code>
Please let us know, if you need any further assistance.
Regards,
Mahesh
