DHTMLX Scheduler Proをnpm＋TypeScriptから使う方法

DHTMLX Schedulerは、強力でユーザーフレンドリーなJavaScriptイベントカレンダーライブラリで、機能豊富なスケジューリングソリューションをウェブアプリケーションに迅速に統合できます。独自のAPIと拡張性により、高度にカスタマイズ可能なタイムラインビュー（Proのみ）、月間ビュー、週間ビューなど、様々なビューの設定が可能で、多機能なカレンダーとスケジューラーを容易に作成できます。

この記事では、DHTMLX SchedulerのProバージョンを、npm＋TypeScirptで使用するためのセットアップ手順を紹介します。

はじめに

DHTMLX Schedulerは npm install dhtmlx-schedulerでインストールできます。ただし、この方法でインストールしたものは「Free版」となるため、「Pro版」でしか使えないタイムラインビューは使用できません。

Pro版をnpmでインストールする方法

Pro版を使う場合は、DHTMLXのサイトから購入またはトライアル版でダウンロードした「Pro版」を、npmでローカルインストーします。

STEP1. Pro版のダウンロード

以下のサイトから「Pro版」を購入するか、トライアル版でダウンロードします。

DHTMLX - Scheduler

ダウンロードしたら、DHTMLX Schedulerのファイルを解凍します。解凍したフォルダ内に、backendとcodebaseという名前の2つのフォルダが含まれているはずです。

次に、プロジェクトのルートディレクトリ（トップレベル）で、libという名前の新しいフォルダを作成し、以下のツリー構造になるように、ダウンロードしたDHTMLX Schedulerのファイルをコピーします。

.
├── lib
│   └── dhtmlx-scheduler
│       ├── backend
│       │   └── data
│       │       └── seed
│       └── codebase

STEP2. 「package.json」に追加

package.jsonのdependenciesオブジェクトに以下の2行を追加します。

  "dependencies": {
    "dhtmlx-scheduler": "file:lib/dhtmlx-scheduler",
    "@types/dhtmlx-scheduler": "file:lib/dhtmlx-scheduler"
  }

ここで、file:lib/dhtmlx-schedulerは、先ほど配置したDHTMLX Schedulerのローカルディレクトリへのパスを指定しています。

その後、以下のコマンドを実行し、dependenciesに追加したDHTMLX Schedulerをローカルインストールします。

npm update

以上の手順により、DHTMLX Schedulerがプロジェクトに正しく導入され、その機能がプロジェクト内で利用できるようになります。

使い方は、以下のような感じです。

import 'dhtmlx-scheduler'

  //タイムラインビューの作成
  scheduler.createTimelineView({
    name: "timeline",
    x_unit: "hour",
    x_date: "%H",
    event_dy: "full",
    x_step: 1,
    x_size: 24 * 7,
    x_start: 0,
    x_length: 48,
    y_unit: sections,
    y_property: "section_id",
    render: "bar",
    scrollable: true,
    column_width: 30,
  });
  scheduler.init('scheduler_here', new Date(2022, 5, 30), "timeline");