予定表の作成（グラフ？）

上記はExcelで作成している、○○さんの一週間の訪問予定表の一部です。

画像だけでいくと、例えば○○さんの２８日（日）の9:00～10:00に××会社に訪問予定！というのがあるとして、
9:00の枠の中をまぁ、何色でも良いんですが、色で塗りつぶして9:00～10:00 ××会社というような感じで表示させるようになっていますというか、入力しています。（画像は何もしてない状態）

これを、HTML、PHP、MySQLなどを使ってやってみたいのですが、、、
データの登録や、基本的な抽出に関しては一応大丈夫なんですけど、こういう表を作るとなると、、、

※一般的というのも難しいかもしれませんが、<table>で作成していけば良いんですかね？

※次に、表は作成できたとして、その登録された時間の範囲を色で表示させるという方法を探しています。
テーブルに色をつける事自体はできるのですが、時間を引っ張ってきて、その値に対して色を変えるという部分が未知です。

まだ、漠然としてしまっているので、質問もどこまで、、、というのも自分で掴めていないのですが、、、
とりあえず※の部分を質問いたします。

また、※をするまでにはこれが必要などがありましたらアドバイスいただけますか？

参考のサイトでも良いので教えてください。
検索の仕方というかキーワードがイマイチピタッと合わなくて、検索しても、ぴんと来るものが無いので、、、

行動規範の内容に同意します

回答3件

fullcalendar.jsを使うという手もありまっせ。

投稿2016/03/15 00:24

tkturbo

総合スコア5572

Z-TALBO

2016/03/15 03:18

こういうものもあるのですね。。。参考にさせていただきます！

行動規範の内容に同意します

システム全体の構成が漠然としすぎるような気がします。

INからOUT側に順に簡易な設計をすると以下の感じでしょうか…

Excelファイル:インプットデータ
Excel-VBAプログラム:インプットデータ読み取り～DBサーバーへのデータ送信マクロ
データベースサーバー:MySQLなど
Web出力:DBからデータ抽出、HTMLフォーマットでユーザーリクエストに応答するPHPプログラム

※一般的というのも難しいかもしれませんが、<table>で作成していけば良いんですかね？

HTMLで表を表現するのに<table>タグを利用するとして、
その様な表示内容を自動でPHPで生成するか、
フォーマットHTMLを定義して、値部分だけ置換して出力することになります。

※次に、表は作成できたとして、その登録された時間の範囲を色で表示させるという方法を探しています。

テーブルに色をつける事自体はできるのですが、時間を引っ張ってきて、その値に対して色を変えるという部分が未知です。

PHPは明るくないのですが、
DBに格納されたデータから、From時間とTo時間の項目を持ってきて、
その範囲に該当する場合は色を設定するのが一般的ではないでしょうか？

以上、
ご参考になりますでしょうか？

投稿2016/03/14 13:42

Aeona

総合スコア396

Z-TALBO

2016/03/14 23:16

すみません、、、漠然としすぎていました。設計に関しても、、、Excelからデータをとかではなく、、、どちらかというと、Web出力の部分だけのプログラムでやっていきたいのです。例の画像は確かにExcelで作成したもので既にあるものなので、そこから引っ張ったりすればという形が良いんでしょうが、、、今回の作り方はWebのみで行きたいと思っています。

行動規範の内容に同意します

ベストアンサー

寝酒飲みながらちょろっと書こうと思ったらわりと大変だった… 時間軸が縦なのが難易度高くしてる。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table {
                border-top: solid 1px #999;
                border-left: solid 1px #999;
                border-collapse: collapse;
            }
            table tr {
                height: 20px;
                border-bottom: dotted 1px #999;
            }
            table tr:nth-child(4n) {
                border-bottom: solid 1px #999;
            }
            table tr td {
                border-right: solid 1px #999;
                width: 100px;
            } 
            .green {
                background-color: #66ff66;
            }
        </style>
    </head>
    <body>
        <?php

            function getQuarter($val){
                $vals = explode(":", $val);
                return ((int)$vals[0] * 4) + (int)($vals[1] / 15);
            }
        
            $schedule = array(
                array("03:15", "04:45", "A不動産"),
                array("07:30", "09:45", "B不動尊")
                );
        
            $matrix = array();
            $sc_name = array();
            $x = 0;
            foreach($schedule as $s){
                $before = 0;
                for($y = 0; $y<48; $y++){
                    $status = (getQuarter($s[0]) <= $y && $y < getQuarter($s[1]))? 1 : 0;
                    $matrix[$x][$y] = $status;
                    $sc_name[$x][$y] = ($status === 1 && $before === 0)? $s[2] : "";
                    $before = $status;
                }
                $x++;
            }
            
            echo "<table>";
            for($y = 0; $y<48; $y++){
                echo "<tr>";
                if($y % 4 === 0){
                    echo "<td>" . sprintf("%02d", floor($y / 4)) .":00</td>";
                } else {
                    echo "<td></td>";
                }
                for($x = 0; $x < 2; $x++){
                    if($matrix[$x][$y] === 1){
                        echo "<td class='green'>{$sc_name[$x][$y]}</td>";
                    } else {
                        echo "<td></td>";
                    }
                }
                echo "</tr>";
            }
            echo "</table>";
        ?>        
    </body>
</html>