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

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

ただいまの
回答率

90.46%

  • JavaScript

    21072questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8389questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS3

    2709questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

javascriptでカレンダーのカスタマイズ

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 1,867

YuichiKataoka

score 206

カレンダーの表示を以下のスクリプトと他cssコードで表示しています。
これだと、正常にカレンダーは表示されますが、特定の日時にハイライトや、見た目の装飾がこのままだと出来ません。

例えば、休業日となる
年末年始の12月30日から1月3日の間は赤字に設定したい場合、どの様にいじれば良いでしょうか?

jQueryでそんな便利な物もあるかもしれませんが、javascriptの勉強も兼ねて知りたいので、知識をお持ちでお付き合い頂ける方、教えて下さい。

よろしくお願い致します。

<script src="../js/calendar.js"></script>
/*======================
日付の取得
======================*/
var Years = new Date();
var Toshi = Years.getFullYear();
var Tsuki = Years.getMonth() + 1;
var dayLoad = Years.getDate();
/*======================
Calendar
======================*/
myWeekTbl = new Array("日","月","火","水","木","金","土");
myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31);

if (((Toshi%4)==0 && (Toshi%100)!=0) || (Toshi%400)==0){
  myMonthTbl[1] = 29;
}
myMonth = Years.getMonth();
dayLoad = Years.getDate();
Years.setDate(1);
myWeek = Years.getDay();
myTblLine = Math.ceil((myWeek+myMonthTbl[myMonth])/7);
myTable = new Array(7*myTblLine);
  for(i=0; i<7*myTblLine; i++) myTable[i]=" ";
  for(i=0; i<myMonthTbl[myMonth]; i++)myTable[i+myWeek]=i+1;

