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