From 524655062f6de13620ee25ae2bc177a4e453a189 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 27 Mar 2025 17:56:15 +0200 Subject: [PATCH 1/6] docs(Scheduler): Add Recurrence article --- components/scheduler/navigation.md | 2 +- components/scheduler/overview.md | 18 +- components/scheduler/recurrence.md | 432 +++++++++++++++++++++++++++++ docs-builder.yml | 9 +- 4 files changed, 447 insertions(+), 14 deletions(-) create mode 100644 components/scheduler/recurrence.md diff --git a/components/scheduler/navigation.md b/components/scheduler/navigation.md index 9b0eed965f..007b02431e 100644 --- a/components/scheduler/navigation.md +++ b/components/scheduler/navigation.md @@ -5,7 +5,7 @@ description: Navigating the Scheduler for Blazor. slug: scheduler-navigation tags: telerik,blazor,scheduler,navigation published: true -position: 20 +position: 4 --- # Scheduler Navigation diff --git a/components/scheduler/overview.md b/components/scheduler/overview.md index 115c6b0aab..9af386b257 100644 --- a/components/scheduler/overview.md +++ b/components/scheduler/overview.md @@ -95,26 +95,30 @@ The [Scheduler offers different views](slug:scheduler-views-overview) that are s * Timeline (agenda) view -## Editing - -Users can [create, edit and delete Scheduler appointments](slug:scheduler-appointments-edit). The component provides you with the new information so you can store it to the underlying data source. - - ## Navigation The [Scheduler features extensive navigation](slug:scheduler-navigation), which can be both programmatic and managed by the end user. The component can change the currently visible time range, the current view, and toggle business hours only display. -## Templates +## Editing + +Users can [create, edit and delete Scheduler appointments](slug:scheduler-appointments-edit). The component provides you with the new information so you can store it to the underlying data source. -You can [customize the appointment appearance and content via Scheduler templates](slug:scheduler-templates-appointment). Another option is to use the [Scheduler `OnItemRender` event](slug:scheduler-events#itemrender). +## Recurrence + +The [Scheduler supports recurring appointments and exceptions](slug:scheduler-recurrence). The Scheduler also exposes helper components that you can use to edit recurrences in custom edit forms. ## Resources and Grouping [Scheduler resources](slug:scheduler-resources) provide a way to associate and [group appointments](slug:scheduler-resource-grouping) by certain criteria, such as a meeting room, a participating person, or used equipment. +## Templates + +You can [customize the appointment appearance and content via Scheduler templates](slug:scheduler-templates-appointment). Another option is to use the [Scheduler `OnItemRender` event](slug:scheduler-events#itemrender). + + ## Events The [Scheduler component fires events](slug:scheduler-events) related to CRUD operations, item (appointment) clicks and user navigation. Use them to gain more information about user actions and enhance the component behavior. diff --git a/components/scheduler/recurrence.md b/components/scheduler/recurrence.md new file mode 100644 index 0000000000..5ee624c435 --- /dev/null +++ b/components/scheduler/recurrence.md @@ -0,0 +1,432 @@ +--- +title: Recurrence +page_title: Scheduler Recurrence +description: Overview of the Scheduler for Blazor. +slug: scheduler-recurrence +tags: telerik, blazor, scheduler, recurrence +published: True +position: 7 +--- + +# Scheduler Recurrence + +The Telerik Scheduler for Blazor supports displaying and editing of recurring appointments and exceptions. This article describes how to: + +* Configure the Scheduler for using recurring appointments. +* Define recurrence rules and recurrence exceptions in the Scheduler data. +* Edit recurring appointments and exceptions. + +## Basics + +To display recurring appointments in the Scheduler component, the model class must implement [three recurrence-related properties](slug:scheduler-appointments-databinding#appointment-features): + +* `RecurrenceRule` +* `RecurrenceExceptions` +* `RecurrenceId` + +You can also [define custom property names](slug:scheduler-appointments-databinding#example-with-custom-field-names) through the respective Scheduler parameters: + +* `RecurrenceRuleField` +* `RecurrenceExceptionsField` +* `RecurrenceIdField` + +A single Scheduler data item defines one series of recurring appointments. Set the `RecurrenceRule` value, according to the [RFC5545 standard](https://tools.ietf.org/html/rfc5545#section-3.3.10). Then, if exceptions to the recurrence rule exist: + +* Each exception must be a separate data item. +* The `RecurrenceId` property of each exception must be equal to `Id` value of the recurring appointment. +* The `RecurrenceExceptions` property of the recurring appointment must contain the `Start` values of all occurrences, which are exceptions to the recurrence rule. The correct values are the original start `DateTime` values of the occurrences, which would apply if there were no exceptions. + +## Example + +>caption Bind Scheduler to recurring appointments and recurrence exceptions + +````RAZOR + + + + + + + + + + + +@code { + private List SchedulerData { get; set; } = new(); + + private DateTime SchedulerDate { get; set; } + + private SchedulerView SchedulerView { get; set; } = SchedulerView.Week; + + private DateTime SchedulerViewStartTime { get; set; } = DateTime.Today.AddHours(10); + private DateTime SchedulerViewEndTime { get; set; } = DateTime.Today.AddHours(19); + + private void OnSchedulerCreate(SchedulerCreateEventArgs args) + { + Appointment item = (Appointment)args.Item; + + SchedulerData.Add(item); + } + + private void OnSchedulerDelete(SchedulerDeleteEventArgs args) + { + Appointment item = (Appointment)args.Item; + + SchedulerData.Remove(item); + } + + private void OnSchedulerUpdate(SchedulerUpdateEventArgs args) + { + Appointment item = (Appointment)args.Item; + + int originalItemIndex = SchedulerData.FindIndex(a => a.Id == item.Id); + + if (originalItemIndex >= 0) + { + SchedulerData[originalItemIndex] = item; + } + } + + protected override void OnInitialized() + { + SchedulerDate = GetNextMonthStart(); + + DateTime mondayMidnight = GetStartDateTime(); + + SchedulerData.Add(new Appointment + { + Title = "Weekly team meeting", + Start = mondayMidnight.AddHours(10).AddMinutes(30), + End = mondayMidnight.AddHours(11).AddMinutes(30), + RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO" + }); + + SchedulerData.Add(new Appointment + { + Title = "Workout at the gym", + Start = mondayMidnight.AddHours(17), + End = mondayMidnight.AddHours(18), + RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,WE,FR" + }); + + SchedulerData.Add(new Appointment + { + Title = "Quaterly meeting with manager", + Start = mondayMidnight.AddDays(3).AddHours(14).AddMinutes(30), + End = mondayMidnight.AddDays(3).AddHours(15).AddMinutes(30), + RecurrenceRule = "FREQ=MONTHLY;INTERVAL=3;COUNT=36;BYDAY=TH;BYSETPOS=1" + }); + + SchedulerData.Add(new Appointment + { + Title = "Pay monthly bills", + Start = new DateTime(mondayMidnight.Year, mondayMidnight.Month, 1), + End = new DateTime(mondayMidnight.Year, mondayMidnight.Month, 1), + IsAllDay = true, + RecurrenceRule = "FREQ=MONTHLY" + }); + + // Create a base recurring appointment. + // Exceptions are defined below. + Appointment dailyLunch = new Appointment + { + Title = "Daily lunch", + Start = mondayMidnight.AddHours(12), + End = mondayMidnight.AddHours(13), + RecurrenceRule = "FREQ=DAILY" + }; + SchedulerData.Add(dailyLunch); + + // Create exceptions to the base appointment + int daysSinceMonday = SchedulerDate.DayOfWeek - DayOfWeek.Monday; + DateTime lastMonday = DateTime.SpecifyKind(SchedulerDate.AddDays(-daysSinceMonday), DateTimeKind.Unspecified); + + Appointment lateLunchException = new Appointment + { + Title = "Late lunch", + Start = lastMonday.AddHours(13), + End = lastMonday.AddHours(14), + RecurrenceId = dailyLunch.Id + }; + SchedulerData.Add(lateLunchException); + + Appointment earlyLunchException = new Appointment + { + Title = "Early lunch", + Start = lastMonday.AddDays(3).AddHours(11), + End = lastMonday.AddDays(3).AddHours(12), + RecurrenceId = dailyLunch.Id + + }; + SchedulerData.Add(earlyLunchException); + + // Relate the exceptions to the base appointment + DateTime lateLunchOriginalStart = DateTime.SpecifyKind(lastMonday.AddHours(12), DateTimeKind.Unspecified); + DateTime earlyLunchOriginalStart = DateTime.SpecifyKind(lastMonday.AddDays(3).AddHours(12), DateTimeKind.Unspecified); + dailyLunch.RecurrenceExceptions = new List() + { + lateLunchOriginalStart, + earlyLunchOriginalStart + }; + } + + private DateTime GetNextMonthStart() + { + DateTime today = DateTime.Today; + + return new DateTime(today.Year, today.Month, 1).AddMonths(1); + } + + private DateTime GetStartDateTime() + { + DateTime firstDayOfLastYear = new DateTime(DateTime.Today.Year, 1, 1).AddYears(-1); + + return firstDayOfLastYear.AddDays(1 - (int)firstDayOfLastYear.DayOfWeek); + } + + public class Appointment + { + public Guid Id { get; set; } + + public string Title { get; set; } = string.Empty; + public string Description { get; set; } = string.Empty; + + public DateTime Start { get; set; } + public DateTime End { get; set; } + public bool IsAllDay { get; set; } + + public string RecurrenceRule { get; set; } = string.Empty; + public List? RecurrenceExceptions { get; set; } + public object? RecurrenceId { get; set; } + + public Appointment() + { + var rand = new Random(); + Id = Guid.NewGuid(); + } + } +} +```` + +## Recurrence Editor Components + +Telerik UI for Blazor provides standalone components that you can use to edit recurring appointments outside the Scheduler or in a [custom Scheduler popup edit form](slug:scheduler-kb-custom-edit-form). + +The Telerik Blazor recurrence editor components include: + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Component Name | Renders As | Description | +| --- | --- | --- | +| `RecurrenceFrequencyEditor` | Button Group | Defines whether the appointment repeats daily, weekly, monthly, yearly, or never. | +| `RecurrenceIntervalEditor` | Numeric TextBox | Defines whether the appointment repeats in each period (for example, every day), or skips periods (for example, once in three days). | +| `RecurrenceEditor` | Button Group or Radio Group |
  • For weekly frequency, the Recurrence Editor is a Button Group with multiple selection, which allows choosing week days.
  • For monthly and yearly frequency, the Recurrence Editor is a combination for DropDownLists and a Numeric TextBox, which allow selecting repetition on specific days or week days.
