はじめまして。
現在、以下の記事を参考にしてカレンダーを作っているのですが、
JSONから取り出した情報(日付)の日のみ色を変える機能を実装しようと考えており、コードを変更したものの色が全く変わりません。
自分なりに考えてみたところ、関数内で関数を実行することが原因だと考えているのですが、具体的にどう対処すればいのかわかりません。
何かお分かりの方は是非ともご教授のほどよろしくお願いします。
http://www.allinthemind.biz/markup/javascript/calendar.html
html
1<div id="calendar"></div> //カレンダーの表示部分 2<p><a href="#" id="month_prev_ajax">前月へ</a>/ <a href="#" id="month_next_ajax">次月へ</a></p> //月の移動ボタン
javascript
1<script type="text/javascript"> 2// 取得したい年・月設定 3var y,m; 4var p = location.search; 5 6 y = new Date().getFullYear(); 7 m = new Date().getMonth()+1; 8 9function calendar(y,m){ 10 11 // 初期設定 12 var feb_date = (y%4 == 0 && y%100 != 0)?29:28; 13 if(y%400 == 0){feb_date = 29}; 14 var month_count = {1:31,2:feb_date,3:31,4:30,5:31,6:30,7:31,8:31,9:30,10:31,11:30,12:31} 15 var day_en = {d0:"sun",d1:"mon",d2:"the",d3:"wed",d4:"thu",d5:"fri",d6:"sat"}; 16 var m_display = (m<10)?"0"+String(m):m; 17 var last_day = new Date(y,m-1,month_count[m]).getDay(); 18 var first_day = new Date(y,m-1,1).getDay(); 19 var w = 1; 20 var d = first_day; 21 22 // マークアップ生成 23 var txt = ""; 24 txt += '<h1>' + y + '年' + m + '月のカレンダー</h1>\n'; 25 txt += '<table summary="' + y + '年' + m_display + '月のカレンダー" class="calendar month' + m + '">\n'; 26 txt += '<tr>\n'; 27 txt += '<th>SUN</th>\n'; 28 txt += '<th>MON</th>\n'; 29 txt += '<th>TUE</th>\n'; 30 txt += '<th>WED</th>\n'; 31 txt += '<th>THU</th>\n'; 32 txt += '<th>FRI</th>\n'; 33 txt += '<th>SAT</th>\n'; 34 txt += '</tr>\n'; 35 txt += '<tr class="week1">\n'; 36 for(var j=0;j<first_day;j++){ 37 txt += '<td> </td>\n'; 38 } 39 for(var i=1;i<=month_count[m];i++){ 40 if(d != 0 && (first_day + i)%7 == 1){ 41 w++; 42 d = 0; 43 txt += '</tr>\n'; 44 txt += '<tr class="week' + w + '">\n'; 45 } 46 var i_display = (i<10)?"0"+String(i):i; 47 48 day_count = (i%7 == 0)? Math.floor(i/7) : Math.floor(i/7) + 1 ; 49 50 //ここから記事の中身を変更します 51 var cleared = false; //日付がJSONに格納されているか把握するためにフラグを立てます 52 53 $.getJSON("data2.json", function(data){ 54 $(data).each(function(){ 55 var date = this.Date.date; 56 var limit = this.Date.limitt; 57 58 var ydate = date.slice(0, 4); //日付から年のみ抽出 59 var mdate = date.slice(5, 7); //日付から月のみ抽出 60 var ddate = date.slice(8, 10); //日付から日のみ抽出 61 62 63 if(y == ydate && m == mdate && i_display == ddate){ 64 txt += '<td id="d' + y + m_display + i_display + '" class="' + 'check' + '">' + i + '</td>\n'; 65 cleared = true; //もし日付が一致すればtdのクラスをcheckに変更し、フラグをtrueにする(checkクラスにcssで色を付けています) 66 } 67 68 }) 69 }) 70 71 if (!cleared) { //もしフラグがtrueでなければ色付けされていないtdへ 72 txt += '<td id="d' + y + m_display + i_display + '" class="' + day_en['d'+d] + day_count + ' date' + i + '">' + i + '</td>\n'; 73 } 74 //ここまで 75 76 d++; 77 } 78 for(var j=0;j<(6-last_day);j++){ 79 txt += '<td> </td>\n'; 80 } 81 txt += '</tr>\n'; 82 txt += '</table>\n'; 83 84 // 書き出し 85 document.getElementById("calendar").innerHTML = txt; 86} 87 88//以降月を変えるためのコード 89window.onload = function(){ 90 calendar(y,m); 91 92 93 document.getElementById("month_prev_ajax").onclick = function(){ //前月へボタンを押された時 94 m--; 95 if(m==0){y--;m=12;} 96 calendar(y,m); 97 return false; 98 } 99 100 document.getElementById("month_next_ajax").onclick = function(){ //次月へボタンを押された時 101 m++; 102 if(m==13){y++;m=1;} 103 calendar(y,m); 104 return false; 105 } 106 107 108} 109 110</script>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。