# DayFlow Calendar: A Framework-Agnostic Component for React, Vue, Angular, and Svelte

> DayFlow is a MIT-licensed TypeScript calendar component library with a plugin architecture that supports React, Vue, Angular, and Svelte from a single codebase. It provides day, week, month, and year views, mobile layouts, drag-and-drop resizing, dark mode, and optional plugins for localization, sidebar, and keyboard shortcuts. The library is actively maintained with recent patch releases.

**dayflow-js/calendar** — Project brief: A lightweight and elegant React/Vue/Angular/Svelte full calendar(big-calendar) component.

- Repository: https://github.com/dayflow-js/calendar
- Website: https://calendar.dayflow.studio
- Stars: 811 · Forks: 60
- Language: TypeScript
- License: MIT
- Published: 2026-08-04 · Updated: 2026-08-18 · Language: en
- Canonical page: https://hysenlabs.com/projects/dayflow-js-calendar

## What DayFlow Is and Who It Targets

DayFlow is a calendar component library built for teams who need a full-featured event calendar that works across React, Vue, Angular, and Svelte without a separate implementation for each. It ships as a monorepo under the @dayflow/ namespace, with the core logic in @dayflow/core and optional plugins distributed as separate packages.

The target audience is frontend developers building applications that require scheduling or event display. A project management tool, a booking system, a scheduling application, or an admin dashboard that includes date-based navigation are the typical use cases. The library handles the view logic (switching between day, week, month, and year), event display, drag-and-drop interaction, and mobile layouts; the application provides the data and any business logic around events.

The library is MIT-licensed and available on npm under @dayflow/core. The most recent release at the time of the last push was v3.7.3.

## Multi-Framework Architecture: One Core, Four Integrations

The repository is structured as a pnpm monorepo. The packages/ directory contains separate packages for each supported framework. The @dayflow/core package contains the shared logic, and framework-specific adapters bind it to React, Vue, Angular, and Svelte component systems.

This design means that view logic, event handling, and plugin coordination live in one place and are tested once. Each framework adapter translates the core API into the native component format for that framework. The examples/ directory includes separate working examples per framework.

The package.json's devDependencies include framework-specific build tools: @preact/preset-vite and react alongside the framework integration packages. The test suite runs vitest for the core and framework packages and pnpm --filter @dayflow/angular test for the Angular-specific tests, reflecting the different test infrastructure Angular requires.

## Installing DayFlow and Adding It to a Project

The npm package name is @dayflow/core. The README's npm badge links to https://www.npmjs.com/package/@dayflow/core. Install for your framework:

```bash
npm install @dayflow/core
```

Optional plugins are separate packages and must be installed alongside core:

```bash
npm install @dayflow/plugin-drag
npm install @dayflow/plugin-localization
```

The monorepo uses pnpm workspaces for internal dependencies. External consumers install via npm or pnpm without needing the workspace setup. The library targets modern bundlers; the examples/ directory shows integration patterns using Vite.

The CONTRIBUTING.md and RELEASING.md files in the root cover the contribution and release workflow. The lefthook.yml file configures git hooks for linting and formatting via oxlint and oxfmt.

## View Types: Day, Week, Month, and Year With Two Year Modes

DayFlow provides four view types. Day view shows a single day with hourly slots. Week view shows a seven-day grid. Month view shows a full calendar month. Year view has two distinct display modes: Fixed-Week, which shows the year as a grid of weeks, and Year-Canvas, which provides a different layout suited to high-level date browsing.

Mobile views are a separate concern from desktop views. The library includes mobile-specific layouts for day and year views, and separate mobile layouts for week and month views. Switching between desktop and mobile views happens via responsive configuration rather than requiring a different component.

Event detail panels come in two variants: a popup that appears in-place near the clicked event, and a dialog that centers on screen. Both are included in the core; the choice between them is a configuration decision.

## Plugin Architecture and Available Plugins

The plugin system separates optional functionality from the core calendar. The devDependencies in the root package.json list four plugins: @dayflow/plugin-drag for drag-and-drop event resizing and repositioning, @dayflow/plugin-keyboard-shortcuts for keyboard navigation, @dayflow/plugin-localization for date and text localization, and @dayflow/plugin-sidebar for a date-navigation sidebar component. @dayflow/ui-range-picker is listed separately as a UI utility.

Plugins are workspace packages in the monorepo. External consumers install them from npm as separate packages alongside @dayflow/core. This architecture means a project that needs only the core calendar view with no drag-and-drop does not include the drag plugin in its bundle.

The plugin-localization package is particularly relevant for international deployments. Calendar applications often need locale-aware date formatting, week start day configuration, and translated month and day names. Keeping this as a plugin means the localization data only loads when explicitly included.

## Comparing DayFlow to FullCalendar and Supported Capabilities

FullCalendar is a long-established JavaScript event calendar library with separate adapter packages for React, Vue, and Angular. It was originally a jQuery-based library and grew framework support over time through separate integration packages. DayFlow was designed from the start with a shared core and framework-specific adapters, which means its multi-framework support is built into the architecture rather than added through integration layers.

The practical difference is in maintenance surface. FullCalendar's React, Vue, and Angular integrations are maintained as separate packages, each tracking API changes in the target framework. DayFlow's single core with thin framework adapters concentrates maintenance at the core level. Whether this difference matters depends on which framework your project uses and whether you expect to maintain the calendar component across framework migrations.

Dark mode is supported at the component level and does not require a global CSS variable override. The drag-and-drop support in @dayflow/plugin-drag handles both horizontal resizing and vertical repositioning of events. The repository has three releases since September 2026, with v3.7.3 released on 2026-09-19. The last push was on 2026-09-20. The project is MIT-licensed.

## Conclusion

DayFlow is a good fit for teams who need a feature-complete calendar component across multiple frontend frameworks and want to avoid maintaining separate integrations. The plugin architecture keeps the core lean while making drag-and-drop, localization, sidebar, and keyboard shortcuts optional. Before adopting it, verify that your target framework version aligns with the tested versions; the pnpm workspace structure shows separate packages per framework, and framework API changes in major Angular or Vue releases can affect compatibility.

## FAQ

### Does DayFlow Calendar support Angular?

Yes. The monorepo includes a separate @dayflow/angular package. The test suite runs Angular-specific tests with pnpm --filter @dayflow/angular test. The examples/ directory includes an Angular integration example.

### How is drag-and-drop support included in DayFlow?

Drag-and-drop is an optional plugin, not part of the core package. Install @dayflow/plugin-drag separately alongside @dayflow/core and register it with the calendar. This keeps the core bundle size unaffected for projects that do not need drag interaction.

### What is the npm package name for DayFlow?

The core package is @dayflow/core, listed on npm at npmjs.com/package/@dayflow/core. Optional plugins such as @dayflow/plugin-drag and @dayflow/plugin-localization are separate npm packages.

## Sources

- [Official documentation](https://calendar.dayflow.studio)
- [Official README](https://github.com/dayflow-js/calendar#readme)
- [Project repository](https://github.com/dayflow-js/calendar)
- [Release notes](https://github.com/dayflow-js/calendar/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/dayflow-js-calendar