dhtmlx/scheduler

dhtmlx。すばらしいwebアプリライブラリ
その中にスケジュールアプリを簡便により高品位で作れるライブラリがある。それが「Scheduler」
jQuery/wdCalendarと同じようなスケジューラ。ただdhtmlxの他のComponentsと連携できるのでより高度なアプリにするならこちらかなと

ここでは簡単にスケジューラを作ってみた。

調整dhtmlx/scheduler/memo
Timeline表示dhtmlx/scheduler/TimelineView

mysql†

まずはスケジューラが使用するデータベースを用意します。
基本はmysqlですが、postgresqlでもPDO形式でもいけそう

[root@c ~]# mysql -u root -p -s -b
Enter password:
MariaDB [(none)]> CREATE DATABASE schedulerDB DEFAULT CHARACTER SET utf8;
 
MariaDB [(none)]> use schedulerDB
 
MariaDB [schedulerDB]> CREATE TABLE events (
  id          int(11) NOT NULL AUTO_INCREMENT,
  start_date  datetime NOT NULL,
  end_date    datetime NOT NULL,
  text        varchar(255) NOT NULL,
  PRIMARY KEY (id)
);
 
MariaDB [schedulerDB]> show tables;
Tables_in_schedulerDB
events

mysqlコマンドの「-s」は余分な出力を抑え、「-b」ビープ音を停止を意味する
次に、ユーザ作成

MariaDB [schedulerDB]> GRANT SELECT,INSERT,UPDATE,DELETE,INDEX,ALTER ON schedulerDB.events 
 TO scheduler@localhost IDENTIFIED BY 'scheduler';
 
MariaDB [schedulerDB]> \q

↑

dhtmlx「Scheduler」ライブラリ†

dhtmlxの「Scheduler」ライブラリをダウンロードします。
https://dhtmlx.com/docs/products/dhtmlxScheduler/download.shtml
Standard Editionをダウンロードします

170506で得たファイル名は「dhtmlxScheduler_v4.4.0.zip」である。このファイルを展開すると一階層は下記のようになる

 dhtmlxScheduler_v4.4.0.zip
     |
     + ./codebase/
     + ./samples/
     + ./license.txt
     + ./readme.txt
     + ./whatsnew.txt

実際、ライブラリとして使用するのは「./codebase/」フォルダのみ

↑

簡単なスケジューラ†

apache httpdが既に稼動していているのなら「/var/www/Scheduler」を掘って、ここにコンテンツ、ライブラリを載せる
コンテンツといっても、「index.html」とデータベース接続のロジックとなる「events.php」の２ファイルだけ

まずはapache httpdの設定から

[root@c ~]# vi /etc/httpd/conf.d/Scheduler.conf
Alias /Scheduler /var/www/Scheduler
<Directory "/var/www/Scheduler">
  Options All
  AllowOverride All
  Require ip 192.168.0.0/24
</Directory>

とする。
*初回は外部非公開で。次回以降はパスワード認証なり掛けるか、制限を外して研究所、学科全体に開放するのが宜しいかと

次にコンテンツ。
展開したdhtmlx「Scheduler」ライブラリの「codebase」を「/var/www/Scheduler」に配置させる

   /var/www/Scheduler
               + ./codebase/

そして、「index.htmlを用意する

[root@c ~]# cat /var/www/Scheduler/index.html
<!doctype html>
<head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Basic initialization</title>
</head>
        <script src="codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css" charset="utf-8">
<style type="text/css" >
        html, body{
                margin:0px;
                padding:0px;
                height:100%;
                overflow:hidden;
        }
</style>
<script type="text/javascript" charset="utf-8">
        function init() {
                scheduler.config.xml_date="%Y-%m-%d %H:%i";
                scheduler.init('scheduler_here',new Date(),"month");
                scheduler.load("events.php");
                var dp = new dataProcessor("events.php");
                dp.init(scheduler);
        }
</script>
 
<body onload="init();">
        <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
                <div class="dhx_cal_navline">
                        <div class="dhx_cal_prev_button">&nbsp;</div>
                        <div class="dhx_cal_next_button">&nbsp;</div>
                        <div class="dhx_cal_today_button"></div>
                        <div class="dhx_cal_date"></div>
                        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
                        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
                        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
                </div>
                <div class="dhx_cal_header">
                </div>
                <div class="dhx_cal_data">
                </div>
        </div>
</body>
[root@c ~]#

次にデータベース接続のロジックとなる「events.php」

[root@c ~]# cat /var/www/Scheduler/events.php
<?php
include ('./codebase/connector/scheduler_connector.php');
$res=mysql_connect("localhost","scheduler","scheduler");
mysql_select_db("schedulerDB");
$calendar = new SchedulerConnector($res);
$calendar->render_table("events","id","start_date,end_date,text");
?>
[root@c ~]#

php7では「mysql_connect」の関数が使えないのでpdoで接続させます。
その際の「events.php」は下記にします

<?php
require ('./codebase/connector/scheduler_connector.php');
require("./codebase/connector/db_pdo.php");
$res=new PDO('mysql:host=localhost;dbname=schedulerDB', 'scheduler', 'scheduler');
$calendar = new SchedulerConnector($res,"pdo");
$calendar->render_table("events","id","start_date,end_date,text");
?>

最後にapache httpdをreloadすれば完了で

というような感じで表示される