日历视图

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

可用视图

日视图

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

配置

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

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

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

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

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

<script setup>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
  import { createDayView, ViewType } from '@dayflow/core';

  const calendar = useCalendarApp({
    views: [createDayView()],
    defaultView: ViewType.DAY,
    initialDate: new Date(),
  });
</script>

import { Component } from '@angular/core';
import { createDayView, ViewType } from '@dayflow/core';
import { DayFlowCalendarModule } from '@dayflow/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `
    <dayflow-calendar [calendar]="calendar"></dayflow-calendar>
  `
})
export class AppComponent {
  calendar = {
    views: [createDayView()],
    defaultView: ViewType.DAY,
    initialDate: new Date(),
  };
}

<script>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import { createDayView, ViewType } from '@dayflow/core';

  const calendar = useCalendarApp({
    views: [createDayView()],
    defaultView: ViewType.DAY,
    initialDate: new Date(),
  });
</script>

<DayFlowCalendar {calendar} />

周视图

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

配置

属性	类型	默认值	描述
`showWeekends`	`boolean`	`true`	是否显示周六和周日。
`showAllDay`	`boolean`	`true`	是否显示全天事件行。
`startOfWeek`	`number`	`1`	一周的开始日期（0 为周日，1 为周一等）。
`scrollToCurrentTime`	`boolean`	`true`	初始加载时是否自动滚动到当前时间。
`timeFormat`	`'12h' \| '24h'`	`'24h'`	时间轴的时间格式。
`secondaryTimeZone`	`string`	`undefined`	仅在周视图中显示的辅助参考时间轴。
`gridDateClick`	`'day-view' \| 'none' \| function`	`undefined`	点击日期单元格时的操作。
`gridDateDoubleClick`	`'create-event' \| 'day-view' \| 'none' \| function`	`'create-event'`	双击日期单元格时的操作。`'create-event'` (默认) 会在点击的位置 (小时) 创建一个 1 小时的 Timed Event。
`hourHeight`	`number`	`72`	时间网格中每小时行的高度（px）。

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

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

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

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

<script setup>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
  import { createWeekView, ViewType } from '@dayflow/core';

  const calendar = useCalendarApp({
    views: [createWeekView()],
    defaultView: ViewType.WEEK,
    initialDate: new Date(),
  });
</script>

import { Component } from '@angular/core';
import { createWeekView, ViewType } from '@dayflow/core';
import { DayFlowCalendarModule } from '@dayflow/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `
    <dayflow-calendar [calendar]="calendar"></dayflow-calendar>
  `
})
export class AppComponent {
  calendar = {
    views: [createWeekView()],
    defaultView: ViewType.WEEK,
    initialDate: new Date(),
  };
}

<script>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import { createWeekView, ViewType } from '@dayflow/core';

  const calendar = useCalendarApp({
    views: [createWeekView()],
    defaultView: ViewType.WEEK,
    initialDate: new Date(),
  });
</script>

<DayFlowCalendar {calendar} />

月视图

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

配置

属性	类型	默认值	描述
`showWeekNumbers`	`boolean`	`false`	是否显示周数。
`showMonthIndicator`	`boolean`	`true`	是否在滚动时显示月份指示标题。
`startOfWeek`	`number`	`1`	一周的开始日期（0 为周日，1 为周一等）。
`snapToMonth`	`boolean`	`false`	启用后，用户停止滚动时视图会自动对齐到当前主要月份的起始位置。
`gridDateClick`	`'week-view' \| 'day-view' \| 'none' \| function`	`undefined`	点击日期单元格时的操作。
`gridDateDoubleClick`	`'create-event' \| 'week-view' \| 'day-view' \| 'none' \| function`	`'create-event'`	双击日期单元格时的操作。`'create-event'` (默认) 会在点击的日期创建一个 9:00 至 10:00 的 Timed Event。
`eventHeight`	`number`	`16`	月视图网格中每个事件行的高度（px）。
`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';

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

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

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

<script setup>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
  import { createMonthView, ViewType } from '@dayflow/core';

  const calendar = useCalendarApp({
    views: [createMonthView()],
    defaultView: ViewType.MONTH,
    initialDate: new Date(),
  });
</script>

