--- title: "Angular Scheduler Recurring Event Add & Edit Example | Mobiscroll" component: "Scheduler" framework: "Angular" library_version: "6.1.5" url: "https://demo.mobiscroll.com/angular/scheduler/recurring-event-add-edit-dialog" --- # Recurring Event Add & Edit - Angular Scheduler demo Add a recurrence editor to a Angular Scheduler add/edit dialog — with daily, weekly, monthly, and custom presets plus an RRULE builder. For Angular 22 and Ionic 8. - [Live demo](https://demo.mobiscroll.com/angular/scheduler/recurring-event-add-edit-dialog) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/scheduler/recurring-event-add-edit-dialog) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/recurring-event-add-edit-dialog.md), [jQuery](https://demo.mobiscroll.com/jquery/scheduler/recurring-event-add-edit-dialog.md), [React](https://demo.mobiscroll.com/react/scheduler/recurring-event-add-edit-dialog.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/recurring-event-add-edit-dialog.md) ## Description As seen in the [previous example](https://demo.mobiscroll.com/angular/scheduler/create-read-update-delete-CRUD), an add/edit form can be created with custom and base event fields. While the CRUD example features delete with undo, this example shows off how to build a fully customizable recurrence editor right in the add/edit screen. Above some common presets, like **Daily**, **Weekly on X day**, **Monthly on Xth**, **Annually on the same day**, **Every Weekday** a fully custom recurrence editor is implemented. Copy & paste or delve into the code and understand how to generate recurrence objects or RRULES as seen in this [live rule builder](https://demo.mobiscroll.com/angular/scheduler/recurring-events). ## What this demo shows - A desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, and a scrollable scheduler time grid for the selected week. - **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day. - **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle. - **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid. - **Time grid** The scheduler grid scrolls vertically through the hours of the selected week. - **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title. - **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts. - **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date. - **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments. - **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration. - **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event. - **Create dialog** Creating an event opens an event editor with fields for title, description, all-day, start date, end date, and recurrence. - **Date selection** The start and end fields open a date picker with range selection. - **Recurring presets** The Repeats field opens a dropdown with preset options including Does not repeat, Daily, Weekly, Monthly, Yearly, and Custom. - **Custom recurrence** Choosing Custom expands the editor with additional controls for defining a custom recurring rule. - **Event editing** Clicking an existing event opens the same dialog in edit mode with the current event values prefilled. - **Save and cancel flow** Clicking outside the dialog or pressing Cancel closes the editor without applying changes, while Save applies the changes to the event. - **Delete flow** In edit mode, the dialog includes a Delete event action for removing the selected event. - **Recurring delete options** When deleting a recurring event, a confirmation popup appears with options for This event only, This and following events, and All events, plus Cancel and Ok actions. - **Responsive editor** The event editor adapts to screen size and device type, using touch-friendly controls such as scrollers on smaller or touch devices. ## Best for - **Recurring event management** Apps that need users to create, edit, and delete repeating events directly from a scheduler view. - **Exception handling** Scenarios where users may need to delete a single occurrence, all following occurrences, or the entire recurring series. - **Business and operational scheduling** Internal tools or customer-facing products for planning appointments, classes, shifts, programs, or other repeating activities. ## API used in this demo - [`theme`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option - [`touchUi`](https://mobiscroll.com/docs/angular/select/api#opt-touchUi) - option - [`clickToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-clickToCreate) - option - [`dragToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToCreate) - option - [`dragToMove`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToMove) - option - [`dragToResize`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToResize) - option - [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option - [`onEventClick`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventClick) - event - [`onEventUpdate`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventUpdate) - event - [`onEventCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventCreate) - event - [`onEventCreated`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventCreated) - event - [`onEventDeleted`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventDeleted) - event - [`onEventUpdated`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventUpdated) - event - [`cssClass`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-cssClass) - option - [`display`](https://mobiscroll.com/docs/angular/popup/api#opt-display) - option - [`fullScreen`](https://mobiscroll.com/docs/angular/popup/api#opt-fullScreen) - option - [`scrollLock`](https://mobiscroll.com/docs/angular/popup/api#opt-scrollLock) - option - [`height`](https://mobiscroll.com/docs/angular/popup/api#opt-height) - option - [`onClose`](https://mobiscroll.com/docs/angular/popup/api#event-onClose) - event - [`responsive`](https://mobiscroll.com/docs/angular/popup/api#opt-responsive) - option - [`width`](https://mobiscroll.com/docs/angular/popup/api#opt-width) - option - [`touchUi`](https://mobiscroll.com/docs/angular/popup/api#opt-touchUi) - option - [`cssClass`](https://mobiscroll.com/docs/angular/popup/api#opt-cssClass) - option - [`buttons`](https://mobiscroll.com/docs/angular/popup/api#opt-buttons) - option - [`select`](https://mobiscroll.com/docs/angular/datepicker/api#opt-select) - option - [`showRangeLabels`](https://mobiscroll.com/docs/angular/datepicker/api#opt-showRangeLabels) - option - [`touchUi`](https://mobiscroll.com/docs/angular/datepicker/api#opt-touchUi) - option - [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option - [`selectedDate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-selectedDate) - option - [`anchor`](https://mobiscroll.com/docs/angular/popup/api#opt-anchor) - option - [`headerText`](https://mobiscroll.com/docs/angular/popup/api#opt-headerText) - option - [`controls`](https://mobiscroll.com/docs/angular/datepicker/api#opt-controls) - option - [`responsive`](https://mobiscroll.com/docs/angular/datepicker/api#opt-responsive) - option - [`startInput`](https://mobiscroll.com/docs/angular/datepicker/api#opt-startInput) - option - [`endInput`](https://mobiscroll.com/docs/angular/datepicker/api#opt-endInput) - option - [`data`](https://mobiscroll.com/docs/angular/select/api#opt-data) - option - [`label`](https://mobiscroll.com/docs/angular/select/api#opt-label) - option - [`responsive`](https://mobiscroll.com/docs/angular/select/api#opt-responsive) - option - [`inputStyle`](https://mobiscroll.com/docs/angular/select/api#opt-inputStyle) - option - [`onChange`](https://mobiscroll.com/docs/angular/select/api#event-onChange) - event - [`position`](https://mobiscroll.com/docs/angular/forms/radio#opt-position) - option - [`display`](https://mobiscroll.com/docs/angular/datepicker/api#opt-display) - option - [`dateFormat`](https://mobiscroll.com/docs/angular/datepicker/api#localization-dateFormat) - option - [`returnFormat`](https://mobiscroll.com/docs/angular/datepicker/api#opt-returnFormat) - option - [`inputStyle`](https://mobiscroll.com/docs/angular/datepicker/api#opt-inputStyle) - option ## Code ### Component ```ts import { CommonModule } from '@angular/common'; import { Component, OnInit, ViewChild } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { formatDate, MbscCalendarEvent, MbscDatepickerOptions, MbscEventcalendarOptions, MbscModule, MbscPopup, MbscPopupOptions, setOptions, updateRecurringEvent, } from '@mobiscroll/angular'; setOptions({ theme: 'ios', themeVariant: 'light' }); const days = [ { name: 'Sunday', short: 'SU', checked: true, }, { name: 'Monday', short: 'MO', checked: false, }, { name: 'Tuesday', short: 'TU', checked: false, }, { name: 'Wednesday', short: 'WE', checked: false, }, { name: 'Thursday', short: 'TH', checked: false, }, { name: 'Friday', short: 'FR', checked: false, }, { name: 'Saturday', short: 'SA', checked: false, }, ]; const ordinalList: any = { 1: 'first', 2: 'second', 3: 'third', 4: 'fourth' }; function getWeekDayNum(date: Date): number { const year = date.getFullYear(); const month = date.getMonth(); const firstDayOfMonth = new Date(year, month, 1); const lastDayOfMonth = new Date(year, month + 1, 0); let count = 0; for (let d = firstDayOfMonth; d < lastDayOfMonth; d.setDate(d.getDate() + 7)) { if (date >= d) { count++; } else { break; } } return Math.max(1, count); } @Component({ selector: 'app-root', templateUrl: './app.component.html', standalone: true, imports: [CommonModule, FormsModule, MbscModule], }) export class AppComponent implements OnInit { @ViewChild('popup', { static: false }) popup!: MbscPopup; popupEventTitle: string | undefined; popupEventDescription = ''; popupEventAllDay = true; popupEventDates: any; calendarSelectedDate: any = new Date(); switchLabel: any = 'All-day'; myEvents: MbscCalendarEvent[] = [ { id: 1, start: '10:00', end: '12:00', title: 'Take vitamins', allDay: false, color: '#67ab0d', recurring: { repeat: 'daily', weekDays: 'MO,TU,WE,TH,FR,SA,SU', }, }, { id: 2, start: '18:00', end: '20:00', recurring: { repeat: 'weekly', weekDays: 'MO', }, title: 'Football training', allDay: false, color: '#fd966a', }, { id: 3, start: '17:00', end: '18:00', recurring: { repeat: 'monthly', day: 10, }, title: 'Rent payment', allDay: false, color: '#3ea39e', }, { id: 4, recurring: { repeat: 'yearly', day: 6, month: 6, }, title: 'Dexter BD', allDay: true, color: '#d00f0f', }, ]; repeatData = [ { value: 'norepeat', text: 'Does not repeat', }, { value: 'daily', text: 'Daily', }, { value: 'weekly', text: 'Weekly', }, { value: 'monthly', text: 'Monthly', }, { value: 'monthly-pos', text: 'Monthly', }, { value: 'yearly', text: 'Yearly', }, { value: 'yearly-pos', text: 'Yearly', }, { value: 'weekday', text: 'Every weekday (Monday to Friday)', }, { value: 'custom', text: 'Custom', }, ]; selectedRepeat = 'norepeat'; selectResponsive = { xsmall: { touchUi: true, }, small: { touchUi: false, }, }; weekDays = ['SU']; showCustomRepeat = false; repeatType = 'daily'; repeatNr = 1; monthlyDays = [1]; monthlyDay = 1; yearlyDays = [1]; yearlyDay = 1; months = [ { value: 1, text: 'January', }, { value: 2, text: 'February', }, { value: 3, text: 'March', }, { value: 4, text: 'April', }, { value: 5, text: 'May', }, { value: 6, text: 'June', }, { value: 7, text: 'July', }, { value: 8, text: 'August', }, { value: 9, text: 'September', }, { value: 10, text: 'October', }, { value: 11, text: 'November', }, { value: 12, text: 'December', }, ]; selectedMonth = 1; untilDate: any; occurrences = 10; condition = 'never'; tempEvent: any; @ViewChild('recurringEditModePopup', { static: false }) recurringEditModePopup!: MbscPopup; recurringEditMode: any = 'current'; newEvent: MbscCalendarEvent = {}; originalRecurringEvent: any; eventOccurrence: MbscCalendarEvent = {}; editFromPopup = false; recurringDelete = false; recurringActionText = 'Edit'; calendarOptions: MbscEventcalendarOptions = { clickToCreate: 'double', dragToCreate: true, dragToMove: true, dragToResize: true, view: { scheduler: { type: 'week' }, }, onEventClick: (args: any) => { const event = args.event; this.isEdit = true; this.tempEvent = args.event; // Recurring event if (event.recurring) { this.originalRecurringEvent = event['original']; this.eventOccurrence = { ...event }; // Fill popup form with event data this.loadPopupForm(event); } else { this.originalRecurringEvent = {}; // Fill popup form with event data this.loadPopupForm(event); } // Set popup options this.popupHeaderText = 'Edit event'; this.popupButtons = this.popupEditButtons; this.popupAnchor = args.domEvent.currentTarget; // Open the popup this.popup.open(); }, onEventUpdate: (args: any) => { const event = args.event; if (event.recurring) { this.originalRecurringEvent = args.oldEvent; // We need this on delete this.tempEvent = event; this.eventOccurrence = args.oldEventOccurrence; if (args.domEvent.keyCode === 46) { this.recurringActionText = 'Delete'; this.recurringDelete = true; this.recurringEditModePopup.open(); } else { this.recurringActionText = 'Edit'; this.recurringDelete = false; this.recurringEditModePopup.open(); } return false; } else { return true; } }, onEventCreate: (args: any) => { const originEvent = args.originEvent; if (originEvent && originEvent.recurring) { this.newEvent = args.event; return false; } else { return true; } }, onEventCreated: (args: any) => { setTimeout(() => { this.isEdit = false; this.tempEvent = args.event; // Fill popup form with event data this.loadPopupForm(args.event); // Set popup options this.popupHeaderText = 'New Event'; this.popupButtons = this.popupAddButtons; this.popupAnchor = args.target; this.resetCustomValues(); // Open the popup this.popup.open(); }); }, onEventDeleted: (args: any) => { setTimeout(() => { this.deleteEvent(args.event); }); }, onEventUpdated: () => { // Here you can update the event in your storage as well, after drag & drop or resize // ... }, }; popupHeaderText!: string; popupAnchor: HTMLElement | undefined; popupAddButtons = [ 'cancel', { handler: () => { this.saveEvent(); }, keyCode: 'enter', text: 'Add', cssClass: 'mbsc-popup-button-primary', }, ]; popupEditButtons = [ 'cancel', { handler: () => { if (Object.keys(this.originalRecurringEvent).length !== 0) { this.editFromPopup = true; this.recurringActionText = 'Edit'; this.recurringDelete = false; this.recurringEditModePopup.open(); } else { this.saveEvent(); } }, keyCode: 'enter', text: 'Save', cssClass: 'mbsc-popup-button-primary', }, ]; popupButtons: any = []; popupOptions: MbscPopupOptions = { display: 'bottom', contentPadding: false, fullScreen: true, scrollLock: false, height: 500, onClose: () => { this.repeatData = this.repeatData.filter((item) => item.value !== 'custom-value'); if (!this.isEdit) { // Refresh the list, if add popup was canceled, to remove the temporary event this.myEvents = [...this.myEvents]; } this.editFromPopup = false; }, responsive: { medium: { display: 'anchored', width: 510, fullScreen: false, touchUi: false, }, }, cssClass: 'md-recurring-event-editor-popup', }; editModePopupOptions: MbscPopupOptions = { display: 'bottom', contentPadding: false, buttons: [ 'cancel', { text: 'Ok', keyCode: 'enter', handler: () => { if (this.recurringDelete) { this.deleteRecurringEvent(); } else { if (this.editFromPopup) { this.setTempEvent(); } if (this.recurringEditMode === 'current') { delete this.tempEvent.id; delete this.tempEvent.recurring; delete this.tempEvent.recurringException; } const events = updateRecurringEvent( this.originalRecurringEvent, this.eventOccurrence, this.editFromPopup ? null : this.newEvent, this.editFromPopup ? this.tempEvent : null, this.recurringEditMode, ); // Update event let newEventList = [...this.myEvents]; const index = newEventList.findIndex((x) => x.id === events.updatedEvent.id); newEventList[index] = events.updatedEvent; // Add new event if (events.newEvent) { newEventList = [...newEventList, events.newEvent]; } this.myEvents = newEventList; this.popup.close(); this.recurringEditModePopup.close(); } }, cssClass: 'mbsc-popup-button-primary', }, ], onClose: () => { this.recurringEditMode = 'current'; }, }; datePickerControls = ['date']; datePickerResponsive: any = { medium: { controls: ['calendar'], touchUi: false, }, }; datetimePickerControls = ['datetime']; datetimePickerResponsive = { medium: { controls: ['calendar', 'time'], touchUi: false, }, }; datePickerOptions: MbscDatepickerOptions = { select: 'range', showRangeLabels: false, touchUi: true, }; isEdit = false; deleteRecurringEvent(): void { switch (this.recurringEditMode) { case 'following': { let followingExceptions = this.tempEvent.recurringException || []; followingExceptions = [...followingExceptions, this.tempEvent.start]; this.originalRecurringEvent.recurringException = followingExceptions; this.originalRecurringEvent.recurring.until = this.tempEvent.start; this.myEvents = [...this.myEvents]; break; } case 'all': this.myEvents = this.myEvents.filter((item) => item.id !== this.tempEvent.id); break; case 'current': default: { let currentExceptions = this.tempEvent.recurringException || []; currentExceptions = [...currentExceptions, this.tempEvent.start]; this.originalRecurringEvent.recurringException = currentExceptions; this.myEvents = [...this.myEvents]; break; } } this.popup.close(); this.recurringEditModePopup.close(); } loadPopupForm(event: MbscCalendarEvent): void { const startDate = new Date(event.start as any); this.popupEventTitle = event.title; this.popupEventDescription = event['description']; this.popupEventDates = [startDate, event.end]; this.untilDate = formatDate('YYYY-MM-DD', new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 1)); this.popupEventAllDay = event.allDay || false; this.updateCustomForm(); } getCustomRule(): any { let recurringRule: any; const d = this.editFromPopup ? this.popupEventDates[0] : new Date(this.tempEvent.start); const weekday = d.getDay(); const monthday = d.getDate(); const weekNr = getWeekDayNum(d); if (this.editFromPopup && this.tempEvent.start && this.tempEvent.recurring) { switch (this.selectedRepeat) { default: case 'daily': recurringRule = { repeat: 'daily', }; break; case 'weekly': recurringRule = { repeat: 'weekly', weekDays: days[weekday].short, }; break; case 'monthly': recurringRule = { repeat: 'monthly', day: monthday, }; break; case 'monthly-pos': recurringRule = { repeat: 'monthly', weekDays: days[weekday].short, pos: weekNr, }; break; case 'yearly': recurringRule = { repeat: 'yearly', day: monthday, month: d.getMonth() + 1, }; break; case 'yearly-pos': recurringRule = { repeat: 'yearly', month: d.getMonth() + 1, weekDays: days[weekday].short, pos: weekNr, }; break; } } else { switch (this.selectedRepeat) { case 'daily': recurringRule = { repeat: 'daily' }; break; case 'weekly': recurringRule = { repeat: 'weekly', weekDays: days[d.getDay()].short }; break; case 'monthly': recurringRule = { repeat: 'monthly', day: d.getDate() }; break; case 'monthly-pos': recurringRule = { repeat: 'monthly', weekDays: days[weekday].short, pos: weekNr }; break; case 'yearly': recurringRule = { repeat: 'yearly', month: d.getMonth() + 1 }; break; case 'yearly-pos': recurringRule = { repeat: 'yearly', month: d.getMonth() + 1, weekDays: days[weekday].short, pos: weekNr }; break; case 'weekday': recurringRule = { repeat: 'weekly', weekDays: 'MO,TU,WE,TH,FR' }; break; case 'custom': case 'custom-value': recurringRule = { repeat: this.repeatType, interval: this.repeatNr, }; switch (this.repeatType) { case 'weekly': recurringRule.weekDays = this.weekDays.join(','); break; case 'monthly': recurringRule.day = this.monthlyDay; break; case 'yearly': recurringRule.day = this.yearlyDay; recurringRule.month = this.selectedMonth; break; } switch (this.condition) { case 'until': recurringRule.until = this.untilDate; break; case 'count': recurringRule.count = this.occurrences; break; } break; } } return recurringRule; } setTempEvent(): void { this.tempEvent.title = this.popupEventTitle; this.tempEvent.description = this.popupEventDescription; this.tempEvent.start = this.popupEventDates[0]; this.tempEvent.end = this.popupEventDates[1]; this.tempEvent.allDay = this.popupEventAllDay; this.tempEvent.recurring = this.getCustomRule(); } saveEvent(): void { this.setTempEvent(); if (this.isEdit) { // Update the event in the list this.myEvents = [...this.myEvents]; // Here you can update the event in your storage as well // ... } else { // Add the new event to the list this.myEvents = [...this.myEvents, this.tempEvent]; // Here you can add the event to your storage as well // ... } // Navigate the calendar this.navigateTo(); // Close the popup this.popup.close(); } deleteEvent(event: MbscCalendarEvent): void { this.myEvents = this.myEvents.filter((item) => item.id !== event.id); } onDeleteClick(): void { if (this.tempEvent.recurring) { this.recurringActionText = 'Delete'; this.recurringDelete = true; this.recurringEditModePopup.open(); } else { this.deleteEvent(this.tempEvent); this.popup.close(); } } // Set custom values to default resetCustomValues(): void { this.repeatType = 'daily'; this.repeatNr = 1; this.condition = 'never'; this.occurrences = 10; this.selectedMonth = 1; this.monthlyDay = 1; this.yearlyDay = 1; this.weekDays = ['SU']; this.selectedRepeat = 'norepeat'; this.showCustomRepeat = false; this.repeatData = this.repeatData.filter((item) => item.value !== 'custom-value'); } updateCustomForm(): void { const d = new Date(this.tempEvent.start); const weekday = d.getDay(); const monthday = d.getDate(); const newData = [...this.repeatData]; const weekNr = getWeekDayNum(d); // Update select texts by selected date for (const item of newData) { switch (item.value) { case 'weekly': item.text = 'Weekly on ' + days[weekday].name; break; case 'monthly': item.text = 'Monthly on day ' + monthday; break; case 'yearly': item.text = 'Annually on ' + this.months[d.getMonth()].text + ' ' + monthday; break; case 'monthly-pos': item.text = 'Monthly on the ' + ordinalList[weekNr] + ' ' + days[weekday].name; break; case 'yearly-pos': item.text = 'Annually on the ' + ordinalList[weekNr] + ' ' + days[weekday].name + ' of ' + this.months[d.getMonth()]; break; default: } } this.repeatData = newData; const rec = this.tempEvent.recurring; if (rec) { this.repeatType = rec.repeat; this.weekDays = rec.repeat === 'weekly' ? rec.weekDays.split(',') : ['SU']; if (rec.interval) { // Set custom text let customText = ''; this.repeatNr = rec.interval; switch (rec.repeat) { case 'daily': customText = this.repeatNr > 1 ? 'Every ' + this.repeatNr + ' days' : 'Daily'; break; case 'weekly': customText = this.repeatNr > 1 ? 'Every ' + this.repeatNr + ' weeks' : 'Weekly'; customText += ' on ' + rec.weekDays; break; case 'monthly': this.monthlyDay = rec.day; customText = this.repeatNr > 1 ? 'Every ' + this.repeatNr + ' months' : 'Monthly'; customText += ' on day ' + this.monthlyDay; break; case 'yearly': this.yearlyDay = rec.day; this.selectedMonth = rec.month; customText = this.repeatNr > 1 ? 'Every ' + this.repeatNr + ' years' : 'Annualy'; customText += ' on ' + this.months[this.selectedMonth - 1].text + ' ' + this.yearlyDay; break; } if (rec.until) { this.condition = 'until'; this.untilDate = rec.until; customText += ' until ' + formatDate('MMMM D, YYYY', new Date(this.untilDate)); } else if (rec.count) { this.condition = 'count'; this.occurrences = rec.count; customText += ', ' + this.occurrences + ' times'; } else { this.condition = 'never'; } // Add custom value this.repeatData = [...this.repeatData, { value: 'custom-value', text: customText }]; // Set custom value this.selectedRepeat = 'custom-value'; } else if (rec.weekDays === 'MO,TU,WE,TH,FR') { this.selectedRepeat = 'weekday'; } else { this.selectedRepeat = rec.repeat; } } else { this.resetCustomValues(); } this.showCustomRepeat = this.selectedRepeat === 'custom' || this.selectedRepeat === 'custom-value'; } // Popuplate data for months populateMonthDays(month: number, type: string): void { const day30 = [2, 4, 6, 9, 11]; const newValues = []; for (let i = 1; i <= 31; i++) { if (!(i === 31 && day30.includes(month)) && !(i === 30 && month === 2)) { newValues.push(i); } } if (type === 'monthly') { this.monthlyDays = newValues; this.monthlyDay = 1; } else { this.yearlyDays = newValues; this.yearlyDay = 1; } } monthChange(ev: any): void { this.selectedMonth = ev.value; this.yearlyDay = 1; this.populateMonthDays(ev.value, 'yearly'); } navigateTo(): void { const rec = this.tempEvent.recurring; const d = new Date(this.tempEvent.start); let nextYear = 0; // Navigate the calendar to the correct view if (rec && rec.repeat === 'yearly') { if (d.getMonth() + 1 > +rec.month && d.getDay() > +rec.day) { nextYear = 1; } this.calendarSelectedDate = new Date(d.getFullYear() + nextYear, rec.month - 1, rec.day); } else { this.calendarSelectedDate = d; } } ngOnInit(): void { this.populateMonthDays(1, 'monthly'); this.populateMonthDays(1, 'yearly'); } } ``` ### Template ```html
Daily Weekly Monthly Yearly
Repeat every day(s) month(s) on day year(s)
on day of

