Javascriptで週間カレンダーに改行と曜日に色付けしたいです。

Question

お知恵を貸してください。

当日から1週間分のカレンダーを作成し、
・日付の下に改行して「◎」
・土曜日は文字色を青
・日曜日は文字色を赤
を実現したいと考えています。

現状、当日から1週間分のカレンダーは出来ています。

<div class="dateSlide">
	<ul class="dateSlideList">
		<li class="date01"></li>
		<li class="date02"></li>
		<li class="date03"></li>
		<li class="date04"></li>
		<li class="date05"></li>
		<li class="date06"></li>
		<li class="date07"></li>
	</ul>
</div>

$(function(){
  var now = new Date();
  var wd = ["日", "月", "火", "水", "木", "金", "土"];

  $('.dateSlideList li').text(function(){
    var m=now.getMonth()+1;
    var d=now.getDate();
    var w=wd[now.getDay()];
		now.setDate(now.getDate()+1);
    return m+"月"+d+"日"+"("+w+")";
  });
});

上記３点を実現させるため、色々調べたのですが八方塞がりになりました。
何が足りないのか、ご教授ください。

Comments

[m.ts10806]

「曜日日色付け」はそこまで珍しい仕組みでもないと思います。
どのように調べ、何を試したのでしょうか。

Answer 1

改行や色付けというワードが曖昧ですが、cssとjQueryを利用するならこう

<style>
.sat{color:blue}
.sun{color:red}
</style>
<script>
$(function(){
  var now = new Date();
  var wd = ["日", "月", "火", "水", "木", "金", "土"];

  $('.dateSlideList li').each(function(){
    var m=now.getMonth()+1;
    var d=now.getDate();
    var w=now.getDay();
    var txt= m+"月"+d+"日"+"("+wd[w]+")";
    now.setDate(now.getDate()+1);
    $(this).toggleClass('sat',w==6).toggleClass('sun',w==0).append($('<div>').text(txt)).append($('<div>').text('◎'));
  });
});
</script>

Comments

[tmkky]

ありがとうございます。
解決できました。

Answer 2

改行◎はそのまま文字列に"\n◎"を足して、.dateSlideList liのスタイルを white-space: pre にすると簡単です。.text()を.html()にして "<br>◎" してもよいですね。

最小限のJavaScriaptコード修正で済ませたい場合

.text(function() { を .html(function() { に変え、土曜日日曜日の場合は <span class="saturday">か <span class="sunday"> 〜 </span> で囲んだ文字列を返し、CSSで.saturday .sunday のセレクタで色を設定すれば良いしょう。

余計な要素を増やしたくない場合

$('.dateSlideList li').each(function() { という感じでループを回して、$(this).text() でこれまでと同じように日付曜日を入れ、土曜日か日曜日だったら$(this).addClass() でクラスを足せばよいでしょう。

Comments

[tmkky]

ありがとうございます。
勉強になりました。