import { Component } from '@angular/core';
import { createMonthView, ViewType } from '@dayflow/core';
import { DayFlowCalendarModule } from '@dayflow/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `
    <dayflow-calendar [calendar]="calendar"></dayflow-calendar>
  `
})
export class AppComponent {
  calendar = {
    views: [createMonthView()],
    defaultView: ViewType.MONTH,
    initialDate: new Date(),
  };
}

<script>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import { createMonthView, ViewType } from '@dayflow/core';

  const calendar = useCalendarApp({
    views: [createMonthView()],
    defaultView: ViewType.MONTH,
    initialDate: new Date(),
  });
</script>

<DayFlowCalendar {calendar} />

Agenda 列表视图

Agenda 视图会按天分组，以时间顺序列表的方式展示事件。它特别适合移动端布局、查看较长时间范围，以及快速浏览接下来要发生的事项。

配置

属性	类型	默认值	描述
`daysToShow`	`number`	`14`	Agenda 列表中要渲染的连续天数。
`showEmptyDays`	`boolean`	`true`	是否保留没有事件的日期分组。
`timeFormat`	`'12h' \| '24h'`	`'24h'`	定时事件行使用的时间显示格式。
`gridDateClick`	`'day-view' \| 'none' \| function`	`undefined`	点击某一天 section 时触发的操作。
`gridDateDoubleClick`	`'day-view' \| 'none' \| function`	`'day-view'`	双击某一天 section 时触发的操作。

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

function MyCalendar() {
  const calendar = useCalendarApp({
    views: [
      createAgendaView({
        daysToShow: 14,
        timeFormat: '12h',
        gridDateDoubleClick: 'day-view',
      }),
    ],
    defaultView: ViewType.AGENDA,
    initialDate: new Date(),
  });

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

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

<script setup>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
  import { createAgendaView, ViewType } from '@dayflow/core';

  const calendar = useCalendarApp({
    views: [
      createAgendaView({
        daysToShow: 14,
        timeFormat: '12h',
        gridDateDoubleClick: 'day-view',
      }),
    ],
    defaultView: ViewType.AGENDA,
    initialDate: new Date(),
  });
</script>

import { Component } from '@angular/core';
import { createAgendaView, ViewType } from '@dayflow/core';
import { DayFlowCalendarModule } from '@dayflow/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `
    <dayflow-calendar [calendar]="calendar"></dayflow-calendar>
  `
})
export class AppComponent {
  calendar = {
    views: [
      createAgendaView({
        daysToShow: 14,
        timeFormat: '12h',
        gridDateDoubleClick: 'day-view',
      }),
    ],
    defaultView: ViewType.AGENDA,
    initialDate: new Date(),
  };
}

<script>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import { createAgendaView, ViewType } from '@dayflow/core';

  const calendar = useCalendarApp({
    views: [
      createAgendaView({
        daysToShow: 14,
        timeFormat: '12h',
        gridDateDoubleClick: 'day-view',
      }),
    ],
    defaultView: ViewType.AGENDA,
    initialDate: new Date(),
  });
</script>

<DayFlowCalendar {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`	`'create-event' \| 'day-view' \| 'none' \| function`	`'create-event'`	(Grid 模式) 双击日期单元格时的操作。`'create-event'` (默认) 会在点击的日期创建一个 9:00 至 10:00 的 Timed Event。
`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} />;
}

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

<script setup>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
  import { createYearView, ViewType } from '@dayflow/core';

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

import { Component } from '@angular/core';
import { createYearView, ViewType } from '@dayflow/core';
import { DayFlowCalendarModule } from '@dayflow/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `
    <dayflow-calendar [calendar]="calendar"></dayflow-calendar>
  `
})
export class AppComponent {
  calendar = {
    views: [
      createYearView({
        mode: 'grid',
        showTimedEventsInYearView: true,
        gridHeatmapLevels: 5,
      }),
    ],
    defaultView: ViewType.YEAR,
  };
}

<script>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import { createYearView, ViewType } from '@dayflow/core';

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

<DayFlowCalendar {calendar} />

使用多个视图

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

import {
  useCalendarApp,
  DayFlowCalendar,
  createAgendaView,
  createDayView,
  createWeekView,
  createMonthView,
  createYearView,
  ViewType,
} from '@dayflow/react';

function MultiViewCalendar() {
  const calendar = useCalendarApp({
    views: [
      createAgendaView({ daysToShow: 10 }),
      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>
  );
}

<template>
  <div class="h-screen">
    <DayFlowCalendar :calendar="calendar" />
  </div>
</template>

<script setup>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
  import {
    createAgendaView,
    createDayView,
    createWeekView,
    createMonthView,
    createYearView,
    ViewType,
  } from '@dayflow/core';

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

import { Component } from '@angular/core';
import {
  createAgendaView,
  createDayView,
  createWeekView,
  createMonthView,
  createYearView,
  ViewType,
} from '@dayflow/core';
import { DayFlowCalendarModule } from '@dayflow/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `
    <div class="h-screen">
      <dayflow-calendar [calendar]="calendar"></dayflow-calendar>
    </div>
  `
})
export class AppComponent {
  calendar = {
    views: [
      createAgendaView({ daysToShow: 10 }),
      createDayView(),
      createWeekView(),
      createMonthView(),
      createYearView(),
    ],
    defaultView: ViewType.MONTH,
    initialDate: new Date(),
    callbacks: {
      onViewChange: (view: any) => {
        console.log('View changed to:', view);
      },
    },
  };
}

<script>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import {
    createAgendaView,
    createDayView,
    createWeekView,
    createMonthView,
    createYearView,
    ViewType,
  } from '@dayflow/core';

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

<div class="h-screen">
  <DayFlowCalendar {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',
  AGENDA = 'agenda',
  YEAR = 'year',
}

On this page