織田のカレンダーをつくりたい～導入～

2017年5月17日

ふと、想像欲求が・・・

なんとなく作りたくなってきました。わからない。
某ページのやつをみて「だっさ－」って思ってたからでしょう。
自然発生的なサムシング？

で、どう作る？

PHPでゴリゴリかいてデータベースから引っ張ってきて、まぁCSSできれいに！！
これじゃちょっとつまらないのであえて遠回りしてみます。
とりあえず、FullCalendar使ってみる。

この瞬間、JSがベースになることが確定しました。僕はJSほとんど知りません。
頑張ろう。

作るものは・・

某代々木公園の陸上競技場の開放状況表。
この開放状況表は逐一掲示板の写真撮っていつもデータベースの更新を勝手に行ってました(経験談)。
当時は、糞すぎてイライラしてました。。なんてこったよって。

とりあえず、こいつをアップグレードしたいと思います。
とはいえ、閲覧者サイドだとどうしてもきれいにするくらいしか浮かばないけども、、、

何を実装すればいいのか？

目標：きれいにする。更新の手間を省きたい。
手段：遠回りに行って知見を得る

で、どうしよかと。。。。

FullCalendar標準で表示されるカレンダーにオプションをつけたり書いたりする。
- 標準とやらを調べようと思う。
- ベースを作る
イベントデータはMysqlにある
- サーバに問い合あせて取得しような
- PDO
  - 前はPDO使わなかったからPDOつかおう
土日CSS
- 標準は空っぽだからCSSいじればいいのかな
表のpadding
- 何が悪さしているのかわからんけど無駄な余白は消そう
祝日
- 祝日を反映したい
管理者しかいじらない
- ユーザには表示させるだけ。表示方法に工夫が欲しい

Fullcalendarには沢山のオプションがありますね。ドキュメントを参考にするのもいいけど、サンプルも見てみると参考になるよ。多すぎて困る。英語読めばわかる。簡単な方

ちなみに、サンプルとか他のサイト見てfullcalendarのjqueryソース群の配置とCSSソースの配置をぱくりました。

開放形態が午前・午後・夜なので、それぞれをイベントとして見立てて、貸切・開放などと表示できれば完璧です。このデータはmysqlにあります。なので、PHPにおまかせして拾ってきてもらいます。この時event:でも拾えるようですが、eventsource:の方が指定できるのでいいか

仕事屋のphpはpdoで繋いでデータを持ってきます。pdoふーんって感じ。

土日は.fc-sun等と曜日でクラス割当があったので、無理やり色を変えます。表もfc-event-containerが割当てあったので、0にします。!important

ここまででまぁまぁ時間切れだった。。。

なんといっても、PHPは完全にバックでうごいているから何しているかわからない。どうすればわかるんだ！！！！デバックしようにも難易度が高かった。。。500エラーだけじゃわからんぞ

ちなみに次は外部から引っ張ってくるクロスサイトスクリプト(XSS)なので若干手間がいるんごね。ちょっとゆっくり理解したいから保留な。

はい、コード。いろんなサイトのコードを切り貼りした。一応動く。まだまだ途中。

<?php
function add_scripts() {
wp_enqueue_style(  'fullcalendar_css',		get_bloginfo('template_url') . '/css/fullcalendar.min.css', array(), '170514');
wp_enqueue_script( 'fullcalendar_moment',	get_template_directory_uri() . '/js/moment.min.js', array( 'jquery' ), '170514', true );
wp_enqueue_script( 'fullcalendar_jquery_ui','http://code.jquery.com/jquery-1.11.0.min.js', array( 'jquery' ), '170514', true );
wp_enqueue_script( 'fullcalendar',			get_template_directory_uri() . '/js/fullcalendar.min.js', array( 'jquery' ), '170514', true );
wp_enqueue_script( 'fullcalendar_jquery_ui',get_template_directory_uri() . '/js/jquery-ui.min.js', array( 'jquery' ), '170514', true );
wp_enqueue_script( 'fullcalendar_ja',		get_template_directory_uri() . '/js/ja.js', array( 'jquery' ), '170514', true );
wp_enqueue_script( 'fullcalendar_option',	get_template_directory_uri() . '/js/calendar.js', array( 'jquery' ), '170514', true );
}
add_action('wp_enqueue_scripts', 'add_scripts');

<?php

function add_scripts() {

wp_enqueue_style( 'fullcalendar_css', get_bloginfo('template_url') . '/css/fullcalendar.min.css', array(), '170514');

wp_enqueue_script( 'fullcalendar_moment', get_template_directory_uri() . '/js/moment.min.js', array( 'jquery' ), '170514', true );

wp_enqueue_script( 'fullcalendar_jquery_ui','http://code.jquery.com/jquery-1.11.0.min.js', array( 'jquery' ), '170514', true );

wp_enqueue_script( 'fullcalendar', get_template_directory_uri() . '/js/fullcalendar.min.js', array( 'jquery' ), '170514', true );

wp_enqueue_script( 'fullcalendar_jquery_ui',get_template_directory_uri() . '/js/jquery-ui.min.js', array( 'jquery' ), '170514', true );

wp_enqueue_script( 'fullcalendar_ja', get_template_directory_uri() . '/js/ja.js', array( 'jquery' ), '170514', true );

wp_enqueue_script( 'fullcalendar_option', get_template_directory_uri() . '/js/calendar.js', array( 'jquery' ), '170514', true );

}

