Open-Source Angular Event Calendar

DayFlow is an MIT-licensed calendar component for Angular. Switch between day, week, and month views, drag events to move them, and resize events to adjust their duration.

Try the interactive DayFlow demo

The shared demo lets you try the calendar interactions. Use the Angularexample below to integrate them into your app.

Plan the day or scan the whole month

Use the day view to schedule appointments, the week view to coordinate a team, or the month view to spot busy stretches. The same events stay in view as users switch between layouts.

Create and adjust events on the calendar

Drag across the time grid to create an event. Move it to reschedule or resize it to change its duration. Connect the calendar to yourAngular app’s event data so edits can follow your scheduling rules.

Add DayFlow to a Angular app

Install the Angular component, calendar core, and drag plugin.

npm install @dayflow/angular @dayflow/core @dayflow/plugin-drag

Add this component to your app. It opens with a sample event for today that you can move or resize in the time grid.

import { Component } from '@angular/core';
import { DayFlowCalendarModule } from '@dayflow/angular';
import {
  createDayView, createWeekView, createMonthView,
  createEvent, createEventsPlugin,
} from '@dayflow/core';
import { createDragPlugin } from '@dayflow/plugin-drag';
import '@dayflow/core/dist/styles.css';

@Component({
  selector: 'app-team-calendar',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: '<dayflow-calendar [calendar]="calendar"></dayflow-calendar>',
})
export class TeamCalendarComponent {
  calendar = {
  views: [createDayView(), createWeekView(), createMonthView()],
  plugins: [createDragPlugin(), createEventsPlugin()],
  events: [
    createEvent({
      id: 'team-meeting',
      title: 'Team meeting',
      start: new Date(new Date().setHours(10, 0, 0, 0)),
      end: new Date(new Date().setHours(11, 0, 0, 0)),
    }),
  ],
};
}

Read the DayFlow installation guide