カレンダーにある指定日の色を変化させる

Question

下記のURLよりカレンダーをアレンジして作っております。

配布サイト
JSファイル

DBで収納してある休日の配列を下記にのように代入して、該当日であれば色を変化させたいのですが、行き詰まっております。

どなたか教えて頂けますでしょうか・

/* 全解除(元のコード)*/
      $(document).on('click','#'+class_month_off,function(e){
        $(this).parents('table').find('td').css({'background-color': settings.td_off});
        $(this).parents('table').find('td').data("flag","off");
        getDate();
        e.preventDefault();
      });

/*今回追加したコード*/
if(s_yy + s_mm + s_dd == '休日の配列を取得した変数'){
          $(this).css({'background-color': '#F7BFB9'});
          $(this).data("flag","on");
        }

上記の追加コードを下記に修正しました。

					if(ymd == holiday){
						html +='  <td data-flag="on" class="'+class_td+'" id="'+id+'">'+day+'</td>';
					}else{
						html +='  <td data-flag="off" class="'+class_td+'" id="'+id+'">'+day+'</td>';
					}

$holidayという変数で下記のような配列を取得しております。

array(6) { [0]=> string(10) "2016-09-12" [1]=> string(10) "2016-09-14" [2]=> string(10) "2016-09-20" [3]=> string(10) "2016-09-26" [4]=> string(10) "2016-09-28" }

Comments

[kei344]

URLはjsファイルへの直接リンクだけでなく、配布サイトへのリンクも質問文に追記してください。

[leoairen]

ご指摘、ありがとうございます。付け加えました。

[kei344]

URLはリンクが張れます。また、初心者と本文内に書かずに、初心者マークが設定できるのでそちらを設定されることをお勧めします。

[leoairen]

ご指摘、ありがとうございます。修正しました。

[kei344]

編集ありがとうございます。

[kei344]

何度もすいません、「休日の配列を取得した変数」には文字列が入るのですか？配列であればJavaScriptではそういう書き方が出来ないので、具体的な変数を提示していただけませんか？

[leoairen]

$holidayという変数で配列というのは下記のようになっています。
array(6) { [0]=>
string(10) "2016-09-12"
[1]=>
string(10) "2016-09-14"
[2]=>
string(10) "2016-09-20"
[3]=>
string(10) "2016-09-26"
[4]=>
string(10) "2016-09-28"
}

[kei344]

すいませんが、本文にコードブロックで追記してください。よろしくお願いします。

[leoairen]

ご指摘、ありがとうございます。修正しました。コードも一つ追加いたしました。もしご存知でしたご回答お願いできたら幸いです。よろしくお願いいたします。

Answer 1

色を直接変えるのではなく、CSSクラス（下記例では「holiday」）を付けて、CSSで背景色を指定するのが良いのではないでしょうか。タッチの挙動にも干渉されないため on/off に処理を加える必要が無いと思います。

var holiday = [ '2016-09-12', '2016-09-14', '2016-09-20', '2016-09-26', '2016-09-28' ];
if ( holiday.indexOf( ymd ) !== -1 ) {
	html +='  <td data-flag="off" class="holiday '+class_td+'" id="'+id+'">'+day+'</td>';
} else {
	html +='  <td data-flag="off" class="'+class_td+'" id="'+id+'">'+day+'</td>';
}

.holiday {
	background-color: pink;
}

【Array.prototype.indexOf() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

Comments

[leoairen]

ご回答、ありがとうございます。できました。ご解説も大変わかりやすかったです。マニュアルまで教えて頂き、大変助かりました。もし可能であれば「!== -1」の設定についてまだ理解があいまいなので、教えて頂けたらありがたいです。もしかしたら、「!== -1」にすることで「ある要素の存在をすべて見つける」になるということでしょうか。

[kei344]

> 引数に与えられた内容と同じ内容を持つ配列要素の内、最初のものの添字を返します。存在しない場合は -1 を返します。

holiday.indexOf( ymd ) は配列 holiday の中に ymd がどの位置にあるかを調べていて、1個も無ければ -1 が返ってきます。なので「if ( holiday.indexOf( ymd ) !== -1 )」は「配列 holiday の中に ymd が無かったとき」ということです。

