Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Your search did not match any results.

Recurring Appointments


This example demonstrates how to define recurring appointments. You can specify the appointment repetition interval programmatically or in the UI. In the former case, the appointment object should contain the recurrenceRule field. In the latter case, toggle the Repeat switcher on the appointment details form to mark the appointment as recurring and specify the required fields.

Copy to CodeSandBox
<dx-scheduler timeZone="America/Los_Angeles" [dataSource]="appointmentsData" [views]='["day", "week", "month"]' currentView="month" [currentDate]="currentDate" [firstDayOfWeek]="1" [startDayHour]="9" [height]="600"> <dxi-resource fieldExpr="roomId" label="room" [dataSource]="resourcesData" ></dxi-resource> </dx-scheduler>
import { NgModule, Component, enableProdMode } from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import {Appointment, Resource, Service} from './app.service'; import {DxSchedulerModule} from 'devextreme-angular'; if(!/localhost/.test( { enableProdMode(); } @Component({ styleUrls: ['app/app.component.css'], selector: 'demo-app', templateUrl: 'app/app.component.html', providers: [Service] }) export class AppComponent { appointmentsData: Appointment[]; currentDate: Date = new Date(2021, 2, 25); resourcesData: Resource[]; constructor(service: Service) { this.appointmentsData = service.getAppointments(); this.resourcesData = service.getResources(); } } @NgModule({ imports: [ BrowserModule, DxSchedulerModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule)
import { Injectable } from "@angular/core"; export class Appointment { text: string; roomId: number[]; startDate: Date; endDate: Date; recurrenceRule?: string; recurrenceException?: string; } export class Resource { text: string; id: number; color: string; } let appointments: Appointment[] = [ { text: "Watercolor Landscape", roomId: [1], startDate: new Date("2021-03-01T17:30:00.000Z"), endDate: new Date("2021-03-01T19:00:00.000Z"), recurrenceRule: "FREQ=WEEKLY;BYDAY=TU,FR;COUNT=10" }, { text: "Oil Painting for Beginners", roomId: [2], startDate: new Date("2021-03-01T17:30:00.000Z"), endDate: new Date("2021-03-01T19:00:00.000Z"), recurrenceRule: "FREQ=WEEKLY;BYDAY=MO,TH;COUNT=10" }, { text: "Testing", roomId: [3], startDate: new Date("2021-03-01T20:00:00.000Z"), endDate: new Date("2021-03-01T21:00:00.000Z"), recurrenceRule: "FREQ=WEEKLY;BYDAY=MO;WKST=TU;INTERVAL=2;COUNT=2" }, { text: "Meeting of Instructors", roomId: [4], startDate: new Date("2021-03-01T17:00:00.000Z"), endDate: new Date("2021-03-01T17:15:00.000Z"), recurrenceRule: "FREQ=DAILY;BYDAY=WE;UNTIL=20210401" }, { text: "Recruiting students", roomId: [5], startDate: new Date("2021-02-24T18:00:00.000Z"), endDate: new Date("2021-02-24T19:00:00.000Z"), recurrenceRule: "FREQ=YEARLY;BYWEEKNO=14", recurrenceException: "20210411T170000Z" }, { text: "Final exams", roomId: [3], startDate: new Date("2021-02-24T20:00:00.000Z"), endDate: new Date("2021-02-24T21:35:00.000Z"), recurrenceRule: "FREQ=YEARLY;BYWEEKNO=24;BYDAY=TH,FR" }, { text: "Monthly Planning", roomId: [4], startDate: new Date("2021-03-24T22:30:00.000Z"), endDate: new Date("2021-03-24T23:45:00.000Z"), recurrenceRule: "FREQ=MONTHLY;BYMONTHDAY=28;COUNT=1" }, { text: "Open Day", roomId: [5], startDate: new Date("2021-03-01T17:30:00.000Z"), endDate: new Date("2021-03-01T21:00:00.000Z"), recurrenceRule: "FREQ=YEARLY;BYYEARDAY=87" } ]; let resources: Resource[] = [ { text: "Room 101", id: 1, color: "#bbd806" }, { text: "Room 102", id: 2, color: "#f34c8a" }, { text: "Room 103", id: 3, color: "#ae7fcc" }, { text: "Meeting room", id: 4, color: "#ff8817" }, { text: "Conference hall", id: 5, color: "#03bb92" } ]; @Injectable() export class Service { getAppointments(): Appointment[] { return appointments; } getResources(): Resource[] { return resources; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, 'devextreme/localization.js': { "esModule": true } }, paths: { 'npm:': '' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.5.3/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib@2.1.0/tslib.js', 'rxjs': 'npm:rxjs@6.4.0', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.5', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.11', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.18', 'devextreme-angular': 'npm:devextreme-angular@20.2.5', 'preact': 'npm:preact@10.5.11/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.11/hooks/dist/hooks.js' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular/*/package.json", "npm:devextreme-angular/ui/*/package.json", "npm:devextreme-angular/package.json", "npm:devexpress-diagram/package.json", "npm:devexpress-gantt/package.json", ] });
<!DOCTYPE html> <html xmlns=""> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>