日历视图

Day Flow 支持四种不同的视图类型，每种类型都针对不同的用例和用户需求进行了优化。您可以以编程方式切换视图，或者提供 UI 供用户切换视图。

可用视图

日视图

日视图专注于单个日期，并带有详细的时间槽，非常适合管理每日日程。

配置

属性	类型	默认值	描述
`showAllDay`	`boolean`	`true`	是否显示全天事件行。
`scrollToCurrentTime`	`boolean`	`true`	初始加载时是否自动滚动到当前时间。
`timeFormat`	`'12h' \| '24h'`	`'24h'`	时间轴的时间格式。
`secondaryTimeZone`	`string`	`undefined`	仅在日视图中显示的辅助参考时间轴。

import {
  useCalendarApp,
  DayFlowCalendar,
  createDayView,
  ViewType,
} from '@dayflow/react'; // or '@dayflow/vue', '@dayflow/svelte', '@dayflow/angular'

function MyCalendar() {
  const calendar = useCalendarApp({
    views: [createDayView()],
    defaultView: ViewType.DAY,
    initialDate: new Date(),
  });

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

周视图

周视图显示一个带有时间槽的 7 天网格，显示具有准确开始和结束时间的事件。

配置

属性	类型	默认值	描述
`showWeekends`	`boolean`	`true`	是否显示周六和周日。
`showAllDay`	`boolean`	`true`	是否显示全天事件行。
`startOfWeek`	`number`	`1`	一周的开始日期（0 为周日，1 为周一等）。
`scrollToCurrentTime`	`boolean`	`true`	初始加载时是否自动滚动到当前时间。
`timeFormat`	`'12h' \| '24h'`	`'24h'`	时间轴的时间格式。
`secondaryTimeZone`	`string`	`undefined`	仅在周视图中显示的辅助参考时间轴。

import {
  useCalendarApp,
  DayFlowCalendar,
  createWeekView,
  ViewType,
} from '@dayflow/react'; // or '@dayflow/vue', '@dayflow/svelte', '@dayflow/angular'

function MyCalendar() {
  const calendar = useCalendarApp({
    views: [createWeekView()],
    defaultView: ViewType.WEEK,
    initialDate: new Date(),
  });

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

月视图

月视图显示传统的日历网格，显示一个月中的所有日期。

配置

属性	类型	默认值	描述
`showWeekNumbers`	`boolean`	`false`	是否显示周数。
`showMonthIndicator`	`boolean`	`true`	是否在滚动时显示月份指示标题。
`startOfWeek`	`number`	`1`	一周的开始日期（0 为周日，1 为周一等）。
`snapToMonth`	`boolean`	`false`	启用后，用户停止滚动时视图会自动对齐到当前主要月份的起始位置。
`scroll`	`MonthScrollConfig`	—	控制滚动锁定与月份切换动画，详见下方说明。

MonthScrollConfig

属性	类型	默认值	描述
`disabled`	`boolean`	`false`	禁用连续滚动，只能通过 Prev / Next 导航按钮切换月份。
`transition`	`'fade'` \| `undefined`	`undefined`	月份切换时的动画效果（仅在 `disabled: true` 时生效）。设为 `'fade'` 时，当前月份向左淡出，下一月份从右侧淡入；省略则保留原有的平滑滚动动画效果。

createMonthView({
  scroll: {
    disabled: true, // 锁定为单月模式，仅允许 Prev/Next 切换
    transition: 'fade', // 可选淡入淡出动画（省略则保持平滑滚动）
  },
});

import {
  useCalendarApp,
  DayFlowCalendar,
  createMonthView,
  ViewType,
} from '@dayflow/react'; // or '@dayflow/vue', '@dayflow/svelte', '@dayflow/angular'

function MyCalendar() {
  const calendar = useCalendarApp({
    views: [createMonthView()],
    defaultView: ViewType.MONTH,
    initialDate: new Date(),
  });

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

年视图

年视图提供全面的年度概览。DayFlow 的年视图支持三种模式：year-canvas（连续网格）、fixed-week（固定 52 周列）和 grid（非常适合热力图的 4x3 月份网格）。

配置

属性	类型	默认值	描述
`mode`	`'year-canvas' \| 'fixed-week' \| 'grid'`	`'year-canvas'`	年视图的显示模式。
`startOfWeek`	`number`	`1`	设置周起始日（0 为周日，1 为周一等）。用于 `fixed-week` 和 `grid` 模式。
`showTimedEventsInYearView`	`boolean`	`false`	是否在年视图中显示定时事件（圆点/指示器/热力强度）。
`gridDateClick`	`'popup' \| 'day-view' \| 'none' \| function`	`'popup'`	(Grid 模式) 点击日期单元格时的操作。
`gridDateDoubleClick`	`'day-view' \| 'none' \| function`	`'day-view'`	(Grid 模式) 双击日期单元格时的操作。
`gridPopupContent`	`function`	`undefined`	(Grid 模式) 日期弹出层的自定义渲染函数。
`gridHeatmapLevels`	`number`	`5`	(Grid 模式) 热力图的强度层级数量。

热力图自定义 (Grid 模式)

当使用 mode: 'grid' 时，日历会根据事件数量显示热力图强度。您可以通过在全局 CSS 中覆盖以下 CSS 变量来自定义颜色：

/* 浅色模式热力图 */
.df-year-grid-month {
  --heat-1: #ebf5ff;
  --heat-2: #cfe8ff;
  --heat-3: #91d5ff;
  --heat-4: #60a5fa;
  --heat-5: #3b82f6;
}

/* 深色模式热力图 */
.dark .df-year-grid-month {
  --heat-1: #1e3a5f;
  --heat-2: #2563eb;
  --heat-3: #1e40af;
  --heat-4: #3b82f6;
  --heat-5: #93c5fd;
}

如果您将 gridHeatmapLevels 更改为不同的数字（例如 3），则应提供对应数量的变量（例如 --heat-1 到 --heat-3）。

import {
  useCalendarApp,
  DayFlowCalendar,
  createYearView,
  ViewType,
} from '@dayflow/react';

function MyCalendar() {
  const calendar = useCalendarApp({
    views: [
      createYearView({
        mode: 'grid',
        showTimedEventsInYearView: true,
        gridHeatmapLevels: 5,
      }),
    ],
    defaultView: ViewType.YEAR,
  });

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

使用多个视图

您可以注册多个视图并允许用户在它们之间切换：

import {
  useCalendarApp,
  DayFlowCalendar,
  createDayView,
  createWeekView,
  createMonthView,
  createYearView,
  ViewType,
} from '@dayflow/react'; // or '@dayflow/vue', '@dayflow/svelte', '@dayflow/angular'

function MultiViewCalendar() {
  const calendar = useCalendarApp({
    views: [
      createDayView(),
      createWeekView(),
      createMonthView(),
      createYearView(),
    ],
    defaultView: ViewType.MONTH,
    initialDate: new Date(),
    callbacks: {
      onViewChange: view => {
        console.log('View changed to:', view);
      },
    },
  });

  return (
    <div className='h-screen'>
      <DayFlowCalendar calendar={calendar} />
    </div>
  );
}

编程控制视图

切换视图

// 切换到特定视图
calendar.changeView(ViewType.WEEK);

// 获取当前视图
const currentView = calendar.app.getCurrentView();
console.log(currentView.type); // 'week'

ViewType 枚举

enum ViewType {
  DAY = 'day',
  WEEK = 'week',
  MONTH = 'month',
  YEAR = 'year',
}

On this page