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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

Q&A

解決済

2回答

11573閲覧

カレンダーの祝日の文字色を赤くしたい。

b1ackc0ffee

総合スコア267

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

0グッド

2クリップ

投稿2015/12/09 05:23

編集2015/12/09 08:16

カレンダーを作成しています。

現在のコードはこれです。

デモ

土日のみ赤にすることはできたのですが、
祝日も赤くすることは可能でしょうか。

考えている選択肢は

① カレンダーを読み込んだ後、祝日のみ判定する。

<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)) {

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

こんにちは。

ご参考までに、このような感じでOKでしょうか?
イメージ説明

私であれば、<td> 要素に祝日用のクラスを付与します。②に近いですね。次のコードのようにします。

① の意味合い(1日ずつAPIを呼ぶ?ちがっていたらすみません)では、その分、負荷がかかったりレスポンスが遅くなったりするので、祝日情報はまとめて取得しておきます。祝日は動的ではないですし、祝日日数は年間の日数に対して少ないですから。

それから、振替休日などはクライアント側で逐一計算せずに、APIから振替日そのものを祝日(の仲間)として返してもらえれば、それに越したことはありません(変数名やクラス名を holydays ではなく daysoff としたのは、そのような意味合いもあります)

css

1td.daysoff {color: red;}

javascript

1... 2// 祝日情報 3// (これは、データの例です。配列として一気に取り込む、そのほかAPIに合わせてもよいでしょう) 4dayoffs = "#20150101#20150112#20150211#20151223#"; // 例:2015年祝日情報(途中省略) 5... 6 7// 来月の0日を調べると、今月の末日がわかる 8... 9for (i = 1; i <= KongetuNoNissu; i++) { 10 if (count % 7 == 0) { 11 html += '</tr></tr>'; 12 } 13 // 該当する #YYYYMMDD# を ymd に得ます。 14 ymd = "#" + year + month + String(100 + i).substr(1, 2) + "#"; 15 // 祝日情報文字列中に、該当する#YYYYMMDD# があるかどうかで、td要素に対するクラス指定を行います。 16 17// ※間違いでした... attr = dayoffs.indexof(ymd)?" daysoff":""; 18 attr = (-1 < dayoffs.indexOf(ymd)) ? ' class="daysoff"' : ""; 19 20 // htmlを生成します。 21 html += "<td" + attr + ">" + i + "</td>"; 22 23 count++; 24} 25...

投稿2015/12/09 05:53

編集2015/12/09 09:10
hsk

総合スコア728

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

b1ackc0ffee

2015/12/09 08:17

こんにちは、回答ありがとうございます。 見たことない記述がたくさんあったので、返信に時間がかかってしまいました。 私には難しかったのですが、 これは言語は何になるのでしょうか? JavaScriptでsprintfやstrposを使うことは可能なのでしょうか。 最初はAPIを更新したときに、バージョン番号も入れて、 アプリ側のバージョン番号が変更されているときだけ、差分を取得しようかと思っていたのですが、 難しそうだし、アプリ側でバージョン番号保持する方法が分からなかったので、 毎度祝日データ全て取得することにしました。 1年分の祝日データですので、その都度読み込んでもそんなに負担ではないかと思います。
hsk

2015/12/09 08:46 編集

最初 PHP で書いてしまい、失礼しました。。 現在JavaScriptのコードにしましたが、さらに1行間違いが見つかりました為、修正しました。 jsfiddleのサイトで動作確認できたので、動くようになったかと思います(monthOfNextのコメントアウトは外して戻してみました)。
hsk

2015/12/09 08:45

配列でデータを持つように変更されたのですね。 「現在のコード」では、monthOfNext が未定義になっているので、 var yokugetsunozeronichi = new Date(now.getFullYear(), monthOfNext, 0); で失敗しているようです。
hsk

2015/12/09 09:05 編集

あと、 arrayHoliday() = ["20150101","20151223"]; は arrayHoliday = ["20150101","20151223"]; var holiday = year + month + ((100 + i).substr(1, 2)); は var holiday = year + month + (String(100 + i).substr(1, 2)); if ($.inArray(holiday, arrayHoliday)) { は if ($.inArray(holiday, arrayHoliday) != -1) { でしょう。 h4タグを利用すると、スタイルシートでしっかり定義しない限り、文字の大きさが他の日付の文字より若干大きくなってしまいますね。
b1ackc0ffee

2015/12/09 09:08

ご返信ありがとうございます。 APIからとってくる処理をこの場で、shareする方法が分からなかったので、 配列で代用しました。 実際は、JS側にAPIのデータを、とってくる処理を書こうと思っています!! 改修しました。 https://jsfiddle.net/2ju4a1mj/22/ 全部赤くなってしまったのですが、 計算Logic間違っていますでしょうか?
hsk

2015/12/09 09:11

if ($.inArray(holiday, arrayHoliday)) { を if ($.inArray(holiday, arrayHoliday) != -1) { とすれば、うまくいくと思いますよ。
b1ackc0ffee

2015/12/09 09:14

h4に対するアドバイスまでいただき有難うございます。 tdにidを振ることはできませんよね? 実は私も懸念していたのですが、 代用できるタグ、もしくは方法あればご教示いただけると助かります。
hsk

2015/12/09 09:21 編集

td にもクラスを付与できますよ。 if ($.inArray(holiday, arrayHoliday)) { html += '<td class="holiday">' + i + "</td>" ; ... として css側に td.holiday {color:red;} と記述すれば、赤い文字になるでしょう。 どうしてもtdをいじりたくない場合は、spanタグなどの副作用の少ないタグが使い勝手良さそうです(ただし、いずれにしてもクラス指定しないと他でspanタグを使ったときにもcssで指定したスタイルが反映されてしまいます)。 ちなみにtdにidも付与できますが、ユニークにしなければならないこととそのほかの理由から今回の要件には使いづらいです。
b1ackc0ffee

2015/12/09 09:26

!= -1 とは、 $.inArray(holiday, arrayHoliday)がTRUEの時という意味でしょうか。
b1ackc0ffee

2015/12/09 09:36

おおおお~、いけました!! なるほどです。 ありがとうございます♡ strpos、sprintf、 dayoffs = "#20150101#20150112#20150211#20151223#";、"#%s%s%02d#"など、、、 最初書いてくださっていたやつも、今は 難解ですが、理解したいので、消さないでいただけると嬉しいです★
hsk

2015/12/09 09:39

お疲れ様でした! 実はjsfiddleを知りませんでした。かなり便利ですね。こちらこそ有難う御座います^^>
b1ackc0ffee

2015/12/09 10:48

なんか、jsfiddle今日仕様が変わってバグが発生していましたw もう直りましたけど! 便利ですよね、多用しています★ 今回配列で、一時的に代用していたので、これからAPIとの通信に改修していきます。 また、質問するので、回答いただけると助かります。 今後とも、宜しくお願いいたします。
guest

0

直接の回答ではありませんが、祝日情報はテーブルで用意することが多いようです。

祝日を求めるには?[C#、VB]

祝日が日曜日と重なった場合は翌日も休日とする、とか、ハッピーマンデーとかいろいろ面倒ですね。

投稿2015/12/09 05:46

Orlofsky

総合スコア16415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

b1ackc0ffee

2015/12/09 05:59

リンクありがとうございました。 .NETの時には使えそうですね。 今回は、CordovaでAPIを使用し、何の日かなどの情報使わないので、そこまで複雑ではなさそうです。 1年分の年月日くらいの軽いデータです^^
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問