ぷち日記

Broach機能追加：カスタムカレンダー

2006-09-19

Broachのカレンダーがカスタムに編集できるようになったらしい。
が、いろいろやってみたがかなり使い勝手が悪い。。。(-_-#
これ一から作るのはかなり面倒。
ということで、できあいのテンプレートからパクッって以下のような感じにしてみた。
前よりはちょっとはよくなったかも。

 Mail Index
 {SET calendar_mode="custom"}
 <table border="0" cellspacing="2" cellpadding="0">
 <caption class="calendarhead">
 {SHOW calendar_year_string}年{SHOW calendar_month_num_string}月</caption>
 <tr align="center">
 <th><span class="calendardesc">日</span></th>
 <th><span class="calendardesc">月</span></th>
 <th><span class="calendardesc">火</span></th>
 <th><span class="calendardesc">水</span></th>
 <th><span class="calendardesc">木</span></th>
 <th><span class="calendardesc">金</span></th>
 <th><span class="calendardesc">土</span></th>
 </tr>
 {LOOP calendar_weekly_item}
 <tr align="center">
 {LOOP calendar_daily_item}
 <td class="{SHOW calendar_daily_color}">
 <span class="calendar">{SHOW calendar_daily_link}</span>
 </td>
 {ENDLOOP calendar_daily_item}
 </tr>
 {ENDLOOP calendar_weekly_item}
 </table>
 <div class="calendar_navi">
 {IF calendar_has_prev}<a href="{SHOW calendar_prev_url}">{ENDIF  calendar_has_prev}« 前の月{IF calendar_has_prev}</a>{ENDIF  calendar_has_prev} | {IF calendar_has_next}<a href="{SHOW calendar_next_url}"> {ENDIF calendar_has_next}次の月 »{IF calendar_has_next}</a>{ENDIF  calendar_has_next}


スタイルシート

 .calendar {
     font-family: verdana;
     color: #333;
     font-size: xx-small;
     font-weight: normal;
     padding: 1px;
 }



 .calendar a {
     font-weight: bold;
 }



 .calendardesc {
     font-family: Monaco, Trebuchet MS, Verdana;
     color: #666;
     font-size: 9pt;
     font-weight: normal;
     padding: 4px;
 }



 .calendarhead {
     font-family: verdana;
     color: #666;
     font-size: 9pt;
     text-align: right;
     font-weight: normal;
     border-bottom: 1px solid #FFFFFF;
     line-height: 140%;
 }



 .calendar_today_color {
     border: 1px solid #f60;
 }



 .calendar_sunday_color {
     background-color: #f99;
     border: 1px solid #f66;
 }



 .calendar_saturday_color {
     background-color: #99f;
     border: 1px solid #66f;
 }



 .calendar_weekday_color {
     border: 1px solid #FFFFFF;
     background-color: #bbb;
 }



 .calendar_navi {
     color: #FFFFFF;
     text-align: center;
 }


2006
8