How to Customize the Recurrence Editor Fields in ASP.NET MVC Schedule?

The following steps shows the way to customize the Recurrence window.

Step 1: Create an MVC application and include the EJMVC Schedule control in it by referring the following KB link,

https://support.syncfusion.com/kb/article/3865/how-to-add-the-ejmvc-schedule-control-in-the-mvc-application

Step 2: Define the AppointmentWindowOpen event for Scheduler with appropriate handler. When the appointment window is opened, this event will raise where we can customize the recurrence window.

@(Html.EJ().Schedule("Schedule1")

.Width("100%")

.Height("525px")

.CurrentDate(new DateTime(2016, 10, 25))

.AppointmentSettings(fields => fields.Datasource(ViewBag.datasource)

.Id("Id")

.Subject("Subject")

.StartTime("StartTime")

.EndTime("EndTime")

.Description("Description")

.AllDay("AllDay")

.Recurrence("Recurrence")

.RecurrenceRule("RecurrenceRule"))

.ScheduleClientSideEvents(evt =>

evt.AppointmentWindowOpen("OnAppointmentWindowOpen"))

)

Step 3: OnAppointmentWindowOpen is an event handler function within which the code to customize the recurrence window is defined like how to change the frequencies, make end date read only, hide the radio buttons available to select end date as shown in the below code example.

function OnAppointmentWindowOpen() {

this._appointmentAddWindow.find(".e-recurrenceeditor").ejRecurrenceEditor({ frequencies: ["daily", "weekly", "monthly"] });

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("#endsonuntil").find("#" + this._id + "_daily").ejDatePicker({ readOnly: true });

this.element.find(".recurcount").ejNumericTextbox({ value: 5, readOnly: true });

this.element.find('.monthposition').ejRadioButton({ checked: true });

if (this._rRuleFreq != "WEEKLY")

recurEdit._recurrenceContent.find("#" + recurEdit._id + "_every").addClass("custom");

else

recurEdit._recurrenceContent.find("#" + recurEdit._id + "_every").removeClass("custom");

}

});

recurEdit._recurrenceContent.find("#endsonnever").addClass("custom");

recurEdit._recurrenceContent.find("#monthdaytr").addClass("custom");

}

Step 4: Add the below class under style section to hide the specific controls from UI.

<style>

.custom {

display: none !important;

}

</style>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-2039163921

Step 5: Run the above sample and the recurrence window will be customized as shown below.

Customized recurrence window

Figure 1: Customized recurrence window.

Conclusion

I hope you enjoyed learning about how to customize the recurrence editor fields in ASP.NET MVC Schedule.

You can refer to our ASP.NET MVC Scheduler page to know about its other groundbreaking feature representations. You can also explore our ASP.NET MVC Schedule Documentation to understand how to manipulate data.

For current customers you can check out on our ASP.NET MVC components from the License and Download page. If you are new to Syncfusion, you can try our 30-day free trial to check out our ASP.NET MVC Schedule and other ASP.NET MVC components.

If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to Customize the Recurrence Editor Fields in ASP.NET MVC Schedule?

Access denied