
webixでスケジューラ機能を実装(その1)No.068
今回は、webixライブラリのスケジューラ機能の紹介です。
この機能を利用するには、商用ライセンス(Pro版でかつスケジューラ機能を追加)が必要なので、どのような機能かを何度かに分割して紹介します。
尚、ライブラリは、UI(Javascript)側のみなので、サーバサイド(イベント情報の保存や検索など)は、何らかの言語で実装する必要があります。
オンラインマニュアルにもサーバサイドの実装について記述があるので参考にしながら実装が必要です。
まずは、ネット上の説明記事です。(英語ですが、翻訳して閲覧もできます)
さまざまな表示モードがあり、一般的には、毎月のスケジュールをカレンダ表示するモード

該当日を時間単位で表示や編集できるモード

イベント情報だけをピックアップしてサマリ表示するモード

日本語(ロケール)対応も可能で、事前に辞書定義が必要ですが、日本語表示や別の外国語表示も可能です。

スケジューラを個人で使うケースや、組織や会社全体で共通的に使う方法や個人と会社の共有スケジュールだけ表示する方法、組織のグループメンバーだけ表示する方法など、スケジュールの共有化が可能です。
権限などの設定も必要ですが、他人のスケジュールにイベントの追加や編集操作も可能です。
以下のURLクリックでデモ画面をPCやスマホで表示してみてください
Todayクリックで2024/10/4の10月のスケジュールが表示されます

デモは、更新操作もできるので、不特定多数の方の操作が反映されています。画面内のイベント情報が変更されている可能性もありますので、ご了承ください。
スマホでも操作可能です。
デモ画面なので、英語表示になっていますが、
月と日の表示サンプルです


少し、日本語にカスタマイズしたデモ画面とソースです。
snipet機能で表示しています。(ソース修正がリアルタイムに画面に反映されるサービス)以下のURLクリックで画面が表示されます

このデモは、日本語環境用にコーディングしています(完全ではありませんが)
イベントの確認、追加、削除など操作できますので、操作してみてください。(保存すると、他の方にも情報が公開されますので、汎用的な情報で編集してください)
webixライブラリにはロケール管理機能が実装されていることやそのロケールに応じて、表示するキーワードを辞書変換して表示する機能があります。
言語をスイッチすれば、同じ画面で多言語対応もできます。(自分で入力したイベント情報は、自動的に言語変換されませんのでご注意を)
イベント情報はマウス操作(ドラッグ操作も含め)などで、移動、コピー、編集など簡単にできます。(画面側に限る説明ですが)
画面で編集操作を実行すると、その変更操作がイベントとなり、サーバサイドに変更・追加・削除・検索などのリクエストがリアルタイムに送信されます。サーバサイドは、そのイベント単位に情報をDBに反映させる機能の実装が必要です。
webixのマニュアルにはサーバ側の実装についても記述があります。
NodeJsやGo言語での記載です

私は、サーバ側をPHP言語で実装しているので、PHP言語での実装について、次回以降に説明します。
スマホなどで使いたい場合は、インターネット上にWebサーバを実装する必要性も高く、サーバサイドで使える言語も考慮するとPHP言語でも実装がいいかと思います。(今後の記事では、レンタルサーバ上でPHP言語で実装した例を紹介します)
尚、本ライブラリは、webixの商用ライセンスの購入が必要で、購入後は、毎年の支払いが発生します(翌年以降は、ディスカウントできるメールが届きますが)
購入金額は、いろいろな選択方法がありますが、一番安価な組み合わせは、スケジューラだけを追加し構成(開発メンバーは2名以下)です。
$798/初回年となっています。
実際には、Pro版で追加できる114コンポーネントも同時選択が妥当で
その場合は$963/初回年(29%ディスカウントあり)となります。
購入操作をすると、専用のアカウントとライブラリをダウンロードできるサイトURLがメールされますので、ライブラリをダウンロードして、開発環境に設定します。


スケジューラの応用は、イベント管理以外に、作業日報の閲覧や予約システムなども可能です。