How to open detailed window in single cell and appointment click?
This knowledge base article explains the way to open detailed window in single cell and appointment click.
Step 1: Create a default schedule by referring the instructions given in the following UG link.
https://help.syncfusion.com/js/schedule/getting-started
Also define the cellClick, appointmentClick and appointmentWindowOpen events as shown below.
$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
currentDate: new Date(2017, 5, 5),
appointmentSettings: {
dataSource: dManager,
id: "Id",
subject: "Subject",
startTime: "StartTime",
endTime: "EndTime",
description: "Description",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule"
},
cellClick: "appWindow",
appointmentClick: "OnAppointmentClick",
appointmentWindowOpen: "onAppointmentWindowOpen"
});
Step 2: Within the cellClick scheduler event, clicked cell details can be retrieved. Disable the quick window by setting args.cancel to true and pass that information to _appointmentWindow function to open the detailed window.
function appWindow(args) {
var obj = $("#Schedule1").data("ejSchedule");
args.cancel = true;
obj._appointmentWindow(args.target);
}
Step 3: Within the appointmentClick scheduler event, clicked appointments details can be retrieved which can be used to open the edit window.
function OnAppointmentClick(args) {
args.cancel = true;
if (!args.appointment.Recurrence)
this._showAppointmentDetails(args.appointment.Guid, true);
else {
if (ej.isNullOrUndefined(this._recurEditWindow)) this._renderRecurEditWindow();
this._parentId = args.appointment.ParentId;
this._recurEditWindow.ejDialog("open");
this._recurEditWindow.focus();
this._deleteBeforeOpen();
}
}
Step 4: Within the appointmentWindowOpen scheduler event, we should manually rename the title of the detailed window based on the cell and appointment click as shown below.
Default window
function onAppointmentWindowOpen(args) {
if (!ej.isNullOrUndefined(args.appointment))
$("#Schedule1AppointmentAddEditWindow_title").find('.e-title').html("Edit Appointment");
else
$("#Schedule1AppointmentAddEditWindow_title").find('.e-title').html("Create Appointment");
}
Custom window
function onAppointmentWindowOpen(args) {
args.cancel = true;
var quickobj = $("#Schedule1AppointmentQuickWindow").data("ejDialog");
quickobj.close();
$("#StartTime").ejDateTimePicker({ value: args.startTime });
$("#EndTime").ejDateTimePicker({ value: args.endTime });
if (!ej.isNullOrUndefined(args.target)) {
if ($(args.target.currentTarget).hasClass("e-alldaycells"))
$("#allday").prop("checked", true);
else
args.model.currentView == "month" ? $("#allday").prop("checked", true) : $("#allday").prop("checked", false);
$("#StartTime,#EndTime").ejDateTimePicker({ enabled: ($(args.target.currentTarget).hasClass("e-alldaycells") || $(args.target.currentTarget).hasClass("e-monthcells") || args.model.currentView == "month") ? false : true });
}
if (!ej.isNullOrUndefined(args.appointment)) {
$("#customId").val(args.appointment.Id);
$("#subject").val(args.appointment.Subject);
$("#customdescription").val(args.appointment.Description);
$("#StartTime").ejDateTimePicker({ value: new Date(args.appointment.StartTime) });
$("#EndTime").ejDateTimePicker({ value: new Date(args.appointment.EndTime) });
$("#allday").prop("checked", args.appointment.AllDay);
$("#recurrence").prop("checked", args.appointment.Recurrence);
if (args.appointment.Recurrence) {
$("#rType").val(args.appointment.RecurrenceRule.split(";")[0].split("=")[1].toLowerCase());
$("tr.recurrence").css("display", "table-row");
}
$("#customWindow_title").find('.e-title').html("Edit Appointment");
$("#customWindow").ejDialog("open");
}
else {
$("#customWindow_title").find('.e-title').html("Create Appointment");
$("#customWindow").ejDialog("open");
}
}
Step 5: Run the sample and detailed window will be opened on single cell and appointment click.
Default window: https://jsplayground.syncfusion.com/lb2zjwlk
Custom window: https://jsplayground.syncfusion.com/lxobktuo