The event will be repeated every day or every x days, depending on the value

The event will be repeated every x weeks on specific weekdays

The event will be repeated every x month on specific day of the month

The event will be repeated every x years on specific day of a specific month

Sun Mon Tue Wen Thu Fri Sat
Ends
Until The event will run until it reaches a specific date After occurrences The event will repeat until it reaches a certain amount of occurrences
Delete event
{{recurringActionText}} recurring event
 ``` ### CSS ```css .md-recurring-event-editor-popup .md-recurrence-input .mbsc-textfield-wrapper { display: inline-block; margin: 3px; z-index: 3; line-height: normal; } .md-recurring-event-editor-popup .md-recurrence-input .mbsc-textfield { width: 140px; height: 32px; } .md-recurring-event-editor-popup .md-recurrence-input-nr .mbsc-textfield { width: 90px; } .md-recurring-event-editor-popup .md-recurrence-input .mbsc-select-icon { top: 50%; height: 1.5em; margin-top: -0.75em; } .md-recurrence-options { padding: 0 1em; margin: 1em 0; } .md-recurrence-ends { padding: 0 1em; margin: 1.25em 0 -1.25em 0; } .md-recurrence-desc { font-size: 12px; font-weight: normal; color: #555; margin: 1em 0; } .md-hide-elm { display: none; } ``` ## Implementation notes - Use `view: { scheduler: { type: 'week' } }` with `clickToCreate: 'double'`, `dragToCreate: true`, `dragToMove: true`, `dragToResize: true`. Pre-load 4 default recurring events: "Take vitamins" (daily every day, 10:00-12:00, `#67ab0d`), "Football training" (weekly Monday, 18:00-20:00, `#fd966a`), "Rent payment" (monthly on day 10, 17:00-18:00, `#3ea39e`), "Dexter BD" (yearly June 6, all-day, `#d00f0f`). - The **add/edit popup** (`Popup`, responsive: anchored 510px on medium, bottom full-screen on mobile) contains: **Title** (`Input`), **Description** (`Textarea`), **All-day** (`Switch`), **Start/End** (`Datepicker` range with `startInput`/`endInput`; controls: `['calendar', 'time']` normally, `['calendar']` all-day; mobile: `['datetime']` / `['date']`), **Repeats** (`Select`), the **custom recurrence editor** section (shown only when repeat is `'custom'` or `'custom-value'`), and a **Delete event** button (edit mode only). - The **Repeats `Select`** data has these preset values whose display texts update dynamically based on the event's start date: `norepeat` ("Does not repeat"), `daily` ("Daily"), `weekly` ("Weekly on [day name]"), `monthly` ("Monthly on day [N]"), `monthly-pos` ("Monthly on the [ordinal] [day name]"), `yearly` ("Annually on [Month] [day]"), `yearly-pos` ("Annually on the [ordinal] [day name] of [Month]"), `weekday` ("Every weekday (Monday to Friday)"), `custom` ("Custom"). When an existing event has a custom rule with `interval`/`count`/`until`, a `custom-value` entry with generated descriptive text is inserted dynamically. - **`loadPopupForm(event)`**: populates all popup fields from the event object; sets the default `untilDate` to the day after `event.start`; rebuilds the Repeats data with date-specific labels. For recurring events: if the rule has `interval`/`count`/`until` set `selectedRepeat = 'custom-value'` and add the generated text entry; if `weekDays === 'MO,TU,WE,TH,FR'` → `'weekday'`; if positional (`pos`) → `repeat + '-pos'`; otherwise → `repeat`. Calls `resetCustomValues()` for non-recurring events. - **Custom recurrence editor**: a `SegmentedGroup` (Daily/Weekly/Monthly/Yearly) picks `repeatType`. Below it: "Repeat every [interval `Input`] [days/weeks/months/years]". For Weekly: a multi-select weekday `SegmentedGroup` (Sun-Sat). For Monthly: day `Select` (1-31). For Yearly: day `Select` + month `Select`. An **Ends** section with a `RadioGroup`: "Never" (repeat indefinitely) / "Until [date `Datepicker`]" / "After [count `Input`] occurrences". - **`getCustomRule()`**: builds the `recurring` object to save on the event. Presets map directly using the event's start date for weekday/day/month values. `weekday` → `{ repeat: 'weekly', weekDays: 'MO,TU,WE,TH,FR' }`. `custom`/`custom-value` → `{ repeat: repeatType, interval: repeatNr, ...weekDays/day/month as needed, ...until/count from condition }`. Returns `null`/`undefined` for `norepeat`. - `onEventClick` → open popup in **edit mode**: store `originalRecurringEvent = event.original` if recurring, call `loadPopupForm(event)`, set anchor to clicked element, open with "Edit event" header and "Save" button. - `onEventCreated` → open popup in **add mode**: call `resetCustomValues()`, `loadPopupForm(event)`, open with "New Event" header and "Add" button. **On popup close without confirming** (add mode): refresh the events array to strip the temporary event; for the imperative API, call `inst.removeEvent(event)` in the popup's `onClose` callback. - `onEventCreate` → if `args.originEvent` is a recurring event: store `args.event` as `newEvent` and `return false` (prevents duplicate creation; the recurrence mode popup will complete the operation). - `onEventUpdate` → if the updated event is recurring: store `args.oldEvent` as `originalRecurringEvent` and `args.oldEventOccurrence` as `eventOccurrence`; open the **recurrence mode popup** in "Edit" or "Delete" mode (based on `args.isDelete`); `return false`. - Handle `onEventDeleted` to delete the event by filtering the events array; for the imperative API, handle deletion in the Delete button's click handler with `inst.removeEvent(editedEvent)`. - **Recurrence mode popup** (separate `Popup`): header "[Edit/Delete] recurring event"; `RadioGroup`: "This event only" / "This and following events" / "All events" (default: `current`); buttons: Cancel / Ok. - **Ok → delete** (`deleteRecurringEvent`): `current` - push `event.start` to `recurringException`, update original; `following` - set `original.recurring.until = event.start`, update original; `all` - remove original. apply changes to the events array; for the imperative API, call `inst.updateEvent(original)` or `inst.removeEvent(original)`. - **Ok → edit**: call `updateRecurringEvent(originalRecurringEvent, eventOccurrence, newEvent, updatedEventOrNull, recurringEditMode)`. React imports it from `@mobiscroll/react`, Vue from `@mobiscroll/vue`, Angular from `@mobiscroll/angular`, JS/jQuery use `mobiscroll.updateRecurringEvent`. Returns `{ updatedEvent, newEvent? }` - replace the original in the list and, if `newEvent` exists, append it; for the imperative API, call `inst.updateEvent(result.updatedEvent)` and `inst.addEvent(result.newEvent)`. - When triggered from the **popup Save button** (edit path): pass the form-built event as the 4th argument and `null` as the 3rd. When triggered from **drag/drop** (`onEventUpdate` path): pass `null` as 4th and the drag-created `newEvent` as 3rd. - **Add button**: build event from form state with `getCustomRule()` as `recurring`, append to the events list; JS/jQuery: call `inst.updateEvent(newEvent)` to finalize the temp event. Then call `navigateTo()` and close popup. - **Save button (non-recurring)**: build updated event from form state, replace in list, call `navigateTo()`, close popup. - **`navigateTo()`**: for yearly events, compute the correct year and navigate to `recurring.month`/`recurring.day`; for all others, navigate to `event.start`. ## Run it in your project 1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial). 2. Clone the repository: ``` git clone https://github.com/acidb/mobiscroll-demos-angular.git ``` 3. If not installed yet, install the Mobiscroll CLI from NPM: ``` npm install -g @mobiscroll/cli ``` 4. Config Mobiscroll - open a terminal window in the root directory and run: ``` mobiscroll config angular ``` 5. Install dependencies - open a terminal window in the root directory and run: ``` npm install ``` 6. Run the project: ``` ng serve ``` On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`. Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation ## Related demos - Previous: [Bulk Event Actions](https://demo.mobiscroll.com/angular/scheduler/event-bulk-actions-edit-delete-update.md) - Add bulk event actions to Angular Scheduler — select multiple events via shortcuts or select-all, apply bulk actions, and use right-click for per-event actions. - Next: [Prevent Past Event Creation](https://demo.mobiscroll.com/angular/scheduler/disallow-past-event-creation.md) - Block event creation and editing on past dates in the Angular Scheduler — past dates are blocked, past events are locked, and failed attempts show a toast.