はじめに
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()],
calendars: [
{
id: 'work',
name: '仕事',
colors: {
lineColor: '#2563eb',
eventColor: '#dbeafe',
eventSelectedColor: '#bfdbfe',
textColor: '#1e3a8a',
},
},
],
events: [
createEvent({
id: '1',
title: 'チームミーティング',
start: new Date(2025, 10, 15, 10, 0),
end: new Date(2025, 10, 15, 11, 0),
calendarId: 'work',
}),
createAllDayEvent({
id: '2',
title: '終日会議',
start: new Date(2025, 10, 20),
calendarId: 'work',
}),
],
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()],
calendars: [
{
id: 'work',
name: '仕事',
colors: {
lineColor: '#2563eb',
eventColor: '#dbeafe',
eventSelectedColor: '#bfdbfe',
textColor: '#1e3a8a',
},
},
],
events: [
createEvent({
id: '1',
title: 'チームミーティング',
start: new Date(2025, 10, 15, 10, 0),
end: new Date(2025, 10, 15, 11, 0),
calendarId: 'work',
}),
createAllDayEvent({
id: '2',
title: '終日会議',
start: new Date(2025, 10, 20),
calendarId: 'work',
}),
],
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()],
calendars: [
{
id: 'work',
name: '仕事',
colors: {
lineColor: '#2563eb',
eventColor: '#dbeafe',
eventSelectedColor: '#bfdbfe',
textColor: '#1e3a8a',
},
},
],
events: [
createEvent({
id: '1',
title: 'チームミーティング',
start: new Date(2025, 10, 15, 10, 0),
end: new Date(2025, 10, 15, 11, 0),
calendarId: 'work',
}),
createAllDayEvent({
id: '2',
title: '終日会議',
start: new Date(2025, 10, 20),
calendarId: 'work',
}),
],
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()],
calendars: [
{
id: 'work',
name: '仕事',
colors: {
lineColor: '#2563eb',
eventColor: '#dbeafe',
eventSelectedColor: '#bfdbfe',
textColor: '#1e3a8a',
},
},
],
events: [
createEvent({
id: '1',
title: 'チームミーティング',
start: new Date(2025, 10, 15, 10, 0),
end: new Date(2025, 10, 15, 11, 0),
calendarId: 'work',
}),
createAllDayEvent({
id: '2',
title: '終日会議',
start: new Date(2025, 10, 20),
calendarId: 'work',
}),
],
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 を直接意識することなくイベントを簡単に作成できます。