スポンサーサイト

一定期間更新がないため広告を表示しています

| スポンサードリンク | - | - | pookmark |
Entry: main  << >>
カレンダーの曜日の色を変更する[スタンダードタイプ]
JUGEMではスタンダードタイプのカレンダーが2種類用意されています。(08/06/20 現在)
{calendar}
※普通のスタンダードタイプのカレンダー
{calendar2}
※上に月表示され、曜日も表示されるスタンダードタイプのカレンダー
{calendar2}では上に月・曜日表示がされるようですが、どうも気に入らない。
自分好みのカレンダーを作成するには、{calendar}を元にカスタマイズを施しましょう。

{calendar}
<table border="0" cellspacing="1" cellpadding="0">
<tr style="text-align: center;">
<td class="cell">日付</td>
<td class="cell">日付</td>
</tr>
<tr style="text-align: center;">
<td class="cell">日付</td>
<td class="cell"><a href="./?day=日付">日付(リンク)</a></td>
</tr>
...
...

<tr>
<td colspan="7">
<div style="text-align: center;" class="calendar_month">
<a href="./?month=前月"><<</a>当月 <a href="./?month=次月">>></a>
</div>
</td>
</tr>
</table>

{calendar2}(曜日表示部分)
<tr>
<td class="weekday">Sun</td>
<td class="weekday">Mon</td>
<td class="weekday">Tue</td>
<td class="weekday">Wed</td>
<td class="weekday">Thu</td>
<td class="weekday">Fri</td>
<td class="weekday">Sat</td>
</tr>

曜日表示を上にもってくる場合は、こんな風にHTMLをカスタマイズ。
例:「stella_basics
<!-- BEGIN calendar -->
<h2>Calendar</h2>
<div class="calendar">
<table border="0" cellspacing="1" cellpadding="0">
<tr style="text-align: center;">
<td class="sun">Sun</td>
<td class="mon">Mon</td>
<td class="tue">Tue</td>
<td class="wed">Wed</td>
<td class="thu">Thu</td>
<td class="fri">Fri</td>
<td class="sat">Sat</td>
</tr>
</table>
</div>

<div class="calendar">{calendar}</div>
<!-- END calendar -->

CSSで土曜日を青色、日曜日を赤色に指定。
.sun { color: red;}
.sat { color: blue;}



| pika | - | - | pookmark |
スポンサーサイト
| スポンサードリンク | - | - | pookmark |