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.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
<script type="text/javascript">
$(function () {
$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
currentDate: new Date(2014, 4, 5),
appointmentSettings: {
dataSource:[{
Id: 2,
Subject: "Project Review.",
StartTime: new Date(2014, 3, 3, 07, 00),
EndTime: new Date(2014, 3, 3, 08, 30),
Description: "",
AllDay: false,
Recurrence: false
}]
},
cellClick: "OnCellClick",
appointmentClick: "OnAppointmentClick",
});
});
function OnCellClick(args) { //This function will be called when the cell is clicked
//args.startTime - start time of the cell clicked will be returned
//args.endTime - end time of the cell clicked will be returned
//args.type - event name will be returned
//args.resources - resoure name of the cell clicked will be returned
var obj = {};
obj["Subject"] = "Test Appointment";
obj["StartTime"] = args.startTime;
obj["EndTime"] = args.endTime;
var object = $("#Schedule1").data("ejSchedule");
object.saveAppointment(obj); // Here we are passing the object collection in Json format to public saveAppointment function
}
function OnAppointmentClick(args) { // This function will be called when the appointment is clicked
//args.appointment – Entire appointment details will be returned
//args.type - event name will be returned
}
</script>
<Code>
Please let us know, if you need any further assistance on this.
Regards,
Karthigeyan
Hi Jarrod,
Thanks for your update.
When an existing appointment is clicked, the event “appointmentClick” will be triggered. In this event you can retrieve the existing appointment’s start time and end time. The whole duration of the cells underlying the existing appointment will be as same as the existing appointment’s duration. So by using the information retrieved from the event “appointmentClick” you can achieve your requirement on “creating another appointment at that particular time”. Please find the following code example to retrieve the appointment start time and end time using the event “appointmentClick”.
<Code>
<script type="text/javascript">
$(function () {
$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
currentDate: new Date(2014, 4, 5),
appointmentSettings: {
dataSource: [{
Id: 2,
Subject: "Project Review.",
StartTime: new Date(2014, 3, 3, 07, 00),
EndTime: new Date(2014, 3, 3, 08, 30),
Description: "",
AllDay: false,
Recurrence: false
}]
},
appointmentClick: "OnAppointmentClick",
});
});
function OnAppointmentClick(args) { // This function will be called when the appointment is clicked
//args.appointment – Entire appointment details will be returned
//args.appointment.StartTime - Start time of the appointment will be returned
//args.appointment.EndTime - End time of the appointment will be returned
//args.type - event name will be returned
var obj = {};
obj["Subject"] = "Test Appointment";
obj["StartTime"] = args.appointment.StartTime; // Here existing appointment start time is given to the object collection
obj["EndTime"] = args.appointment.EndTime; // Here existing appointment end time is given to the object collection
var object = $("#Schedule1").data("ejSchedule");
object.saveAppointment(obj); // Here we are passing the object collection in Json format to public saveAppointment function
}
</script>
<Code>
Regards,
Karthigeyan
Hi Jarrod,
Thanks for your update.
We have analyzed your requirement “Creation of appointment with in the existing appointment duration” that can be achieved only by adding “pointer-events” css to the appointment, setting it to none. Once the mentioned css is added to appointment we can’t edit/delete or perform any kind of editing options with that appointment. It is the only possible way to achieve your scenario without selecting the underlying cell, to the right of the appointment space. Kindly find the following code example we have used to achieve your requirement.
<Code>
<script type="text/javascript">
$(function () {
$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
currentDate: new Date(2014, 4, 5),
appointmentSettings: {
dataSource: [{
Id: 2,
Subject: "Project Review.",
StartTime: new Date(2014, 3, 3, 07, 00),
EndTime: new Date(2014, 3, 3, 08, 30),
Description: "",
AllDay: false,
Recurrence: false
}]
},
cellClick: "OnCellClick",
create: "onCreate"
});
});
function OnCellClick(args) { //This function will be called when the cell is clicked
//args.startTime - start time of the cell clicked will be returned
//args.endTime - end time of the cell clicked will be returned
//args.type - event name will be returned
//args.resources - resoure name of the cell clicked will be returned
var obj = {};
obj["Subject"] = "Test Appointment";
obj["StartTime"] = args.startTime;
obj["EndTime"] = args.endTime;
var object = $("#Schedule1").data("ejSchedule");
object.saveAppointment(obj); // Here we are passing the object collection in Json format to public saveAppointment function
}
function onCreate() { // This function will be called when the schedule initially loads
this.element.find('.e-appointwrapper').css("pointer-events", "none"); // Here we are adding pointer-events css to appointment div in order to select the underlying cell
}
</script>
<Code>
Regards,
Karthigeyan
<script type="text/javascript">
$(function () {
var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(10));
$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
currentDate: new Date(2014, 4, 5),
appointmentSettings: {
dataSource: [{
Id: 2,
Subject: "Project Review.",
StartTime: new Date(2014, 3, 3, 07, 00),
EndTime: new Date(2014, 3, 3, 08, 30),
Description: "",
AllDay: false,
Recurrence: false
}]
},
cellClick: "OnCellClick",
create: "onCreate"
});
});
function OnCellClick(args) { //This function will be called when the cell is clicked
//args.startTime - start time of the cell clicked will be returned
//args.endTime - end time of the cell clicked will be returned
//args.type - event name will be returned
//args.resources - resoure name of the cell clicked will be returned
var predicate2 = ej.Predicate(this.model.appointmentSettings["endTime"], ej.FilterOperators.greaterThanOrEqual, args.endTime).and(this.model.appointmentSettings["startTime"], ej.FilterOperators.lessThanOrEqual, args.endTime);
var predicate1 = ej.Predicate(this.model.appointmentSettings["startTime"], ej.FilterOperators.greaterThanOrEqual, args.startTime).and(this.model.appointmentSettings["startTime"], ej.FilterOperators.lessThanOrEqual, args.startTime);
var predicate = predicate2["or"](predicate1); // here we are filtering the appointment which has the start time and end time of the cell clicked
var app = new ej.DataManager(this._processed).executeLocal(new ej.Query().where(predicate));
this.deleteAppointment(app[0].Guid); // here the Guid of the filtered appointment is passed to the public delete function
var obj = {};
obj["Subject"] = "Test Appointment";
obj["StartTime"] = args.startTime;
obj["EndTime"] = args.endTime;
var object = $("#Schedule1").data("ejSchedule");
object.saveAppointment(obj); // Here we are passing the object collection in Json format to public saveAppointment function
}
function onCreate() { // This function will be called when the schedule initially loads
this.element.find('.e-appointwrapper').css("pointer-events", "none"); // Here we are adding pointer-events css to appointment div in order to select the underlying cell
}
</script>
<Code>
In the above code example, if the existing appointment is clicked then the clicked appointment will be deleted and the new appointment will be created. This process is carried out in “cellClick” event.
Regards,
Karthigeyan
Hi Jarrod,
Thanks for your update.
We are unable to reproduce the reported issue at our end. Appointments are getting deleted correctly based on the Guid and the same has been prepared as a sample that can be downloaded from the following location:
http://www.syncfusion.com/downloads/support/forum/120683/ze/cellClick_event-1638065759
JSPlayground link:
http://jsplayground.syncfusion.com/50ua2rlf
Please run the above sample and if the issue still persists at your end, please reproduce the issue in the above sample and update. Else share more information like code example or sample if possible, so that we can analyze the root cause of the issue and provide you solution.
Note: The provided sample is made with the Volume 3 release version 13.3.0.7. If you are using the Volume 2 service pack version 13.2.0.34, kindly replace this .deleteAppointment(app[0].Guid); with .deleteAppointment(app[0].Id); as Guid concept will not be included in the Volume 2 service pack version.
Regards,
K.Karthigeyan
Hi Jarrod,
Thanks for your update.
On analyzing your scenario “Visual Studio/IE/IIS loads a different version of the script - 13.2.0.29” we suspect that the latest scripts may not be referred correctly in your project, or else your project may include multiple script reference which might get loaded through bundle. So, first install the latest version and then verify whether all the required dlls and script files are referred from the current build version installed in your machine. Also, make sure to remove all the old version script and theme files from your project, before adding the new version. If many build versions are installed in your machine, make sure that the same build version files (both the dlls and script files and also the latest theme files) are used in the entire project.
Note: Try to clean and rebuild your application after upgrading to the newer version.
Kindly revert back to us with more information like screenshot or other problems that you are facing while installation if possible, so that we can analyze those scenarios and provide you the required solution.
Regards,
Karthigeyan.
