We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the recurrence editor fields?

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://syncfusion.com/kb/3606/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: http://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.

Figure 1: Customized recurrence window.

Article ID: Published Date: Last Revised Date: Platform: Control:
8264 01/02/2018 01/02/2018 ASP.NET MVC Schedule
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon