Movable Type カレンダーの今日の日付に装飾 改善

前回、Movable Type リアルタイムカレンダー カレンダーの今日の日付に装飾にてカレンダーで今日の場合に装飾をする設定をしましたが、レイアウト的にまだまだ問題点があるので、その改善を行いました。

*現在の状態、問題点

• エントリーが有る日（背景色を変え、フォントをボールド、日付アーカイブにリンク）
• エントリーが無く、且つ今日の日付（エントリー有りとは別の背景色）
• エントリーが有り、且つ今日の日付（エントリー有りとは別の背景色、日付アーカイブにリンク）
• エントリーが無い日（装飾無し）

つまり、現状では今日の日付で装飾がある場合、見た目では今日のエントリーが存在するかどうか分からない。日付アーカイブにリンクはしているので、マウスオーバーしてみないとリンクしているかどうかも分からない状態となっています。

*改善後

• エントリーが有り、今日である
• エントリーが無く、今日である
• エントリーが有り、今日ではない
• エントリーが無く、今日でもない

この4つを1つ1つスタイルシートのスタイルで定義するように改善しようかと思います。

*現在のソース

省略（前回参照）
<?php
  function mt_today($y, $m, $d) {
    $day = date("j");
    $year = date("Y");
    $month = date("m");
    if($year == $y && $month == $m && $day == $d) {
      print " class=\"today\"";
    }
  }
?>
<MTCalendar month="this"><MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td<MTCalendarIfEntries><?php mt_today("<$MTCalendarDate format='%Y'$>", "<$MTCalendarDate format='%m'$>", "<$MTCalendarDay$>"); ?><MTEntries lastn="1"> class="calent"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><?php mt_today("<$MTCalendarDate format='%Y'$>", "<$MTCalendarDate format='%m'$>", "<$MTCalendarDay$>"); ?>><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>>&nbsp;</MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>

*今回の改善

エントリーが有る状態のタグか、無い状態のタグかを判断するためにフラグを付け、引数としてmt_todayに引き渡しています。

mt_todayの中ではエントリーが有るある状態と無い状態と本日の3つを判断しています。引数の数値を増やし、同時に条件式も増やせば、ほぼ無制限で複数のスタイルを設定できます。

<?php
  function mt_today($y, $m, $d, $flag) {
    $day = date("j");
    $year = date("Y");
    $month = date("m");
    if ($year == $y && $month == $m && $day == $d) {
      if ($flag == 0) {
        print " class=\"today\"";
      } elseif ($flag == 1) {
        print " class=\"today-entry\"";
      }
    } elseif ($flag == 1) {
      print " class=\"calendar-entry\"";
    }
  }
?>
<MTCalendar month="this"><MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td<MTCalendarIfEntries><?php mt_today("<$MTCalendarDate format='%Y'$>", "<$MTCalendarDate format='%m'$>", "<$MTCalendarDay$>", 1); ?><MTEntries lastn="1">><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><?php mt_today("<$MTCalendarDate format='%Y'$>", "<$MTCalendarDate format='%m'$>", "<$MTCalendarDay$>", 0); ?>><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>>&nbsp;</MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>

*スタイルシートの設定

設定した分だけのスタイルシートに記述を追加します。

.calendar .today {
  background-color: #eeeeee;
}
.calendar .today-entry {
  background-color: #eeeeee;
  font-weight: bold;
}
.calendar .calendar-entry {
  background-color: #99ffcc;
  font-weight: bold;
}

*結果

これで以下のようになりました。

• エントリーが有る日（背景色を変え、フォントをボールド、日付アーカイブにリンク）
• エントリーが無く、且つ今日の日付（エントリー有りとは別の背景色）
• エントリーが有り、且つ今日の日付（エントリー有りとは別の背景色、フォントをボールド、日付アーカイブにリンク）
• エントリーが無い日（装飾無し）

エントリーがある時は今日で有る無し関係なしにフォントがボールドとなっています。

これは、スタイルシートの設定次第でエントリーが有る時は背景色無しのボールド、今日の時は背景色のみ、今日且つエントリーが有る時は背景色とボールドというデザインにする事もできます。カレンダー全体にボーダーを設定していなければ、今日の場合で日付回りにボーダーを付ける事も可能です。

*その他の設定の参考

エントリーがある時は背景色無しのボールド、本日は背景色のみ、今日且つエントリーがある時は背景色とボールド

.calendar .today {
  background-color: #eeeeee;
}
.calendar .today-entry {
  background-color: #eeeeee;
  font-weight: bold;
}
.calendar .calendar-entry {
  font-weight: bold;
}

カレンダー全体にボーダーを設定していない場合で、今日の日付回りにボーダーを付ける場合。

.calendar .today {
  border: 1px solid #009900;
}
.calendar .today-entry {
  background-color: #99ffcc;
  border: 1px solid #009900;
  font-weight: bold;
}
.calendar .calendar-entry {
  background-color: #99ffcc;
  font-weight: bold;
}

他にも設定のしようはありますが、今回は割愛という事で...。