Q&A
ありがとうございます。
これでやってみましたが、上記ソースのみでしたら出来たのですが
現在使っているファイルへ置き換えると、horidayの色だけが付いていません。。。
function setHoliday()
自分のファイルへ書く込むと、これが効いていないみたいで。
カレンダーの表示を以下のスクリプトと他cssコードで表示しています。
これだと、正常にカレンダーは表示されますが、特定の日時にハイライトや、見た目の装飾がこのままだと出来ません。
例えば、休業日となる
年末年始の12月30日から1月3日の間は赤字に設定したい場合、どの様にいじれば良いでしょうか？
jQueryでそんな便利な物もあるかもしれませんが、javascriptの勉強も兼ねて知りたいので、知識をお持ちでお付き合い頂ける方、教えて下さい。
よろしくお願い致します。
html
1<script src="../js/calendar.js"></script>
javascript
1 2/*====================== 3日付の取得 4======================*/ 5var Years = new Date(); 6var Toshi = Years.getFullYear(); 7var Tsuki = Years.getMonth() + 1; 8var dayLoad = Years.getDate(); 9/*====================== 10Calendar 11======================*/ 12myWeekTbl = new Array("日","月","火","水","木","金","土"); 13myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31); 14 15if (((Toshi%4)==0 && (Toshi%100)!=0) || (Toshi%400)==0){ 16 myMonthTbl[1] = 29; 17} 18myMonth = Years.getMonth(); 19dayLoad = Years.getDate(); 20Years.setDate(1); 21myWeek = Years.getDay(); 22myTblLine = Math.ceil((myWeek+myMonthTbl[myMonth])/7); 23myTable = new Array(7*myTblLine); 24 for(i=0; i<7*myTblLine; i++) myTable[i]=" "; 25 for(i=0; i<myMonthTbl[myMonth]; i++)myTable[i+myWeek]=i+1; 26 27function loadCalendar() { 28 document.write("<div class='loadCalendarWrapper'><table border='1' class='loadCalendarTable'>"); 29 document.write("<tr><td colspan='7' bgcolor='#2a2e3e'>"); 30 document.write("<span class='loadCalendarTitle'>", (myMonth+1),"月"+"営業日カレンダー</span>"); 31 document.write("</td></tr>"); 32 document.write("<tr>"); 33 for(i=0; i<7; i++){ 34 document.write("<td align='center' "); 35 if(i==0)document.write("bgcolor='#fa8072'>"); 36 else document.write("bgcolor='#f3f3f3'>"); 37 document.write("<strong>",myWeekTbl[i],"</strong>"); 38 document.write("</td>"); 39 } 40 document.write("</tr>"); 41 for(i=0; i<myTblLine; i++){ 42 document.write("<tr>"); 43 for(j=0; j<7; j++){ 44 document.write("<td align='center' "); 45 myDat = myTable[j+(i*7)]; 46 if (myDat==dayLoad)document.write("style='color:#fff;' bgcolor='#007cf9'"); 47 else if(j==0) document.write("bgcolor='#FF33CC'>"); 48 else document.write("bgcolor='#fff'>"); 49 document.write("<strong>",myDat,"</strong>"); 50 document.write("</td>"); 51 } 52 document.write("</tr>"); 53 } 54 document.write("</table><div class='hosoku'><span class='HolidayMark'>■</span>は休業日です</div></div>"); 55} 56
回答3件
0
javascript
1if (myDat==dayLoad)document.write("style='color:#fff;' bgcolor='#007cf9'");
このコードでは、カレンダーを参照した日付に色を付けているように思いますが、
これと同じように12/30～1/3のどれかの日にヒットした際も変化をつけるようなコードを書けば良いのではないでしょうか？
実用性は無かもしれませんが考え方の方向として、とりあえず次のようなコードを上記の下に追加すれば12/30のセルの文字は赤になりそうに思います。
javascript
1else if(Tsuki == 12 && myDat==30)document.write("style='color:red;'");
実際には特別扱いしたい日をリストで保持しておいて、リスト内の日付のどれかに一致するカレンダー上の日のスタイルを変更するような格好になるかと思います。
投稿2015/12/21 13:44
編集2015/12/21 13:50
総合スコア2068
0
ベストアンサー
大幅に修正してしまいましたが。。。
HTML
1<html> 2<head> 3<meta charset="utf-8"> 4<style> 5thead .header { 6 background-color: #f3f3f3; 7} 8 9thead .header.sunday { 10 background-color: #fa8072; 11} 12 13tbody .today { 14 background-color: #007cf9; 15 color: #ffffff; 16} 17 18tbody .sunday { 19 background-color: #ff33cc; 20} 21 22tbody .weekday { 23 background-color: #ffffff; 24} 25 26tbody .holiday { 27 background-color: #ff0000; 28 color: #ffffff; 29} 30</style> 31</head> 32<body> 33<script src="../js/calendar.js"></script> 34</body> 35</html>
<td> にカスタムデータ属性として「data-date」を設定し、「20151221」というように年月日を設定しています。 setHoliday() には配列で休業日を渡し、上記で設定した「data-date」と同じ値を持つ <td> タグの背景色を変更（実際は class を追加）しています。javascript
1/*====================== 2日付の取得 3======================*/ 4var Years = new Date(); 5var Toshi = Years.getFullYear(); 6var Tsuki = Years.getMonth() + 1; 7var dayLoad = Years.getDate(); 8/*====================== 9Calendar 10======================*/ 11myWeekTbl = new Array('日', '月', '火', '水', '木', '金', '土'); 12myMonthTbl= new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 13 14if (((Toshi % 4) == 0 && (Toshi % 100) != 0) || (Toshi % 400) == 0) { 15 myMonthTbl[1] = 29; 16} 17myMonth = Years.getMonth(); 18dayLoad = Years.getDate(); 19Years.setDate(1); 20myWeek = Years.getDay(); 21myTblLine = Math.ceil((myWeek + myMonthTbl[myMonth]) / 7); 22myTable = new Array(7 * myTblLine); 23for (i = 0; i < 7 * myTblLine; i++) { 24 myTable[i]=" "; 25} 26for (i = 0; i < myMonthTbl[myMonth]; i++) { 27 myTable[i + myWeek] = i + 1; 28} 29 30function loadCalendar() 31{ 32 var _class; 33 var output = ''; 34 35 output += '<div class="loadCalendarWrapper"><table border="1" class="loadCalendarTable">'; 36 output += '<thead>'; 37 output += '<tr><td colspan="7" bgcolor="#2a2e3e">'; 38 output += '<span class="loadCalendarTitle">' + Tsuki + '月' + '営業日カレンダー</span>'; 39 output += '</td></tr>'; 40 output += '<tr>'; 41 for (i = 0; i < 7; i++) { 42 _class = 'header'; 43 if (i == 0) { 44 _class += ' sunday'; 45 } 46 output += '<td align="center" class="' + _class + '">'; 47 output += '<strong>' + myWeekTbl[i] + '</strong>'; 48 output += '</td>'; 49 } 50 output += '</tr>'; 51 output += '</thead>'; 52 output += '<tbody>'; 53 for (i = 0; i < myTblLine; i++) { 54 output += '<tr>'; 55 for (j = 0; j < 7; j++) { 56 myDat = myTable[j + (i * 7)]; 57 _class = 'weekday'; 58 if (myDat == dayLoad) { 59 _class = 'today'; 60 } else if (j == 0) { 61 _class = 'sunday'; 62 } 63 output += '<td align="center" class="' + _class + '" data-date="' + Toshi + Tsuki + myDat + '">'; 64 output += '<strong>' + myDat + '</strong>'; 65 output += '</td>'; 66 } 67 output += '</tr>'; 68 } 69 output += '</tbody>'; 70 output += '</table><div class="hosoku"><span class="HolidayMark">■</span>は休業日です</div></div>'; 71 document.write(output); 72} 73 74loadCalendar(); 75 76/*====================== 77休業日の背景色を設定 78======================*/ 79function setHoliday(days) 80{ 81 var element; 82 for (var i = 0; i < days.length; i++) { 83 element = document.querySelector('[data-date="' + days[i] + '"]'); 84 if (element != null) { 85 element.classList.add('holiday'); 86 } 87 } 88} 89 90setHoliday([ '20151230', '20151231', '20160101', '20160102', '20160103' ]);
投稿2015/12/21 13:54
総合スコア736
function loadCalendar()
の中に
function setHoliday()を入れることで解決出来ました。
助かりました。ありがとうございました。
0
やっつけだが、例えばこんなのはどうだろうか。
月ごとの休業日を格納した配列(holiday)を作っておき、
書き出す日付がその配列に含まれてるなら(holiday[myMonth].indexOf(myDat) != -1)文字を赤くする。
Javascript
1var Years = new Date(); 2var Toshi = Years.getFullYear(); 3var Tsuki = Years.getMonth() + 1; 4var dayLoad = Years.getDate(); 5/*====================== 6Calendar 7======================*/ 8myWeekTbl = new Array("日","月","火","水","木","金","土"); 9myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31); 10 11var 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 12 13if (((Toshi%4)==0 && (Toshi%100)!=0) || (Toshi%400)==0){ 14 myMonthTbl[1] = 29; 15} 16 17 18 19myMonth = Years.getMonth(); 20dayLoad = Years.getDate(); 21Years.setDate(1); 22myWeek = Years.getDay(); 23myTblLine = Math.ceil((myWeek+myMonthTbl[myMonth])/7); 24myTable = new Array(7*myTblLine); 25 for(i=0; i<7*myTblLine; i++) myTable[i]=" "; 26 for(i=0; i<myMonthTbl[myMonth]; i++)myTable[i+myWeek]=i+1; 27 28function loadCalendar() { 29 document.write("<div class='loadCalendarWrapper'><table border='1' class='loadCalendarTable'>"); 30 document.write("<tr><td colspan='7' bgcolor='#2a2e3e'>"); 31 document.write("<span class='loadCalendarTitle'>", (myMonth+1),"月"+"営業日カレンダー</span>"); 32 document.write("</td></tr>"); 33 document.write("<tr>"); 34 for(i=0; i<7; i++){ 35 document.write("<td align='center' "); 36 if(i==0)document.write("bgcolor='#fa8072'>"); 37 else document.write("bgcolor='#f3f3f3'>"); 38 document.write("<strong>",myWeekTbl[i],"</strong>"); 39 document.write("</td>"); 40 } 41 document.write("</tr>"); 42 for(i=0; i<myTblLine; i++){ 43 document.write("<tr>"); 44 for(j=0; j<7; j++){ 45 document.write("<td align='center' "); 46 myDat = myTable[j+(i*7)]; 47 if(holiday[myMonth].indexOf(myDat) != -1)document.write("style='color:red;' "); // <- added 48 if (myDat==dayLoad)document.write("style='color:#fff;' bgcolor='#007cf9'"); 49 else if(j==0) document.write("bgcolor='#FF33CC'>"); 50 else document.write("bgcolor='#fff'>"); 51 document.write("<strong>",myDat,"</strong>"); 52 document.write("</td>"); 53 } 54 document.write("</tr>"); 55 } 56 document.write("</table><div class='hosoku'><span class='HolidayMark'>■</span>は休業日です</div></div>"); 57}
投稿2015/12/21 13:48
編集2015/12/21 13:59
総合スコア144
ほぼ同じタイミングでしたね。。
余計な事ですみません。この場合、holiday且つ閲覧日のセルで
<td align='center' style='color:red;' style='color:#fff;' bgcolor='#007cf9'>
こんな風になったりしませんでしょうか？
※仮にそうなっても特に不具合は出ないので問題は無いと思います
ご意見ありがとうございます。
きっと、そう(あまり好ましくないマークアップに)なると思います。
適切なやり方ではないことは承知していますが、それでもひとまず考え方さえ伝えられればいいかなと。
なにか問題があれば(実際あるのですが…)また質問してもらえればいいかなと思っています。
回答ありがとうございました。
今ある物をそのまますぐに使えたので、hyper-drums-ko さんをベストアンサーとさせていただきましたが、アドバイスいただき感謝いたします。
ありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。