add_action('wp_enqueue_scripts', 'add_scripts');

<?php

  if (!isset($_POST['flg']) || $_POST['flg'] != 1) {
      die("error");
  }

  $request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ? strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : '';   //直接のページ遷移を阻止
  if($request !== 'xmlhttprequest') exit; //XHL: サーバから受信済みの web ページから、さらにサーバへ通信リクエストを送ることができるようになる.
  try {
    $dsn = 'mysql:host=mysql109.phy.lolipop.lan;dbname=LAA0623444-rikudo;charset=utf8';
    $user = 'LAA0623444';
    $pass = 'JHCB6sK7X';
    $pdo = new PDO($dsn, $user, $pass, array(PDO::ATTR_EMULATE_PREPARES => false));
  }
  catch (Exception $e) {
    exit('データベース接続失敗'.$e->getMessage());
  }
  //$sql = 'SELECT * FROM wp3_oda WHERE date BETWEEN "2017-05-01" AND "2017-05-30" ';  //SQL文生成：バインドなしで生成。
  $stmt=$pdo->prepare( 'SELECT * FROM wp3_oda WHERE date BETWEEN :startdate AND :enddate ' );  //SQL文生成：バインド込みで生成。prepareは変数入り文章の作成
  $stmt->bindValue(':startdate', $_POST['start'], PDO::PARAM_INT);//入れていく
  $stmt->bindValue(':enddate',  $_POST['end'],PDO::PARAM_INT);
  $stmt->execute();//実行

  $data_list = array();//json仕様に配列を生成
  while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $data_list[]=array(
    'title'=>$row['date'],
    'start'=>$row['date'],
    'end'=>$row['date'],
    );
  }
  
  /* test data */
  $data_list[] = array(
    'title' => 'test',
    'start' => '2017-05-20',
    'end' => '2017-05-28'
  );
  header('Content-type: application/json');   //jsonとして出力するよ
  echo json_encode($data_list); //jsonにエンコード
  exit();
  ?>

<?php

if (!isset($_POST['flg']) || $_POST['flg'] != 1) {

die("error");

}

$request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ? strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : ''; //直接のページ遷移を阻止

if($request !== 'xmlhttprequest') exit; //XHL: サーバから受信済みの web ページから、さらにサーバへ通信リクエストを送ることができるようになる.

try {

$dsn = 'mysql:host=mysql109.phy.lolipop.lan;dbname=LAA0623444-rikudo;charset=utf8';

$user = 'LAA0623444';

$pass = 'JHCB6sK7X';

$pdo = new PDO($dsn, $user, $pass, array(PDO::ATTR_EMULATE_PREPARES => false));

}

catch (Exception $e) {

exit('データベース接続失敗'.$e->getMessage());

}

//$sql = 'SELECT * FROM wp3_oda WHERE date BETWEEN "2017-05-01" AND "2017-05-30" '; //SQL文生成：バインドなしで生成。

$stmt=$pdo->prepare( 'SELECT * FROM wp3_oda WHERE date BETWEEN :startdate AND :enddate ' ); //SQL文生成：バインド込みで生成。prepareは変数入り文章の作成

$stmt->bindValue(':startdate', $_POST['start'], PDO::PARAM_INT);//入れていく

$stmt->bindValue(':enddate', $_POST['end'],PDO::PARAM_INT);

$stmt->execute();//実行

$data_list = array();//json仕様に配列を生成

while($row = $stmt->fetch(PDO::FETCH_ASSOC)){

$data_list[]=array(

'title'=>$row['date'],

'start'=>$row['date'],

'end'=>$row['date'],

);

}

/* test data */

$data_list[] = array(

'title' => 'test',

'start' => '2017-05-20',

'end' => '2017-05-28'

);

header('Content-type: application/json'); //jsonとして出力するよ

echo json_encode($data_list); //jsonにエンコード

exit();

