dhtmlx/scheduler

縦軸がユーザで、横軸にスケジュール、時間軸がある表が作れます。
ただし有償品です 30日間のPRO Edition版トライアルで試せます
(弊サイトでは有償品[Commercial License]にてテストを行ってます)

ここでは部屋予約を想定して作ってみる
2017y05m09d_122238688.png
研究室なら機器予約とかに使えるかも
左側にカレンダーを用意して、一週間の予約とかもできそう
2017y05m09d_230339439.png

データベース作成

テーブルが2つ必要。平たく言えば縦軸用よ横軸用。
まず縦軸用としてお部屋情報を収めるテーブルを作成。ついでにデータも登録してみる

MariaDB [schedulerDB]> CREATE TABLE rooms (
   room_id   int(11) NOT NULL AUTO_INCREMENT,
   name      varchar(255) NOT NULL,
   PRIMARY KEY (room_id)
);
 
MariaDB [schedulerDB]> INSERT INTO rooms (NAME) VALUES ('2901会議室'),('2902会議室(小)'),('2902会議室(大)');

次に、予約情報を収めるテーブルを作成

MariaDB [schedulerDB]> CREATE TABLE reserve (
   id          int(11) NOT NULL AUTO_INCREMENT,
   start_date  datetime NOT NULL,
   end_date    datetime NOT NULL,
   text        varchar(255) NOT NULL,
   room_id     int(11) NOT NULL,
   PRIMARY KEY (id)
);
MariaDB [schedulerDB]>

そして権限も付与する。参照dhtmlx/scheduler

  1
  2
GRANT SELECT,INSERT,UPDATE,DELETE,INDEX,ALTER ON schedulerDB.rooms TO scheduler@localhost IDENTIFIED BY 'scheduler';
GRANT SELECT,INSERT,UPDATE,DELETE,INDEX,ALTER ON schedulerDB.reserve TO scheduler@localhost IDENTIFIED BY 'scheduler';

phpロジック

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
<?php
include('./codebase/connector/scheduler_connector.php');
 
$res=mysql_connect("localhost","scheduler","scheduler");
mysql_select_db("schedulerDB");
mysql_set_charset('utf8');       // 手動で入れた日本語お部屋名が文字化けするのを防ぐ
 
$list = new OptionsConnector($res);
$list->render_table("rooms","room_id","room_id(value),name(label)");
 
$scheduler = new schedulerConnector($res);
$scheduler->set_options("rooms", $list);
$scheduler->render_table("reserve","id","start_date,end_date,text,room_id");
?>

index.html

dhtmlxscheduler_timeline.js」が必須で、これが有償版には含まれる

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
<!doctype html>
<head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Bar mode</title>
</head>
        <script src='codebase/dhtmlxscheduler.js'              type="text/javascript" charset="utf-8"></script>
        <script src='codebase/ext/dhtmlxscheduler_timeline.js' type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css" charset="utf-8">
        <script src="codebase/locale/locale_jp.js"             type="text/javascript" charset="utf-8"></script>
<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.locale.labels.timeline_tab = ;
                scheduler.config.default_date = "%Y.%m.%d";
                scheduler.config.day_date = ;
 
                scheduler.createTimelineView({
                        name:   "timeline",
                        x_unit: "minute",
                        x_date: "%H:%i",
                        x_step: 60,
                        x_size: 10,
                        x_start: 8,
                        x_length: 48,
                        y_unit: scheduler.serverList("rooms"),
                        y_property: "room_id",
                        render: "bar"
                });
 
                scheduler.init('scheduler_here',new Date(),"timeline");
                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="timeline_tab" style="right:280px;"></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>

トップ   編集 添付 複製 名前変更     ヘルプ   最終更新のRSS
Last-modified: 2017-05-09 (火) 23:04:10 (16d)