ＨＴＭＬで日にちの様式を変更したい

質問

http://lab.synck.com/Cal3.0/

このページを改変したいのですが、質問がございます。

現況ですと予定表内の左側には日しか記載されていませんが、

こちらを「H26/05/01」のような形式にしたいです。

方法をご教授願えませんでしょうか？

丸投げで大変恐れ入りますが、よろしくお願いします。

回答No.1

LancerVII · ベストアンサー

こんにちは。

修正としましてはcal.jsとcal.cssを修正します。

cal.jsの223行目付近
tdTextListArr.push('<ol><li id="'+tdId+'_li" onmouseover="cal_list2day_over(this)" onmouseout="cal_list2day_out(this)" value="'+dayCnt+'"'+tdTextListLink+'>'+splitArr[1]+'</li></ol>');
を

// 西暦から平成を算出
var heiseiStr = 'H' + (year - 1988) + '/' + (('0'+month).slice(-2)) + '/' + (('0'+dayCnt).slice(-2));
tdTextListArr.push('<ul><li id="'+tdId+'_li" onmouseover="cal_list2day_over(this)" onmouseout="cal_list2day_out(this)" '+tdTextListLink+'><span class="date">'+heiseiStr+'</span> '+splitArr[1]+'</li></ul>');

に変更する。

cal.cssの
div.schedule_wrapper div.schedule_list ol {
についてolタグからulタグに変更したので関連する定義を変更する。
ためしに設定したcssは以下のとおりです。(見た目の設定なので自分でカスタマイズしてください)
div.schedule_wrapper div.schedule_list ul {
padding: 0px;
margin: 5px auto;
border-top: solid 1px #CCC;
list-style: none;
}
div.schedule_wrapper div.schedule_list ul li {
padding: 5px 10px 0px 0px;
margin: 0px 0px 0px 5px;
font-size: 12px;
line-height: 1.5em;
}

日付の部分(H26/05/01)は<span class="date"></span>で囲んでありますので以下のような定義を追加し見た目を設定できます。
div.schedule_wrapper div.schedule_list ul li span.date {
color: #00f;
}

お礼

お手数おかけしました。何とかなりそうです、ありがとうございました！