# DayFlow

**English** | [中文](README.zh.md) | [日本語](README.ja.md) | [Getting Started & Contributing](CONTRIBUTING.md)

A flexible and feature-rich calendar component library for **React, Vue, Angular, and Svelte** with drag-and-drop support, multiple views, and plugin architecture.

[![npm](https://img.shields.io/npm/v/@dayflow/core?logo=npm&color=blue&label=version)](https://www.npmjs.com/package/@dayflow/core)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen?logo=github)](https://github.com/dayflow-js/dayflow/pulls)
[![License](https://img.shields.io/github/license/dayflow-js/dayflow)](https://github.com/dayflow-js/dayflow/blob/main/LICENSE)
[![Discord](https://img.shields.io/badge/Discord-Join%20Chat-5865F2?logo=discord&logoColor=white)](https://discord.gg/9vdFZKJqBb)

## Features

### Daily, Weekly, Monthly and Yearly View Types

#### Day View

![Day View](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/DayView.png)

#### Week View

![Week View](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/WeekView.png)

#### Month View

![Month View](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/MonthView.png)

#### Year View(Fixed-Week)

![Year View](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/Year-Fixed-Week.png)

#### Year View(Year-Canvas)

![Year Canvas View](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/Year-Canvas.png)

### Mobile View Support

#### Mobile Day & Year View

![Mobile Day and Year View](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/Mobile-Day-Year.png)

#### Mobile Week & Month View

![Mobile Week and Month View](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/Mobile-Week-Month.png)

### Multiple Event Detail Panel options

#### Detail Popup

![Popup](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/popup.png)

#### Detail Dialog

![Dialog](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/dialog.png)

### Dark Mode Support

![Dark Mode](https://raw.githubusercontent.com/dayflow-js/calendar/main/assets/images/DarkMode.png)

### Easy to resize and drag

https://github.com/user-attachments/assets/726a5232-35a8-4fe3-8e7b-4de07c455353

https://github.com/user-attachments/assets/957317e5-02d8-4419-a74b-62b7d191e347

## Sidebar Group Management

`@dayflow/plugin-sidebar` lets users create groups from the sidebar context menu and rename, delete, or create calendars inside a group from the group context menu. Group headers can be dragged to change their order.

Use `groups` to restore persisted group names and order, including empty groups. Group callbacks may return a Promise; DayFlow waits for it before applying the change.

```ts
import { createSidebarPlugin } from '@dayflow/plugin-sidebar';

const sidebarPlugin = createSidebarPlugin({
  groups: savedGroups,
  onGroupCreate: async groupName => saveGroup(groupName),
  onGroupRename: async (previousName, nextName, calendars) =>
    renameGroup(previousName, nextName, calendars),
  onGroupDelete: async (groupName, calendars) =>
    deleteGroup(groupName, calendars),
  onGroupReorder: async groups => saveGroupOrder(groups),
});
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## Bug Reports

If you find a bug, please file an issue on [GitHub Issues](https://github.com/dayflow-js/dayflow/issues).

## Support

For questions and support, please open an issue on GitHub or go to discord.

---