| +| `RecurrenceEndEditor` | Radio Group, Numeric TextBox, Date Picker | Defines if the appointment repeats indefinitely, a number of times, or until a specific date. | + +### Parameters + +All recurrence editor components expose: + +* A `Rule` parameter of type `Telerik.Recurrence.RecurrenceRule` that supports two-way binding. +* A `RuleChanged` event that receives a `RecurrenceRule` argument. +* A `Class` parameter for [styling customizations](slug:themes-override). + +In addition: + +* The `RecurrenceIntervalEditor` supports an `Id` parameter of type `string`. Use it to set a custom `id` attribute to the Numeric TextBox and the same `for` attribute to the associated **Repeat every** label. +* The `RecurrenceEndEditor` supports an `End` parameter of type `DateTime`. Use it to set a default value for the **End On** Date Picker when there is no `UNTIL` setting in the recurrence rule string. + +### Recurrence Rule Type Conversion + +Use the following methods to convert from [RFC5545 strings](https://tools.ietf.org/html/rfc5545#section-3.3.10) to `RecurrenceRule` objects and vice-versa: + +* The static method `RecurrenceRule.Parse()` to convert from RFC5545 `string` to `RecurrenceRule`. +* The instance method `RecurrenceRule.ToString()` to convert from `RecurrenceRule` to a RFC5545 `string`. + +>caption Converting between different recurrence rule formats + +````C#.skip-repl +// RFC5545 string +string recurrenceString = "FREQ=WEEKLY;BYDAY=MO,WE,FR"; + +// Convert to RecurrenceRule +RecurrenceRule recurrenceRule = RecurrenceRule.Parse(recurrenceString); + +// Make some changes... + +// Convert to RFC5545 string +string newRecurrenceString = recurrenceRule.ToString(); +```` + +### Telerik Form Integration + +There are two recommended ways to use the Telerik recurrence editors in a Telerik Form: + +* Place each recurrence editor in a separate [Form item `Template`](slug:form-formitems-template). This is the simpler option to set up. +* Please all recurrence editors in a [``](slug:form-formitems-formitemstemplate). This is a more verbose approach, which provides better control over the Form's HTML rendering, layout and styling. + +The following examples can serve as a reference for creating [custom Telerik Scheduler edit forms](slug:scheduler-kb-custom-edit-form) with recurrence editing. Using a markup structure that differs from the ones below may produce unexpected layouts. + +>caption Using Telerik recurrence editors in separate Form item templates + +````RAZOR +@using Telerik.Recurrence + + + + + + + + + + + + + + + + + + + + + + +@code { + private Appointment? RecurringAppointment { get; set; } + + private RecurrenceRule? Rule { get; set; } + + private DateTime RecurrenceEndDefaultDate => + new DateTime(Math.Max(RecurringAppointment?.End.Ticks ?? default, DateTime.Now.Ticks)); + + private void OnFormUpdate() + { + // Only necessary to refresh the UI until all Rule parameters gain two-way binding + RecurringAppointment!.RecurrenceRule = Rule?.ToString() ?? string.Empty; + } + + private void OnRuleChanged(RecurrenceRule newRule) + { + Rule = newRule; + + RecurringAppointment!.RecurrenceRule = Rule?.ToString() ?? string.Empty; + } + + protected override void OnInitialized() + { + DateTime nextMonday = DateTime.Today.AddDays(8 - (int)DateTime.Today.DayOfWeek); + + RecurringAppointment = new Appointment + { + Title = "Workout at the gym", + Start = nextMonday.AddHours(17), + End = nextMonday.AddHours(18), + RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,WE,FR" + }; + + Rule = RecurrenceRule.Parse(RecurringAppointment.RecurrenceRule); + } + + public class Appointment + { + public Guid Id { get; set; } + + public string Title { get; set; } = string.Empty; + public string Description { get; set; } = string.Empty; + + public DateTime Start { get; set; } + public DateTime End { get; set; } + public bool IsAllDay { get; set; } + + public string RecurrenceRule { get; set; } = string.Empty; + public List? RecurrenceExceptions { get; set; } + public Guid? RecurrenceId { get; set; } + + public Appointment() + { + var rand = new Random(); + Id = Guid.NewGuid(); + } + } +} +```` + +To add the recurrence editors to a `FormItemsTemplate`, follow the same approach as in the example above, but add the following `` tag as a child of ``. + +>caption Using Telerik recurrence editors in a FormItemsTemplate + +````RAZOR.skip-repl + + @{ + var formItems = formContext.Items.Cast().ToList(); + } + + + + +
+ +
+ @if (Rule != null) + { +
+ +
+ } +
+ +
+ @if (Rule != null) + { +
+ +
+ } +
+```` + +## Next Steps + +* [Enable Scheduler Editing](slug:scheduler-appointments-edit) + +## See Also + +* [Live Demo: Scheduler Recurring Appointments](https://demos.telerik.com/blazor-ui/scheduler/recurring-appointments) +* [Scheduler API Reference](slug:Telerik.Blazor.Components.TelerikScheduler-1) diff --git a/docs-builder.yml b/docs-builder.yml index ed60ada75b..e098519420 100644 --- a/docs-builder.yml +++ b/docs-builder.yml @@ -312,16 +312,13 @@ meta: position: 80 "*components/scheduler/templates": title: Templates - position: 10 + position: 35 "*components/scheduler/views": title: Views - position: 5 + position: 3 "*components/scheduler/editing": title: Editing - position: 3 - "*components/scheduler/appointments": - title: Appointments - position: 2 + position: 5 "*components/menu/data-binding": title: Data Binding position: 2 From 53a66ef7ed34b2b726a8cc6ba6353ef521d90690 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 28 Mar 2025 11:09:05 +0200 Subject: [PATCH 2/6] Update components/scheduler/recurrence.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/scheduler/recurrence.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/scheduler/recurrence.md b/components/scheduler/recurrence.md index 5ee624c435..d243ea482a 100644 --- a/components/scheduler/recurrence.md +++ b/components/scheduler/recurrence.md @@ -275,7 +275,7 @@ string newRecurrenceString = recurrenceRule.ToString(); There are two recommended ways to use the Telerik recurrence editors in a Telerik Form: * Place each recurrence editor in a separate [Form item `Template`](slug:form-formitems-template). This is the simpler option to set up. -* Please all recurrence editors in a [``](slug:form-formitems-formitemstemplate). This is a more verbose approach, which provides better control over the Form's HTML rendering, layout and styling. +* Place all recurrence editors in a [``](slug:form-formitems-formitemstemplate). This is a more verbose approach, which provides better control over the Form's HTML rendering, layout and styling. The following examples can serve as a reference for creating [custom Telerik Scheduler edit forms](slug:scheduler-kb-custom-edit-form) with recurrence editing. Using a markup structure that differs from the ones below may produce unexpected layouts. From 101a8d6b4d2d85aa4180ee25df377767b23acc8a Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 28 Mar 2025 11:11:52 +0200 Subject: [PATCH 3/6] Apply PR suggestions --- components/scheduler/recurrence.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/scheduler/recurrence.md b/components/scheduler/recurrence.md index d243ea482a..520933e4e6 100644 --- a/components/scheduler/recurrence.md +++ b/components/scheduler/recurrence.md @@ -1,7 +1,7 @@ --- title: Recurrence page_title: Scheduler Recurrence -description: Overview of the Scheduler for Blazor. +description: Learn how to set up the Telerik Scheduler for Blazor to display and edit recurring appointments. slug: scheduler-recurrence tags: telerik, blazor, scheduler, recurrence published: True @@ -149,7 +149,7 @@ A single Scheduler data item defines one series of recurring appointments. Set t }; SchedulerData.Add(dailyLunch); - // Create exceptions to the base appointment + // Create exceptions to the base appointment. int daysSinceMonday = SchedulerDate.DayOfWeek - DayOfWeek.Monday; DateTime lastMonday = DateTime.SpecifyKind(SchedulerDate.AddDays(-daysSinceMonday), DateTimeKind.Unspecified); @@ -172,7 +172,7 @@ A single Scheduler data item defines one series of recurring appointments. Set t }; SchedulerData.Add(earlyLunchException); - // Relate the exceptions to the base appointment + // Relate the exceptions to the base appointment. DateTime lateLunchOriginalStart = DateTime.SpecifyKind(lastMonday.AddHours(12), DateTimeKind.Unspecified); DateTime earlyLunchOriginalStart = DateTime.SpecifyKind(lastMonday.AddDays(3).AddHours(12), DateTimeKind.Unspecified); dailyLunch.RecurrenceExceptions = new List() @@ -335,7 +335,7 @@ The following examples can serve as a reference for creating [custom Telerik Sch private void OnFormUpdate() { - // Only necessary to refresh the UI until all Rule parameters gain two-way binding + // Only necessary to refresh the UI until all Rule parameters gain two-way binding. RecurringAppointment!.RecurrenceRule = Rule?.ToString() ?? string.Empty; } From 17dba728237c2ba5d9f1f5d2fb8dd7fc848e5ba3 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 28 Mar 2025 11:34:23 +0200 Subject: [PATCH 4/6] Link recurrence editors --- components/scheduler/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/scheduler/overview.md b/components/scheduler/overview.md index 9af386b257..4176080fe9 100644 --- a/components/scheduler/overview.md +++ b/components/scheduler/overview.md @@ -107,7 +107,7 @@ Users can [create, edit and delete Scheduler appointments](slug:scheduler-appoin ## Recurrence -The [Scheduler supports recurring appointments and exceptions](slug:scheduler-recurrence). The Scheduler also exposes helper components that you can use to edit recurrences in custom edit forms. +The [Scheduler supports recurring appointments and exceptions](slug:scheduler-recurrence). Telerik UI for Blazor also exposes [recurrence editor components](slug:scheduler-recurrence#recurrence-editor-components) that enable users to edit recurrence rules in an edit form. ## Resources and Grouping From a0c62be69e00271d8f01f76f41ef52c5ff0d669c Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 28 Mar 2025 11:50:20 +0200 Subject: [PATCH 5/6] Update components/scheduler/overview.md --- components/scheduler/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/scheduler/overview.md b/components/scheduler/overview.md index 4176080fe9..12d0a98ad4 100644 --- a/components/scheduler/overview.md +++ b/components/scheduler/overview.md @@ -107,7 +107,7 @@ Users can [create, edit and delete Scheduler appointments](slug:scheduler-appoin ## Recurrence -The [Scheduler supports recurring appointments and exceptions](slug:scheduler-recurrence). Telerik UI for Blazor also exposes [recurrence editor components](slug:scheduler-recurrence#recurrence-editor-components) that enable users to edit recurrence rules in an edit form. +The [Scheduler supports recurring appointments and exceptions](slug:scheduler-recurrence). Telerik UI for Blazor also provides [recurrence editor components](slug:scheduler-recurrence#recurrence-editor-components) that enable users to edit recurrence rules in an edit form. ## Resources and Grouping From ee494f81d3edfd8a205a6bce40ce9b9de1027ea3 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 1 Apr 2025 10:01:08 +0300 Subject: [PATCH 6/6] Remove content for next release --- components/scheduler/overview.md | 2 +- components/scheduler/recurrence.md | 202 ----------------------------- 2 files changed, 1 insertion(+), 203 deletions(-) diff --git a/components/scheduler/overview.md b/components/scheduler/overview.md index 12d0a98ad4..9e801c6c08 100644 --- a/components/scheduler/overview.md +++ b/components/scheduler/overview.md @@ -107,7 +107,7 @@ Users can [create, edit and delete Scheduler appointments](slug:scheduler-appoin ## Recurrence -The [Scheduler supports recurring appointments and exceptions](slug:scheduler-recurrence). Telerik UI for Blazor also provides [recurrence editor components](slug:scheduler-recurrence#recurrence-editor-components) that enable users to edit recurrence rules in an edit form. +The Scheduler can display and edit [recurring appointments and recurrence exceptions](slug:scheduler-recurrence). ## Resources and Grouping diff --git a/components/scheduler/recurrence.md b/components/scheduler/recurrence.md index 520933e4e6..fb3ba38e31 100644 --- a/components/scheduler/recurrence.md +++ b/components/scheduler/recurrence.md @@ -220,208 +220,6 @@ A single Scheduler data item defines one series of recurring appointments. Set t } ```` -## Recurrence Editor Components - -Telerik UI for Blazor provides standalone components that you can use to edit recurring appointments outside the Scheduler or in a [custom Scheduler popup edit form](slug:scheduler-kb-custom-edit-form). - -The Telerik Blazor recurrence editor components include: - -@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) - -| Component Name | Renders As | Description | -| --- | --- | --- | -| `RecurrenceFrequencyEditor` | Button Group | Defines whether the appointment repeats daily, weekly, monthly, yearly, or never. | -| `RecurrenceIntervalEditor` | Numeric TextBox | Defines whether the appointment repeats in each period (for example, every day), or skips periods (for example, once in three days). | -| `RecurrenceEditor` | Button Group or Radio Group |
  • For weekly frequency, the Recurrence Editor is a Button Group with multiple selection, which allows choosing week days.
  • For monthly and yearly frequency, the Recurrence Editor is a combination for DropDownLists and a Numeric TextBox, which allow selecting repetition on specific days or week days.