function loadCalendar() {
  document.write("<div class='loadCalendarWrapper'><table border='1' class='loadCalendarTable'>");
  document.write("<tr><td colspan='7' bgcolor='#2a2e3e'>");
  document.write("<span class='loadCalendarTitle'>", (myMonth+1),"月"+"営業日カレンダー</span>");
  document.write("</td></tr>");
  document.write("<tr>");
    for(i=0; i<7; i++){
      document.write("<td align='center' ");
        if(i==0)document.write("bgcolor='#fa8072'>");
        else document.write("bgcolor='#f3f3f3'>");
      document.write("<strong>",myWeekTbl[i],"</strong>");
      document.write("</td>");
    }
  document.write("</tr>");
    for(i=0; i<myTblLine; i++){
      document.write("<tr>");
        for(j=0; j<7; j++){
          document.write("<td align='center' ");
          myDat = myTable[j+(i*7)];
          if (myDat==dayLoad)document.write("style='color:#fff;' bgcolor='#007cf9'");
          else if(j==0) document.write("bgcolor='#FF33CC'>");
          else document.write("bgcolor='#fff'>");
          document.write("<strong>",myDat,"</strong>");
          document.write("</td>");
        }
      document.write("</tr>");
    }
  document.write("</table><div class='hosoku'><span class='HolidayMark'>■</span>は休業日です</div></div>");
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

+1

if (myDat==dayLoad)document.write("style='color:#fff;' bgcolor='#007cf9'");


このコードでは、カレンダーを参照した日付に色を付けているように思いますが、
これと同じように12/30~1/3のどれかの日にヒットした際も変化をつけるようなコードを書けば良いのではないでしょうか?

実用性は無かもしれませんが考え方の方向として、とりあえず次のようなコードを上記の下に追加すれば12/30のセルの文字は赤になりそうに思います。

else if(Tsuki == 12 && myDat==30)document.write("style='color:red;'");


実際には特別扱いしたい日をリストで保持しておいて、リスト内の日付のどれかに一致するカレンダー上の日のスタイルを変更するような格好になるかと思います。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

checkベストアンサー

0

大幅に修正してしまいましたが。。。

<html>
<head>
<meta charset="utf-8">
<style>
thead .header {
    background-color: #f3f3f3;
}

thead .header.sunday {
    background-color: #fa8072;
}

tbody .today {
    background-color: #007cf9;
    color: #ffffff;
}

tbody .sunday {
    background-color: #ff33cc;
}

tbody .weekday {
    background-color: #ffffff;
}

tbody .holiday {
    background-color: #ff0000;
    color: #ffffff;
}
</style>
</head>
<body>
<script src="../js/calendar.js"></script>
</body>
</html>
/*======================
日付の取得
======================*/
var Years = new Date();
var Toshi = Years.getFullYear();
var Tsuki = Years.getMonth() + 1;
var dayLoad = Years.getDate();
/*======================
Calendar
======================*/
myWeekTbl = new Array('日', '月', '火', '水', '木', '金', '土');
myMonthTbl= new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

if (((Toshi % 4) == 0 && (Toshi % 100) != 0) || (Toshi % 400) == 0) {
    myMonthTbl[1] = 29;
}
myMonth = Years.getMonth();
dayLoad = Years.getDate();
Years.setDate(1);
myWeek = Years.getDay();
myTblLine = Math.ceil((myWeek + myMonthTbl[myMonth]) / 7);
myTable = new Array(7 * myTblLine);
for (i = 0; i < 7 * myTblLine; i++) {
    myTable[i]=" ";
}
for (i = 0; i < myMonthTbl[myMonth]; i++) {
    myTable[i + myWeek] = i + 1;
}

function loadCalendar()
{
    var _class;
    var output = '';

    output += '<div class="loadCalendarWrapper"><table border="1" class="loadCalendarTable">';
    output += '<thead>';
    output += '<tr><td colspan="7" bgcolor="#2a2e3e">';
    output += '<span class="loadCalendarTitle">' + Tsuki + '月' + '営業日カレンダー</span>';
    output += '</td></tr>';
    output += '<tr>';
    for (i = 0; i < 7; i++) {
        _class = 'header';
        if (i == 0) {
            _class += ' sunday';
        }
        output += '<td align="center" class="' + _class + '">';
        output += '<strong>' + myWeekTbl[i] + '</strong>';
        output += '</td>';
    }
    output += '</tr>';
    output += '</thead>';
    output += '<tbody>';
    for (i = 0; i < myTblLine; i++) {
        output += '<tr>';
        for (j = 0; j < 7; j++) {
            myDat = myTable[j + (i * 7)];
            _class = 'weekday';
            if (myDat == dayLoad) {
                _class = 'today';
            } else if (j == 0) {
                _class = 'sunday';
            }
            output += '<td align="center" class="' + _class + '" data-date="' + Toshi + Tsuki + myDat + '">';
            output += '<strong>' + myDat + '</strong>';
            output += '</td>';
        }
        output += '</tr>';
    }
    output += '</tbody>';
    output += '</table><div class="hosoku"><span class="HolidayMark">■</span>は休業日です</div></div>';
    document.write(output);
}

loadCalendar();

/*======================
休業日の背景色を設定
======================*/
function setHoliday(days)
{
    var element;
    for (var i = 0; i < days.length; i++) {
        element = document.querySelector('[data-date="' + days[i] + '"]');
        if (element != null) {
            element.classList.add('holiday');
        }
    }
}

setHoliday([ '20151230', '20151231', '20160101', '20160102', '20160103' ]);

<td> にカスタムデータ属性として「data-date」を設定し、「20151221」というように年月日を設定しています。
setHoliday() には配列で休業日を渡し、上記で設定した「data-date」と同じ値を持つ <td> タグの背景色を変更(実際は class を追加)しています。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/12/22 11:02 編集

    ありがとうございます。
    これでやってみましたが、上記ソースのみでしたら出来たのですが
    現在使っているファイルへ置き換えると、horidayの色だけが付いていません。。。

    function setHoliday()
    自分のファイルへ書く込むと、これが効いていないみたいで。

    キャンセル

  • 2015/12/22 11:27

    function loadCalendar()
    の中に
    function setHoliday()を入れることで解決出来ました。
    助かりました。ありがとうございました。

    キャンセル

0

やっつけだが、例えばこんなのはどうだろうか。
月ごとの休業日を格納した配列(holiday)を作っておき、
書き出す日付がその配列に含まれてるなら(holiday[myMonth].indexOf(myDat) != -1)文字を赤くする。

var Years = new Date();
var Toshi = Years.getFullYear();
var Tsuki = Years.getMonth() + 1;
var dayLoad = Years.getDate();
/*======================
Calendar
======================*/
myWeekTbl = new Array("日","月","火","水","木","金","土");
myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31);

