カレンダーを作成しています。
現在のコードはこれです。
土日のみ赤にすることはできたのですが、
祝日も赤くすることは可能でしょうか。
考えている選択肢は
① カレンダーを読み込んだ後、祝日のみ判定する。
② <td>i</td>を出すタイミングで、<h5>みたいにスタイルを付けるためのタグを代入する
なのですが、あっていますでしょうか。
①の場合、
祝日データは、APIに、
「YYYYMMDD」と入れるようにします。
jsでSPIと通信して値を取得します。
「 year + month + i 」が APIデータ( YYYYMMDD )のどれかと一致するとき、
文字を赤くするみたいにしたかったのですが、「 i 」の値は、変化していってしまうので無理ですよね。
②の場合は、
iのみの判定なら可能ですが、YYYYMMを同時に判定するLogicが立てられませんでした。
この状態だと、どのようにするのが一番効率が良いでしょうか。
宜しくお願いいたします。
[環境]
Xcode/VisualStudio/Cordova/ios/Android
html
1<h3 id="thismonth">0年00月</h3> 2<table id="calender"> 3</table> 4
css
1td { 2 background-color: white; 3 height: 20px; 4 color: ; 5} 6 7td:first-child, 8td:last-child { 9 color: red; 10} 11
javascript
1var today = new Date(); 2//4ケタの年を取得する 3var year = String(today.getFullYear()); 4//2桁の月を取得する 5var month = String(100 + today.getMonth() + 1).substr(1, 2); 6//2桁の日を取得する 7var day = String(100 + today.getDate()).substr(1, 2); 8 9var html = ""; 10 11html += year + '年' + month + '月'; 12 13$("#thismonth").html(html); 14 15 16 17//今日のデータ取得 18var KongetuNoTsuitachi = new Date('2015/12/1'); 19 20//1日が何曜日か 21var blank = KongetuNoTsuitachi.getDay(); 22console.log(blank); 23 24var html; 25html += '<thead><tr><th class="sun">日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th class="sat">土</th></tr></thead>'; 26 27html += '<tbody>' 28 29//1weekのため 30var count = 0; 31 32 33 34//ここから1日の曜日までの空欄 35for (var i = 0; i < blank; i++) { 36 37 //セルの数が7個になったら改行 38 if (count % 7 == 0) { 39 html += '<tr>'; 40 } 41 42 html += '<td></td>'; 43 count++; 44} 45 46 47// 現在日を取得 48var now = new Date(); 49// 来月 50var monthOfNext = now.getMonth() + 1; 51 52if (monthOfNext == 12) { // 来月が13月になってしまったら、 53 monthOfNext = 0; // 1月とする 54} 55 56// 来月の0日を調べると、今月の末日がわかる 57var yokugetsunozeronichi = new Date(now.getFullYear(), monthOfNext, 0); 58var KongetuNoNissu = yokugetsunozeronichi.getDate(); 59console.log(KongetuNoNissu); 60 61for (i = 1; i <= KongetuNoNissu; i++) { 62 if (count % 7 == 0) { 63 html += '</tr></tr>'; 64 } 65 html += "<td>" + i + "</td>"; 66 count++; 67} 68 69// 最後の日から土曜までの空欄 70while (count % 7 != 0) { 71 72 html += '<td></td>'; 73 count++; 74 if (count % 7 == 0) { 75 html += '</tr>'; 76 77 } 78 79} 80 81html += '</tbody>' 82 83$("#calender").append(html); 84 85 86 87console.log(i); 88 89
■□■□■□■□■□■□■□■□■□■□■□■□■
追記
回答をいただいた後に、少し改修してみました。
現在のコードです。
https://jsfiddle.net/2ju4a1mj/6/
どこかが間違っていて、カレンダーが表示されなくなってしまいました。
この辺りが怪しいと思うのですが、どこが間違っているか教えてください。
var holiday = year + month + ((100 + i).substr(1, 2));
if ($.inArray(holiday, arrayHoliday)) {
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/12/09 08:17
2015/12/09 08:18
2015/12/09 08:46 編集
2015/12/09 08:45
2015/12/09 09:05 編集
2015/12/09 09:08
2015/12/09 09:11
2015/12/09 09:14
2015/12/09 09:21 編集
2015/12/09 09:26
2015/12/09 09:27
2015/12/09 09:36
2015/12/09 09:39
2015/12/09 10:48