はじめに

DayFlow は「すぐに触れるカレンダー体験」を目指して設計された、マルチフレームワーク対応（React, Vue, Svelte, Angular）のコンポーネントスイートです。このページでは、最小構成で導入するための流れと、次に読むべきドキュメントをまとめました。

インストール

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.tsx や layout.tsx など）でスタイルシートを 1 行追加してください。

// App.tsx または layout.tsx
import '@dayflow/core/dist/styles.css';

CSS ファイルで読み込みたい場合は次のように記述できます。

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

Tailwind CSS を使用していますか？

既存のスタイルとの CSS リセットの競合を避けるために、代わりに styles.components.css をインポートしてください：

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

詳細については、Tailwind V4 integration を参照してください。

ヒント: create-dayflow セットアップウィザードで Tailwind CSS に「はい」を選ぶと、この import はルート CSS ファイルへ自動追加されます。

Next.js Pages Router または Node.js の require() を使っていますか？

@dayflow/core は ESM のみ を提供しており、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）は追加設定なしで動作します。
Nuxt・SvelteKit などの SSR フレームワークは通常 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;
  }
}

注: DayFlow は、日付/時刻の処理にモダンな Temporal API を内部で使用しています。ヘルパー関数 (createEvent) を使用することで、Temporal を直接意識することなくイベントを簡単に作成できます。

次に読むとよいページ

イベント：予定作成・更新・削除の基本
ビュー：日・週・月ビューの挙動
サイドバー：カレンダーリストやフィルターの構成
機能一覧：DayFlow が提供する追加機能を俯瞰

On this page