Proのインストール

DayFlow Pro では、2 種類の認証情報を使用します：

@dayflow-pro/* パッケージをインストールするためのプライベート npm トークン
アプリケーション内で Pro 機能を有効化する署名済み DayFlow Pro ライセンスキー

この npm トークンはパッケージのダウンロード専用です。ローカルシェルまたは CI のシークレットストアに保存し、クライアント側の環境変数として公開しないでください。署名済み Pro ライセンスキーは、これらとは別のクライアント側アクティベーショントークンです。

1. プライベートレジストリへのアクセス設定

プロジェクトルートの .npmrc に次の設定を追加します：

@dayflow-pro:registry=https://gitlab.com/api/v4/projects/81880038/packages/npm/
//gitlab.com/api/v4/projects/81880038/packages/npm/:_authToken=${DAYFLOW_PRO_NPM_TOKEN}

インストール前にトークンを環境変数へ設定します：

export DAYFLOW_PRO_NPM_TOKEN="your-pro-package-token"

アプリケーションで使用するパッケージだけをインストールしてください：

pnpm add @dayflow-pro/license \
  @dayflow-pro/resource-timeline \
  @dayflow-pro/resource-grid \
  @dayflow-pro/plugin-print

2. ライセンスの設定方法を選ぶ

DayFlow Pro はグローバル登録と明示的な license オプションの両方をサポートします。アプリケーションが署名済みライセンスキーを取得する方法に応じて選択してください。

方法 A：起動時に一度だけ登録する

ページの実行中にライセンスキーが変わらない場合は、フレームワークの初回レンダー前に registerDayflowProLicense() を呼び出します：

src/main.tsx（Vite）

import { registerDayflowProLicense } from '@dayflow-pro/license';

const token = import.meta.env.VITE_DAYFLOW_PRO_LICENSE_TOKEN;

if (!token) {
  throw new Error('Missing VITE_DAYFLOW_PRO_LICENSE_TOKEN');
}

registerDayflowProLicense({ token });

// 登録後に React、Vue、Angular、または Svelte をレンダーします。

Next.js のクライアントコードでは、 process.env.NEXT_PUBLIC_DAYFLOW_PRO_LICENSE_TOKEN などのクライアント公開用変数を使用できます。

登録後、Pro のビューとプラグインはライセンスを自動的に読み取ります。グローバル登録はリアクティブではないため、初回レンダー前に実行してください。実行中にユーザーがライセンスを入力、変更、切り替えできる場合は、次の明示的な方法を使用します。

方法 B：ライセンスを明示的に渡す

実行時のライセンス入力、アカウント切り替え、マルチテナント、ブラウザストレージからの復元には、明示的な設定を使用します：

import type { PackageLicenseConfig } from '@dayflow-pro/license';

const license: PackageLicenseConfig = {
  token,
  onTokenRefresh: nextToken => {
    localStorage.setItem('dayflow-pro-license', nextToken);
  },
};

const timelineView = createResourceTimelineView({
  license,
  resources: timelineResources,
});

const gridView = createResourceGridView({
  license,
  mode: 'resourceView',
  resources: gridResources,
});

const printPlugin = createPrintPlugin({ license });

ビューまたはプラグインに明示した license は、グローバル登録より優先されます。

3. Pro パッケージを通常どおり使用する

Pro ビューは公開版 DayFlow と同様に views 配列へ、Pro プラグインは plugins 配列へ追加します：

パッケージ	ファクトリー	追加先
`@dayflow-pro/resource-timeline`	`createResourceTimelineView()`	`views`
`@dayflow-pro/resource-grid`	`createResourceGridView()`	`views`
`@dayflow-pro/plugin-print`	`createPrintPlugin()`	`plugins`

Pro ファクトリーはフレームワークに依存しません。共有設定を 1 つのモジュールに置き、各フレームワークアダプターへ接続します：

src/dayflow-pro.ts

import {
  createEvent,
  createWeekView,
  type CalendarAppConfig,
  type Event,
} from '@dayflow/core';
import type { PackageLicenseConfig } from '@dayflow-pro/license';
import { createResourceTimelineView } from '@dayflow-pro/resource-timeline';
import { createResourceGridView } from '@dayflow-pro/resource-grid';
import { createPrintPlugin } from '@dayflow-pro/plugin-print';

const getResourceId = (event: Event) =>
  typeof event.meta?.resourceId === 'string'
    ? event.meta.resourceId
    : event.calendarId;

export function createProCalendar(license?: PackageLicenseConfig) {
  const timelineView = createResourceTimelineView({
    license,
    resources: [
      {
        id: 'design',
        name: 'デザイン',
        groupId: 'delivery',
        groupName: 'デリバリー',
        subtitle: 'プロダクトデザイン',
      },
      {
        id: 'engineering',
        name: 'エンジニアリング',
        groupId: 'delivery',
        groupName: 'デリバリー',
        subtitle: 'フロントエンド',
      },
    ],
    defaultView: 'week',
    height: 640,
    getResourceId,
  });

  const gridView = createResourceGridView({
    license,
    mode: 'resourceView',
    resources: [
      { id: 'design', title: 'デザイン' },
      { id: 'engineering', title: 'エンジニアリング' },
    ],
    visibleDays: 3,
    firstHour: 8,
    lastHour: 18,
    getResourceId,
  });

  const printPlugin = createPrintPlugin({
    license,
    defaultOptions: {
      miniCalendar: true,
      calendarKeys: true,
      textSize: 'medium',
    },
  });

  const config: CalendarAppConfig = {
    views: [createWeekView(), timelineView, gridView],
    plugins: [printPlugin],
    defaultView: 'resource',
    events: [
      createEvent({
        id: 'launch-plan',
        title: 'リリース計画',
        start: new Date(2026, 6, 29, 9),
        end: new Date(2026, 6, 29, 11),
        calendarId: 'design',
        meta: { resourceId: 'design' },
      }),
    ],
  };

  return { config, printPlugin };
}

次の例は方法 A のグローバルライセンスを使用します。方法 B の場合は、明示的なライセンスオブジェクトを createProCalendar(license) に渡してください。

src/App.tsx

import { DayFlowCalendar, useCalendarApp } from '@dayflow/react';
import { createProCalendar } from './dayflow-pro';

const { config, printPlugin } = createProCalendar();

export default function App() {
  const calendar = useCalendarApp(config);

  return (
    <>
      <button type='button' onClick={() => printPlugin.api.open()}>
        印刷
      </button>
      <DayFlowCalendar calendar={calendar} />
    </>
  );
}

src/App.vue

<template>
  <button type="button" @click="printPlugin.api.open()">印刷</button>
  <DayFlowCalendar :calendar="calendar" />
</template>

<script setup lang="ts">
import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
import { createProCalendar } from './dayflow-pro';

const { config, printPlugin } = createProCalendar();
const calendar = useCalendarApp(config);
</script>

src/app/app.component.ts

import { Component } from '@angular/core';
import { DayFlowCalendarModule } from '@dayflow/angular';
import { createProCalendar } from '../dayflow-pro';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `
    <button type="button" (click)="printPlugin.api.open()">印刷</button>
    <dayflow-calendar [calendar]="calendar"></dayflow-calendar>
  `,
})
export class AppComponent {
  private readonly pro = createProCalendar();
  readonly calendar = this.pro.config;
  readonly printPlugin = this.pro.printPlugin;
}

src/App.svelte

<script lang="ts">
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import { createProCalendar } from './dayflow-pro';

  const { config, printPlugin } = createProCalendar();
  const calendar = useCalendarApp(config);
</script>

<button type="button" onclick={() => printPlugin.api.open()}>印刷</button>
<DayFlowCalendar {calendar} />

Resource Timeline はリソース名に name、Resource Grid は title を使用します。イベントはリソース ID に解決できる必要があります。両方のビューは既定で event.resourceId を読み、次に event.calendarId へフォールバックします。別のフィールドに保存している場合は getResourceId を設定してください。

4. Pro スタイルを正しくインポートする

インストールした各ビューとプラグインには対応するスタイルシートが必要です。完全版の styles.css は 1 つだけ CSS 基盤として選び、それ以外の DayFlow パッケージには styles.components.css を使用します。

Tailwind を使わず、Resource Timeline を使用する場合

Resource Timeline を唯一の完全版 CSS 基盤として使用します。このビューに必要なすべてのスタイルが含まれています：

src/index.css

@import '@dayflow-pro/resource-timeline/dist/styles.css';
@import '@dayflow/core/dist/styles.components.css';
@import '@dayflow-pro/resource-grid/dist/styles.components.css';
@import '@dayflow-pro/plugin-print/dist/styles.components.css';

この構成では @dayflow/core/dist/styles.css を追加で読み込まないでください。完全版スタイルを 2 つ読み込むと CSS 基盤/reset が重複します。ビュー切替ボタンが素の表示になる、グリッド線が濃すぎる、間隔が崩れる、イベント内容が見えない、といった症状が発生します。

Tailwind を使わず、Resource Timeline を使用しない場合

DayFlow Core を完全版の基盤にして、その後に Pro パッケージのコンポーネントスタイルを読み込みます：

src/index.css

@import '@dayflow/core/dist/styles.css';
@import '@dayflow-pro/resource-grid/dist/styles.components.css';
@import '@dayflow-pro/plugin-print/dist/styles.components.css';

インストールしていないパッケージのインポートは削除してください。

Tailwind CSS v4 を使用する場合

アプリケーション側に CSS 基盤があるため、すべての DayFlow パッケージでコンポーネント専用エントリを使用します：

src/app.css

@import '@dayflow/core/dist/styles.components.css';
@import '@dayflow-pro/resource-grid/dist/styles.components.css';
@import '@dayflow-pro/resource-timeline/dist/styles.components.css';
@import '@dayflow-pro/plugin-print/dist/styles.components.css';
@import 'tailwindcss';

@source '../node_modules/@dayflow/core/dist/**/*.js';
@source '../node_modules/@dayflow-pro/resource-grid/dist/**/*.js';
@source '../node_modules/@dayflow-pro/resource-timeline/dist/**/*.js';
@source '../node_modules/@dayflow-pro/plugin-print/dist/**/*.js';

CSS ファイルの場所に合わせて @source の相対パスを調整してください。この構成に完全版の styles.css を混在させないでください。

Proのインストール

1. プライベートレジストリへのアクセス設定

2. ライセンスの設定方法を選ぶ

方法 A：起動時に一度だけ登録する

方法 B：ライセンスを明示的に渡す

3. Pro パッケージを通常どおり使用する

4. Pro スタイルを正しくインポートする

Tailwind を使わず、Resource Timeline を使用する場合

Tailwind を使わず、Resource Timeline を使用しない場合

Tailwind CSS v4 を使用する場合

トラブルシューティング

Resource Timeline をインストールできない

Pro ビューでライセンス不足が表示される

ビューは表示されるがスタイルが崩れている

On this page