var holiday = [[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[30]]; // <- added

if (((Toshi%4)==0 && (Toshi%100)!=0) || (Toshi%400)==0){
  myMonthTbl[1] = 29;
}



myMonth = Years.getMonth();
dayLoad = Years.getDate();
Years.setDate(1);
myWeek = Years.getDay();
myTblLine = Math.ceil((myWeek+myMonthTbl[myMonth])/7);
myTable = new Array(7*myTblLine);
  for(i=0; i<7*myTblLine; i++) myTable[i]=" ";
  for(i=0; i<myMonthTbl[myMonth]; i++)myTable[i+myWeek]=i+1;

function loadCalendar() {
  document.write("<div class='loadCalendarWrapper'><table border='1' class='loadCalendarTable'>");
  document.write("<tr><td colspan='7' bgcolor='#2a2e3e'>");
  document.write("<span class='loadCalendarTitle'>", (myMonth+1),"月"+"営業日カレンダー</span>");
  document.write("</td></tr>");
  document.write("<tr>");
    for(i=0; i<7; i++){
      document.write("<td align='center' ");
        if(i==0)document.write("bgcolor='#fa8072'>");
        else document.write("bgcolor='#f3f3f3'>");
      document.write("<strong>",myWeekTbl[i],"</strong>");
      document.write("</td>");
    }
  document.write("</tr>");
    for(i=0; i<myTblLine; i++){
      document.write("<tr>");
        for(j=0; j<7; j++){
          document.write("<td align='center' ");
          myDat = myTable[j+(i*7)];
          if(holiday[myMonth].indexOf(myDat) != -1)document.write("style='color:red;' "); // <- added
          if (myDat==dayLoad)document.write("style='color:#fff;' bgcolor='#007cf9'");
          else if(j==0) document.write("bgcolor='#FF33CC'>");
          else document.write("bgcolor='#fff'>");
          document.write("<strong>",myDat,"</strong>");
          document.write("</td>");
        }
      document.write("</tr>");
    }
  document.write("</table><div class='hosoku'><span class='HolidayMark'>■</span>は休業日です</div></div>");
}

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/12/21 23:00 編集

    ほぼ同じタイミングでしたね。。
    余計な事ですみません。この場合、holiday且つ閲覧日のセルで
    <td align='center' style='color:red;' style='color:#fff;' bgcolor='#007cf9'>
    こんな風になったりしませんでしょうか?
    ※仮にそうなっても特に不具合は出ないので問題は無いと思います

    キャンセル

  • 2015/12/21 23:51

    ご意見ありがとうございます。
    きっと、そう(あまり好ましくないマークアップに)なると思います。
    適切なやり方ではないことは承知していますが、それでもひとまず考え方さえ伝えられればいいかなと。
    なにか問題があれば(実際あるのですが…)また質問してもらえればいいかなと思っています。

    キャンセル

  • 2015/12/22 11:29

    回答ありがとうございました。
    今ある物をそのまますぐに使えたので、hyper-drums-ko さんをベストアンサーとさせていただきましたが、アドバイスいただき感謝いたします。
    ありがとうございました。

    キャンセル

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

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

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

  • JavaScript

    21072questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8389questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS3

    2709questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。