ビュー

Day Flow は 4 つの異なるビュータイプをサポートしており、それぞれが異なるユースケースやユーザーのニーズに合わせて最適化されています。プログラムでビューを切り替えたり、ユーザーがビューを切り替えるための 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} />;
}

月ビュー

月ビューは、1 か月のすべての金を表示する伝統的なカレンダーグリッドを表示します。

設定

プロパティ	型	デフォルト	説明
`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, // 1ヶ月単位に固定、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 の月間グリッド）の 3 つのモードをサポートしています。

設定

プロパティ	型	デフォルト	説明
`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>
  );
}

API によるビュー制御

ビューの変更

// 特定のビューに変更
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',
}

ビュー