質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.95%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,306

score 74

下記の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" }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • leoairen

    2016/06/29 15:32

    $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

    2016/06/29 15:34

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

    キャンセル

  • leoairen

    2016/06/29 16:25

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

    キャンセル

回答 3

checkベストアンサー

+3

色を直接変えるのではなく、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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/01 10:46 編集

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

    キャンセル

  • 2016/07/01 10:57

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



    キャンセル

  • 2016/07/01 11:14

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

    キャンセル

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/29 17:12

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

    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的に書き加えるでしょうか。

    キャンセル

  • 2016/06/30 08:31

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

    キャンセル

  • 2016/07/01 10:42

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

    キャンセル

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/29 15:30

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

    キャンセル

  • 2016/06/29 15:40

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

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

    キャンセル

  • 2016/07/01 10:42

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.95%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る