Proのインストール

DayFlow Pro は、2 つの異なる認証情報を使用します：

@dayflow-pro/* パッケージをインストールするためのプライベート npm レジストリトークン
Pro 機能をアクティベートするために使用する、署名済みの DayFlow Pro ライセンスキー

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

プライベートパッケージをインストールする前に、.npmrc に DayFlow Pro の npm トークンを追加します：

@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}

その後、購入したパッケージを通常どおりインストールします：

pnpm add @dayflow-pro/license @dayflow-pro/resource-grid

2. ライセンスキーを一度登録する

アプリケーションの起動時に、DayFlow Pro ライセンスキーを登録します：

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

registerDayflowProLicense({
  token: process.env.NEXT_PUBLIC_DAYFLOW_PRO_LICENSE_TOKEN!,
});

一度登録すれば、Pro ビューやプラグインが自動的にトークンを読み取ります。

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

インストールと登録の完了後は、毎回の呼び出しでライセンス設定を繰り返すことなく、Pro パッケージを使用できます：

import { DayFlowCalendar, useCalendarApp } from '@dayflow/react';
import { createResourceGridView } from '@dayflow-pro/resource-grid';

function App() {
  const calendar = useCalendarApp({
    views: [
      createResourceGridView({
        mode: 'resourceView',
        resources: [
          { id: 'room-a', title: 'ルームA' },
          { id: 'room-b', title: 'ルームB' },
        ],
      }),
    ],
  });

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

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

<script setup>
import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
import { createResourceGridView } from '@dayflow-pro/resource-grid';

const calendar = useCalendarApp({
  views: [
    createResourceGridView({
      mode: 'resourceView',
      resources: [
        { id: 'room-a', title: 'ルームA' },
        { id: 'room-b', title: 'ルームB' },
      ],
    }),
  ],
});
</script>

import { Component } from '@angular/core';
import { createResourceGridView } from '@dayflow-pro/resource-grid';
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: [
      createResourceGridView({
        mode: 'resourceView',
        resources: [
          { id: 'room-a', title: 'ルームA' },
          { id: 'room-b', title: 'ルームB' },
        ],
      }),
    ],
  };
}

<script>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import { createResourceGridView } from '@dayflow-pro/resource-grid';

  const calendar = useCalendarApp({
    views: [
      createResourceGridView({
        mode: 'resourceView',
        resources: [
          { id: 'room-a', title: 'ルームA' },
          { id: 'room-b', title: 'ルームB' },
        ],
      }),
    ],
  });
</script>

<DayFlowCalendar {calendar} />

Proのインストール

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

2. ライセンスキーを一度登録する

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

On this page