快速上手

欢迎使用 DayFlow！本指南将帮助您快速开始。

安装

使用 CLI（推荐）

运行交互式安装向导 —— 自动检测包管理器，选择框架与插件，一步完成安装。

npm create dayflow@latest

pnpm create dayflow@latest

yarn create dayflow

bun create dayflow@latest

Terminal

手动安装

也可以手动选择框架和包管理器进行安装：

npm install @dayflow/react @dayflow/core

pnpm add @dayflow/react @dayflow/core

yarn add @dayflow/react @dayflow/core

bun add @dayflow/react @dayflow/core

引入 DayFlow 样式

重要： 您必须在应用中引入 DayFlow 的样式。请将以下代码添加到您的主 App 组件或布局文件中：

// 在 App.tsx 或 layout.tsx 中
import '@dayflow/core/dist/styles.css';

也可以在 CSS 文件中导入：

/* src/index.css */
@import '@dayflow/core/dist/styles.css';

正在使用 Tailwind CSS？

请改为导入 styles.components.css，以避免 CSS Reset 与您现有样式的冲突：

@import '@dayflow/core/dist/styles.components.css';
@import 'tailwindcss';

查看 Tailwind V4 集成指南了解更多详情。

提示： 如果您使用 create-dayflow 安装向导并在 Tailwind CSS 选项中选择“是”，它会自动为您添加这条导入。

正在使用 Next.js Pages Router 或 Node.js require()？

@dayflow/core 是 ESM-only 的，不提供 CommonJS 构建版本。这意味着：

require('@dayflow/core') 会报错。请改用 import。
Next.js Pages Router 默认不会转译 node_modules 中的 ESM。请在 next.config.js 的 transpilePackages 中添加该包：

// next.config.js
module.exports = {
  transpilePackages: ['@dayflow/core'],
};

Next.js App Router (带有 "use client" / Server Components) 无需额外配置，开箱即用。
SSR 框架 (Nuxt, SvelteKit 等) 通常原生支持 ESM。如果遇到导入错误，请检查您的构建器选项（如 ssr.noExternal）中是否包含 @dayflow/core。

基础用法

选择您的框架，查看如何将 DayFlow 集成到您的应用中。

import {
  useCalendarApp,
  DayFlowCalendar,
  createDayView,
  createWeekView,
  createMonthView,
  createEventsPlugin,
} from '@dayflow/react';
import { createDragPlugin } from '@dayflow/plugin-drag';
import { createEvent, createAllDayEvent } from '@dayflow/core';
import '@dayflow/core/dist/styles.css';

function App() {
  const calendar = useCalendarApp({
    views: [createDayView(), createWeekView(), createMonthView()],
    plugins: [createDragPlugin(), createEventsPlugin()],
    events: [
      createEvent({
        id: '1',
        title: '团队会议',
        start: new Date(2025, 10, 15, 10, 0),
        end: new Date(2025, 10, 15, 11, 0),
      }),
      createAllDayEvent('2', '全天会议', new Date(2025, 10, 20)),
    ],
    initialDate: new Date(),
  });

  return <DayFlowCalendar calendar={calendar} />;
}

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

<script setup>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
  import {
    createDayView,
    createWeekView,
    createMonthView,
    createEventsPlugin,
    createEvent,
    createAllDayEvent
  } 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: '1',
        title: '团队会议',
        start: new Date(2025, 10, 15, 10, 0),
        end: new Date(2025, 10, 15, 11, 0),
      }),
      createAllDayEvent('2', '全天会议', new Date(2025, 10, 20)),
    ],
    initialDate: new Date(),
  });
</script>

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `
    <dayflow-calendar [calendar]="calendar"></dayflow-calendar>
  `
})
export class AppComponent {
  calendar = {
    views: [createDayView(), createWeekView(), createMonthView()],
    plugins: [createDragPlugin(), createEventsPlugin()],
    events: [
      createEvent({
        id: '1',
        title: '团队会议',
        start: new Date(2025, 10, 15, 10, 0),
        end: new Date(2025, 10, 15, 11, 0),
      }),
      createAllDayEvent('2', '全天会议', new Date(2025, 10, 20)),
    ],
    initialDate: new Date(),
  };
}

<script>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import {
    createDayView,
    createWeekView,
    createMonthView,
    createEventsPlugin,
    createEvent,
    createAllDayEvent
  } 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: '1',
        title: '团队会议',
        start: new Date(2025, 10, 15, 10, 0),
        end: new Date(2025, 10, 15, 11, 0),
      }),
      createAllDayEvent('2', '全天会议', new Date(2025, 10, 20)),
    ],
    initialDate: new Date(),
  });
</script>

<DayFlowCalendar {calendar} />

自定义样式

默认情况下，日历会自动撑满其容器的宽度。您可以通过 CSS 自定义日历的高度或其他样式。例如，设置响应式高度：

.df-calendar-container {
  --df-calendar-height: 760px !important;
  height: var(--df-calendar-height, 760px) !important;
}

@media (max-width: 768px) {
  .df-calendar-container {
    --df-calendar-height: 550px !important;
  }
}

注意： 本库使用现代的 Temporal API 处理日期/时间。通过辅助函数 (createEvent)，您可以轻松创建事件，而无需直接处理 Temporal 对象。