Open-Source Vue Event Calendar

DayFlow is an MIT-licensed calendar component for Vue 3. 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 Vue 3example 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 yourVue 3 app’s event data so edits can follow your scheduling rules.

Add DayFlow to a Vue 3 app

Install the Vue 3 component, calendar core, and drag plugin.

npm install @dayflow/vue @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.

<script setup>
import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
import {
  createDayView, createWeekView, createMonthView,
  createEvent, createEventsPlugin,
} from '@dayflow/core';
import { createDragPlugin } from '@dayflow/plugin-drag';
import '@dayflow/core/dist/styles.css';

const calendar = useCalendarApp({
  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)),
    }),
  ],
});
</script>

<template>
  <DayFlowCalendar :calendar="calendar" />
</template>

Read the DayFlow installation guide