Category / Section
How to customize the Recurrence editor?
1 min read
The following steps shows the way to customize the recurrence editor.
Step 1: Create a scheduler default sample and bind the appointmentWindowOpen event as shown below,
$(function () { $("#Schedule1").ejSchedule({ width: "100%", height: "525px", currentDate: new Date(2014, 4, 5), appointmentSettings: { dataSource: [], id: "Id", subject: "Subject", startTime: "StartTime", endTime: "EndTime", description: "Description", allDay: "AllDay", recurrence: "Recurrence", recurrenceRule: "RecurrenceRule" }, appointmentWindowOpen: "OnAppointmentWindowOpen" }); });
Step 2: Define the appointmentWindowOpen event function OnAppointmentWindowOpen which contains the code to customize the recurrence editor. The following code example shows the logic.
function OnAppointmentWindowOpen() { this._appointmentAddWindow.find(".e-recurrenceeditor").ejRecurrenceEditor({ frequencies: ["daily", "weekly", "monthly"] }); // Repeat field is customized if (this._appointmentAddWindow.find(".e-recurrenceeditor").children().eq(0).hasClass("e-floatright")) { var element = this._appointmentAddWindow.find(".e-recurrenceeditor").children(); element[0].parentNode.replaceChild(element[0], element[1]); element[0].parentNode.insertBefore(element[1], element[0]); } var recurEdit = this._appointmentAddWindow.find(".e-recurrenceeditor").data("ejRecurrenceEditor"); $(".e-recurrenceeditor").ejRecurrenceEditor({ change: function (args) { this.element.find('.monthposition').ejRadioButton({ checked: true }); this.element.find('.e-recuruntil').ejRadioButton({ checked: true }); // Every field is customized if (this._rRuleFreq != "WEEKLY") recurEdit._recurrenceContent.find("#" + recurEdit._id + "_every").addClass("custom"); else recurEdit._recurrenceContent.find("#" + recurEdit._id + "_every").removeClass("custom"); } }); // Ends fields are customized recurEdit._recurrenceContent.find("#endsonnever").addClass("custom"); recurEdit._recurrenceContent.find("#endsonafter").addClass("custom"); recurEdit._recurrenceContent.find("#monthdaytr").addClass("custom"); }
Sample: https://jsplayground.syncfusion.com/kvtttmen
Step 3: Run the above sample and the recurrence editor is customized as shown below.
Figure 1: Scheduler with customized recurrence editor.