ユーティリティ

2017年10月

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

キーワード検索

キーワード検索フォーム
キーワード

ユーザー

  • cccのアバター

新着画像

過去ログ

Twitter

Twilogを見る

Feed

エントリー

freoのサイドバーのカレンダーで今日の日付にclassをつける

ファイル 74-1.jpgファイル 74-2.jpg

そもそも
カレンダーの閲覧時の日付に印(当日表示)をつけてみる(龍の棲む場所)
という方法があるのですが、別途jsファイルを付ける必要があり、もっと簡単にテンプレートとcssファイルの変更のみでこれを実現したものです。

  1. templates/utility.html の20行目あたりにある
    <!--{if $plugin_entry_calender.type == 'day'}-->
    の部分を
    <!--{if $plugin_entry_calender.type == 'day' && $plugin_entry_calender.date == $smarty.now|date_format:'%Y%m%d'}-->
    	<td><!--{if $plugin_entry_calender.flag}--><a href="{$freo.core.http_file}/entry?date={$plugin_entry_calender.date}"><!--{/if}--><span class="today">{$plugin_entry_calender.day}</span><!--{if $plugin_entry_calender.flag}--></a><!--{/if}--></td>
    <!--{elseif $plugin_entry_calender.type == 'satday' && $plugin_entry_calender.date == $smarty.now|date_format:'%Y%m%d'}-->
    	<td><!--{if $plugin_entry_calender.flag}--><a href="{$freo.core.http_file}/entry?date={$plugin_entry_calender.date}"><!--{/if}--><span class="today satday">{$plugin_entry_calender.day}</span><!--{if $plugin_entry_calender.flag}--></a><!--{/if}--></td>
    <!--{elseif $plugin_entry_calender.type == 'sunday' && $plugin_entry_calender.date == $smarty.now|date_format:'%Y%m%d'}-->
    	<td><!--{if $plugin_entry_calender.flag}--><a href="{$freo.core.http_file}/entry?date={$plugin_entry_calender.date}"><!--{/if}--><span class="today sunday">{$plugin_entry_calender.day}</span><!--{if $plugin_entry_calender.flag}--></a><!--{/if}--></td>
    <!--{elseif $plugin_entry_calender.type == 'day'}-->
    に変更(赤字を追加)します。
  2. css/default.css の279行目あたりにある
    div#utility div.utility table.calender tr td span.day {
    の上に
    div#utility div.utility table.calender tr td span.today {
    	color: #FFFFFF;
    	background-color: #AAAAAA;
    	border: 1px solid #AAAAAA;
    	display: block;
    }
    を追加します(上記はデフォルトのテンプレートの場合で試していますので適宜調整して下さい)。

【2013.5.21追記】追加する部分を修正しました。
※ここでは試していませんが角丸にしたい場合は、2.の追加部分に border-radius: 5px; を追加して下さい。

【2013.6.1追記】カレンダーがおかしくなる現象がありましたので1.の変更部分を修正しました。
※当日が土・日の場合は日にちが元々のカレンダーの色で表示されます。

ページ移動

関連エントリー

コメント

march

こんにちは。6月1日に試してみたのですが、一番上の行が全て「1」と表示される(本来だと「-」で表示される5月の分まで「1」になる)状態にになってしまって、どうしても上手くいきません。CSSは有効ですが、並んだ「1」全てに印がついてしまいました。カレンダー部分はほとんど改造していないのですが、何故こうなってしまうのか、おわかりでしたら教えていただけないでしょうか。

  • 2013/06/01 03:32:00

ccc

marchさんご報告ありがとうございます。
昨日までは特に不都合はなかったのですが、6/1ではおかしくなることが判明したので、とりあえず1)の変更部分を修正しました。
当日が土・日の場合は日にちが元々のカレンダーの色での表示になります。
ただまたおかしくなることがあるのかどうかは後日(例えば6/30とか)にならないとわかりません...(^_^;)

  • URL
  • 2013/06/01 14:33:00

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをひらがな3文字で入力してください(スパム対策)