$('#calendar').fullCalendar({

	//ヘッダーの設定
	header : { 
		//それぞれの位置に設置するボタンやタイトルをスペース区切りで指定できます。指定しない場合、非表示にできます。
		// 'title'→月・週・日のそれぞれの表示に応じたタイトル
		// 'prev'→前へボタン
		// 'next'→次へボタン
		// 'today'→当日表示ボタン
		left: 'prev today next', //左側に配置する要素
		center: 'title', //中央に配置する要素
		right: 'month,agendaWeek,' //右側に配置する要素 
		// agendaDay : 全日表示
	},

	height: 800, //高さをピクセルで指定
	defaultView: 'month', //初めの表示内容を指定　内容はこちらを参照→ http://fullcalendar.io/docs/views/Available_Views/
	aditable: true, //trueでスケジュールを編集可能にする
	allDaySlot: true,　//falseでagendaDay表示のときに全日の予定欄を非表示にする
	
	//時間の表示フォーマットを指定する　指定方法はこちらを参照→http://momentjs.com/docs/#/displaying/format/
	timeFormat: {
		agenda: 'H:mm'
	},
	slotEventOverlap: false, //スケジュールが重なったとき、重ねて表示するかどうか（falseにすると、重ねずに表示する）
	axisFormat: 'H:mm', //時間軸に表示する時間の表示フォーマットを指定する(ヒョジ方法はtimeFormatと同じ)
	slotDuration: '01:00:00', //表示する時間軸の細かさ
	snapDuration: '01:00:00', //スケジュールをスナップするときの動かせる細かさ
	minTime: "09:00:00", //スケジュールの開始時間
	maxTime: "21:00:00", //スケジュールの最終時間
	defaultTimedEventDuration: '01:00:00', //画面上に表示する初めの時間(スクロールされている場所)

	eventSources: [{
		url: '/tanico/wp-content/themes/wpthk/js/data_getter.php',
		dataType: 'json',
		async: false,
		type: 'POST',
		data: {
		    flg: 1
		},
		error: function () {
		}
	}],
	/*
    events: {
        url:"http://www.google.com/calendar/feeds/ja.japanese%23holiday%40group.v.calendar.google.com/public/full/",
        success:function(events){
            $(events).each(function(){
                    this.url = null;
            });     
        },
    },
	*/
	eventClick: function(event) { //イベントをクリックしたときに実行
		//たぶん実装しない。しても表示内容を映す
	},

	dayClick: function(date){ //イベントじゃないところをクリックしたとき(日をクリックしたとき)に実行
		var title = prompt('予定を入力してね!!');
		$('#calendar').fullCalendar('addEventSource', [{
			id:date,
			title: title,
			start: date,
			end: date
			}]);
	},

	droppable: true, //外部要素からのドラッグアンドドロップを可にする
	drop: function(date){ //外部要素からドラッグアンドドロップしたときに実行
		//たぶん実装しない
	},

	eventDragStop: { //カレンダー上にドラッグし終わったときに実行
		//たぶん実装しない
	}



});

$('#calendar').fullCalendar({

//ヘッダーの設定

header : {

//それぞれの位置に設置するボタンやタイトルをスペース区切りで指定できます。指定しない場合、非表示にできます。

// 'title'→月・週・日のそれぞれの表示に応じたタイトル

// 'prev'→前へボタン

// 'next'→次へボタン

// 'today'→当日表示ボタン

left: 'prev today next', //左側に配置する要素

center: 'title', //中央に配置する要素

right: 'month,agendaWeek,' //右側に配置する要素

// agendaDay : 全日表示

height: 800, //高さをピクセルで指定

defaultView: 'month', //初めの表示内容を指定　内容はこちらを参照→ http://fullcalendar.io/docs/views/Available_Views/

aditable: true, //trueでスケジュールを編集可能にする

allDaySlot: true,　//falseでagendaDay表示のときに全日の予定欄を非表示にする

//時間の表示フォーマットを指定する　指定方法はこちらを参照→http://momentjs.com/docs/#/displaying/format/

timeFormat: {

agenda: 'H:mm'

slotEventOverlap: false, //スケジュールが重なったとき、重ねて表示するかどうか（falseにすると、重ねずに表示する）

axisFormat: 'H:mm', //時間軸に表示する時間の表示フォーマットを指定する(ヒョジ方法はtimeFormatと同じ)

slotDuration: '01:00:00', //表示する時間軸の細かさ

snapDuration: '01:00:00', //スケジュールをスナップするときの動かせる細かさ

minTime: "09:00:00", //スケジュールの開始時間

maxTime: "21:00:00", //スケジュールの最終時間

defaultTimedEventDuration: '01:00:00', //画面上に表示する初めの時間(スクロールされている場所)

eventSources: [{

url: '/tanico/wp-content/themes/wpthk/js/data_getter.php',

dataType: 'json',

async: false,

type: 'POST',

data: {

flg: 1

error: function () {

}

}],

events: {

url:"http://www.google.com/calendar/feeds/ja.japanese%23holiday%40group.v.calendar.google.com/public/full/",

success:function(events){

$(events).each(function(){

this.url = null;

});

eventClick: function(event) { //イベントをクリックしたときに実行

//たぶん実装しない。しても表示内容を映す

dayClick: function(date){ //イベントじゃないところをクリックしたとき(日をクリックしたとき)に実行

var title = prompt('予定を入力してね!!');

$('#calendar').fullCalendar('addEventSource', [{

id:date,

title: title,

start: date,

end: date

}]);

droppable: true, //外部要素からのドラッグアンドドロップを可にする

drop: function(date){ //外部要素からドラッグアンドドロップしたときに実行

//たぶん実装しない

eventDragStop: { //カレンダー上にドラッグし終わったときに実行

//たぶん実装しない

}

});

fullcalendar

Posted by tanico.rikudo

jupyterを使った。それだけ１。

とりあえずディープに行く～Chainer導入～