DTHMLX Schedulerのタイムラインビューをカスタマイズ

スケジュラーコンポーネントとして有名な、DHTMLX Schedulerのタイムラインビューをカスタマイズする方法をまとめる。

表示編

イベントに設定されるCSSクラス名を指定する

以下は一律my_eventのクラス名を返しているが、引数にはeventが渡されるので、イベントの内容になってCSSクラス名を切り替えることも可能。

scheduler.templates.event_class = function (start, end, event) {
    return "my_event";
};

イベントの表示内容をカスタマイズする

event_bar_textにイベント（バー）に表示するHTMLを返す関数を定義する。

scheduler.templates.event_bar_text = function (start, end, event) {
    return "<i>" + event.text + "</i>"
})

プロパティ編

すべてのイベントを取得

const events = scheduler.getEvents()

特定のidのイベントを取得

const event = scheduler.getEvent(id)

日付範囲のイベントを取得

var fromDate = new Date(2023, 5, 20)  // June 20, 2023
var toDate = new Date(2023, 5, 30)  // June 30, 2023

var events = scheduler.getEvents(fromDate, toDate)

選択されているイベントのIDを取得する

schedulerオブジェクトのプロパティに、選択イベントのidを取得方法がなさそうなので、onEventSelectedと、onEventUnselectedイベントを駆使するしかなさそうです。

var selectedId = ""  //選択されたIDを持つ変数

//イベントが選択された
scheduler.attachEvent("onEventSelected", function (id) {
  selectedId = id
}

//イベントが選択解除された
scheduler.attachEvent("onEventUnselected", function (id) {
  selectedId = ""
}

イベント編

イベントのクリック

scheduler.attachEvent("onClick", function (id, e) {
  console.log("Event with id " + id + " is clicked");
})

イベントが選択状態になったとき

scheduler.attachEvent("onEventSelected", function (id) {
  console.log("Event with id " + id + " is selected");
})

イベントが選択解除されたとき

scheduler.attachEvent("onEventUnselected", function (id) {
  console.log("Event with id " + id + " is unselected");
}

イベントの内容が変更される前のイベント

onBeforeEventChangedでは、イベントの内容が変更される直前のタイミングを拾うことができる。また、戻り値にfalse を返すことでイベントの変更をキャンセルすることも可能。

scheduler.attachEvent("onBeforeEventChanged", function (ev, e, is_new, original) {
    console.log("変更前:", original)
    console.log("変更後:", ev)
    return true;
});

Light Boxを独自のデザインにする

イベントをダブルクリックした時や、新規のイベントを作成する時に表示するLight Box（ポップアップ）を独自のデザインにする方法です。

HTMLを準備

Light Boxに表示するポップアップ画面のHTMLを準備

<div id="custom_form">
    <div>Custom Light box</div>
    <input id="name"/>
    <div>
        <button onclick="save_form()">保存</button>
        <button onclick="close_form()">キャンセル</button>
    </div>
</div>

JSの実装

JS側に以下の３つを実装する。

//Light Boxの表示
scheduler.showLightbox = function (id) {
    var ev = scheduler.getEvent(id);

    //ここにポップアップ画面に選択したイベントの値を反映するなどの処理を記述
    document.getElementById("name").value = ev.text
    
    scheduler.startLightbox(id, custom_form);
}

//Light Boxで保存処理をした時
function save_form() {
    var ev = scheduler.getEvent(scheduler.getState().lightbox_id);
    
    //ここにポップアップ画面で入力された値をイベントに反映する処理を記述ß
    ev.text = document.getElementById("name").value
    
    scheduler.endLightbox(true, custom_form);
}

//Light Boxでキャンセル操作をした時
function close_form(argument) {
    scheduler.endLightbox(false, custom_form);
}