| -| `RecurrenceEndEditor` | Radio Group, Numeric TextBox, Date Picker | Defines if the appointment repeats indefinitely, a number of times, or until a specific date. | - -### Parameters - -All recurrence editor components expose: - -* A `Rule` parameter of type `Telerik.Recurrence.RecurrenceRule` that supports two-way binding. -* A `RuleChanged` event that receives a `RecurrenceRule` argument. -* A `Class` parameter for [styling customizations](slug:themes-override). - -In addition: - -* The `RecurrenceIntervalEditor` supports an `Id` parameter of type `string`. Use it to set a custom `id` attribute to the Numeric TextBox and the same `for` attribute to the associated **Repeat every** label. -* The `RecurrenceEndEditor` supports an `End` parameter of type `DateTime`. Use it to set a default value for the **End On** Date Picker when there is no `UNTIL` setting in the recurrence rule string. - -### Recurrence Rule Type Conversion - -Use the following methods to convert from [RFC5545 strings](https://tools.ietf.org/html/rfc5545#section-3.3.10) to `RecurrenceRule` objects and vice-versa: - -* The static method `RecurrenceRule.Parse()` to convert from RFC5545 `string` to `RecurrenceRule`. -* The instance method `RecurrenceRule.ToString()` to convert from `RecurrenceRule` to a RFC5545 `string`. - ->caption Converting between different recurrence rule formats - -````C#.skip-repl -// RFC5545 string -string recurrenceString = "FREQ=WEEKLY;BYDAY=MO,WE,FR"; - -// Convert to RecurrenceRule -RecurrenceRule recurrenceRule = RecurrenceRule.Parse(recurrenceString); - -// Make some changes... - -// Convert to RFC5545 string -string newRecurrenceString = recurrenceRule.ToString(); -```` - -### Telerik Form Integration - -There are two recommended ways to use the Telerik recurrence editors in a Telerik Form: - -* Place each recurrence editor in a separate [Form item `Template`](slug:form-formitems-template). This is the simpler option to set up. -* Place all recurrence editors in a [``](slug:form-formitems-formitemstemplate). This is a more verbose approach, which provides better control over the Form's HTML rendering, layout and styling. - -The following examples can serve as a reference for creating [custom Telerik Scheduler edit forms](slug:scheduler-kb-custom-edit-form) with recurrence editing. Using a markup structure that differs from the ones below may produce unexpected layouts. - ->caption Using Telerik recurrence editors in separate Form item templates - -````RAZOR -@using Telerik.Recurrence - - - - - - - - - - - - - - - - - - - - - - -@code { - private Appointment? RecurringAppointment { get; set; } - - private RecurrenceRule? Rule { get; set; } - - private DateTime RecurrenceEndDefaultDate => - new DateTime(Math.Max(RecurringAppointment?.End.Ticks ?? default, DateTime.Now.Ticks)); - - private void OnFormUpdate() - { - // Only necessary to refresh the UI until all Rule parameters gain two-way binding. - RecurringAppointment!.RecurrenceRule = Rule?.ToString() ?? string.Empty; - } - - private void OnRuleChanged(RecurrenceRule newRule) - { - Rule = newRule; - - RecurringAppointment!.RecurrenceRule = Rule?.ToString() ?? string.Empty; - } - - protected override void OnInitialized() - { - DateTime nextMonday = DateTime.Today.AddDays(8 - (int)DateTime.Today.DayOfWeek); - - RecurringAppointment = new Appointment - { - Title = "Workout at the gym", - Start = nextMonday.AddHours(17), - End = nextMonday.AddHours(18), - RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,WE,FR" - }; - - Rule = RecurrenceRule.Parse(RecurringAppointment.RecurrenceRule); - } - - public class Appointment - { - public Guid Id { get; set; } - - public string Title { get; set; } = string.Empty; - public string Description { get; set; } = string.Empty; - - public DateTime Start { get; set; } - public DateTime End { get; set; } - public bool IsAllDay { get; set; } - - public string RecurrenceRule { get; set; } = string.Empty; - public List? RecurrenceExceptions { get; set; } - public Guid? RecurrenceId { get; set; } - - public Appointment() - { - var rand = new Random(); - Id = Guid.NewGuid(); - } - } -} -```` - -To add the recurrence editors to a `FormItemsTemplate`, follow the same approach as in the example above, but add the following `` tag as a child of ``. - ->caption Using Telerik recurrence editors in a FormItemsTemplate - -````RAZOR.skip-repl - - @{ - var formItems = formContext.Items.Cast().ToList(); - } - - - - -
- -
- @if (Rule != null) - { -
- -
- } -
- -
- @if (Rule != null) - { -
- -
- } -
-```` - ## Next Steps * [Enable Scheduler Editing](slug:scheduler-appointments-edit)