こういうことですか？それとも「!==」自体の意味であれば、下記ページを参照ください。

【式と演算子 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators

[leoairen]

ご丁寧に解説して頂き、ありがとうございます。大変わかりやすかったです。ありがとうございました。

Answer 2

JavaScriptはそれほど詳しくないですが、こうした方がいいのではというアドバイスをしておきます。

まず今回追加したコードが、関数と関数の間にあるので機能していないと思います。
想像では、カレンダー展開の関数内、一週間分ループの中で処理するのが良いと思います。
その際、tdタグを出力している箇所で、class_tdというクラスにスタイルを持っているので、休日用のスタイルを用意して、このクラスを切り替えるようにすればよろしいかと。
また選択解除時に、現状の作りでは固定でtd_offの背景色に変更しているようなので、この場合にも休日判定をして元の背景色にするのか、休日用の背景色にするのかしないといけないと思われます。

Comments

[leoairen]

早速のご回答、ありがとうございます。ループとなると、「 /* * カレンダー展開*/」から始まるところでしょうか。ループの中にどう書けばよいかいき詰まっております。

[ttyp03]

ループはここです。

//一週間分をループ
for(var d=0; d<7; d++){
~
html +=' <td data-flag="off" class="'+class_td+'" id="'+id+'">'+day+'</td>';
}

このtdタグが1日分のマスに相当する所だと思います。

[leoairen]

早速のご回答、ありがとうございます。この場合、Zuishinさんが指摘されたように「全解除」とぶつかりませんでしょうか。また、前回の質問に続いてしまいますが、$holidayに入っている日付の配列をjqueryでどう書けばよいか苦戦しております。

[ttyp03]

最初に回答した通り、解除（全解除）時にも処理を追加しないといけないでしょう。

[leoairen]

下記のコードでできました。

if(ymd == holiday){
html +=' <td style="background-color: rgb(247, 191, 185);" data-flag="off" class="'+class_td+'" id="'+id+'">'+day+'</td>';
}else{
html +=' <td data-flag="off" class="'+class_td+'" id="'+id+'">'+day+'</td>';
}
しかしholidayには変数$holidayを代入しなくてはならず、$holidayは複数日付の配列なので、この場合、jquery側でarray_search的に書き加えるでしょうか。

[ttyp03]

$holidayは以前の質問で登場したPHP側の変数のことですよね？
js用にholidayという名前で変数化されているのでしょうか。
その前提で書くと、PHPのarray_search的なことはkei344さんの回答にあるようなコードで実現できると思います。
また最初の回答にも書きましたし、kei344さんも書いていますが、色の切り替えはクラスを切り替える感じで実装した方が良いと思います。

[leoairen]

ご回答、ありがとうございます。kei344さんの方法でできました。ありがとうございました。

Answer 3

リンク先を読んでいないんですが、とりあえず css を適用するオブジェクトが元のコードと追加したコードで違ってるんですけど、これは問題ないんですか？

/* 元のコード*/
        $(this).parents('table').find('td').css({'background-color': settings.td_off});

/*今回追加したコード*/
          $(this).css({'background-color': '#F7BFB9'});

Comments

[leoairen]

[全解除]のためのコードなので、tdタグのものが全部対象となりますが、今回は指定日だけですので、異なる書き方になるのではと思います。

[Zuishin]

全解除というのは削除したということではなくて色を元に戻すということだったんですね？

追加したコードはどこに追加したんですか？
全解除の中に入れないと起動時に一回だけ実行されて全解除によって消される運命だと思いますが。

[leoairen]

早速のご回答、ありがとうございます。全解除のすぐ下に書きました。全解除の中に書く場合はどのように書けばよろしいでしょうか。

[Zuishin]

全選択もありますね。
全選択と全解除で背景の色を変えていますから、ここで塗りつぶされてしまいます。
preventDefault の前に入れてみてください。

$(this) はクリックされた要素を表しますので、やはり $(this).parents('table').find('td').css ではないかと思いますが、この辺いかがでしょう？

[leoairen]

ご回答、ありがとうございます。kei344さんの方法でできました。ありがとうございました。