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.
