bar_calendar

calendarプラグイン （横列表示カレンダー）

Limitations

calendarプラグインを改造し、月間カレンダーのみ、年間カレンダーのみ、年月両方を任意に定義できるようにしたものです。

縱列表示は検討中。

スタイルシートは必ず（下記参照）指定して下さい。

Settings

以下の部分のように編集しただけですが、やり方によっては縦列表示も可能かと思います(検討中)

タグは編集次第でどの様にでも表示できます。

__DATA__
html month_head <div id="calendar"><div class="hor-cal">$prev_month_link <a href="$url" title="$monthname">$monthabbr</a>\n
html week_head \n
html noday \n
html day_link <span class="hor-cal-day"><a href="$url" title="$year/$month/$day editing.">$day</a></span>\n
html day_nolink <span class="hor-cal-day" title="$year/$month/$day no edit.">$day</span>\n
html this_day <span class="hor-cal-today"><a href="$url" class="hor-cal-today" title="$year/$month/$day it today.">$day</a></span>\n
html week_foot \n
html month_foot $next_month_link</div></div>\n
html prev_month_link <a href="$url" title="Prev to $year/$month">&#171;</a>
html next_month_link <a href="$url" title="Next to $year/$month">&#187;</a>
html prev_month_nolink &#171;
html next_month_nolink &#187;
html year_head <div id="calendar-year"><div class="hor-cal">$prev_year_link <a href="$url">$year</a> \n
html quarter_head \n
html month_link <span class="hor-cal-day"><a href="$url" title="$monthname">$monthabbr</a></span>\n
html month_nolink <span class="hor-cal-day" title="$monthname">$monthabbr</span>\n
html this_month <span class="hor-cal-today"><a href="$url" class="hor-cal-today" title="$monthname">$monthabbr</a></span>
html quarter_foot \n
html year_foot $next_year_link</div></div>\n
html prev_year_link <a href="$url">&#171;</a>
html next_year_link <a href="$url">&#187;</a>
html prev_year_nolink &#171;
html next_year_nolink &#187;
html calendar <div id="calendar-all">$calendar::month_calendar$calendar::year_calendar</div>
__END__

スタイルシートで表示を指定・変更出来ます。ご自分のサイトに合うように適宜修正してご利用下さい。

横長カレンダー

#calendar-all {
/*width:680px;*/
font-family:Arial, sans-serif;
font-size:11px;
margin-top:20px;
margin-bottom:30px;
margin-left:20px;
padding:0px;
font-weight:      bold;
}
#calendar {
font-family:Arial, sans-serif;
font-size:11px;
margin-top:10px;
margin-bottom:10px;
padding:0px;
font-weight:      bold;
}
#calendar-year {
font-family:Arial, sans-serif;
font-size:11px;
margin-top:10px;
margin-bottom:10px;
padding:0px;
font-weight:      bold;
}
div.hor-cal { 
/*padding : 0px 2px 0px 2px;
margin: 0px auto 2px auto;*/
/*text-align : center;*/
background : transparent;
color : #666;
}
span.hor-cal-day { 
padding : 0 0px;
margin : 0 0.2em;
}
span.hor-cal-today { 
color : #fff !important;
background-color: #990000;
padding : 0 0px;
margin : 0 0.2em;
font-weight:      bold;
}
span.hor-cal-today a {
background-color : #BDD6F5;
color : #666 !important;
}
span.hor-cal-today a:hover {
color : #fff !important;
background-color : #32619B;
}
span.hor-cal-today a:visited {
color : #666 !important;
}
span.hor-cal a {
color : #990000 !important;
background-color: transparent;
}
span.hor-cal a:visited {
color : #663333 !important;
background-color: transparent;
}
span.hor-cal a:hover {
color : #fff !important;
background-color: #990000;
}

縦長カレンダー

#calendar-all-hight {
/*height:220px;
float:left;*/
font-family:Arial, sans-serif;
font-size:11px;
margin-top:20px;
margin-bottom:30px;
margin-left:20px;
padding:0px;
font-weight:      bold;
}
#calendar-hight {
text-align:center;
font-family:Arial, sans-serif;
font-size:11px;
width:20px;
margin-top:10px;
margin-bottom:10px;
padding:0px;
font-weight:      bold;
position: absolute;
left: 10px;
top: 20px;
width: 15px;
font-size: 80%;
text-align: center;
letter-spacing: 0;
line-height: 1.7;
clear: left;
}
#calendar-year-hight {
text-align:center;
font-family:Arial, sans-serif;
font-size:11px;
width:20px;
margin-top:10px;
margin-bottom:10px;
padding:0px;
font-weight:      bold;
position: absolute;
left: 35px;
top: 20px;
width: 15px;
font-size: 80%;
text-align: center;
letter-spacing: 0;
line-height: 1.7;
clear: left;
}
div.hor-cal { 
/*padding : 0px 2px 0px 2px;
margin: 0px auto 2px auto;*/
/*text-align : center;*/
background : transparent;
color : #666;
}
span.hor-cal-day { 
padding : 0 0px;
margin : 0 0.2em;
}
span.hor-cal-today { 
color : #fff !important;
background-color: #990000;
padding : 0 0px;
margin : 0 0.2em;
font-weight:      bold;
}
span.hor-cal-today a {
background-color : #BDD6F5;
color : #666 !important;
}
span.hor-cal-today a:hover {
color : #fff !important;
background-color : #32619B;
}
span.hor-cal-today a:visited {
color : #666 !important;
}
span.hor-cal a {
color : #990000 !important;
background-color: transparent;
}
span.hor-cal a:visited {
color : #663333 !important;
background-color: transparent;
}
span.hor-cal a:hover {
color : #fff !important;
background-color: #990000;
}

Template components

$calendar::calendar
年月両方のカレンダーに置換される。
$calendar::month_calendar
月間カレンダーのみ置換される。
$calendar::year_calendar
年間カレンダーのみ置換される。

Download

http://northiland.upper.jp/archives/blugins/calendar

Last-Modified: 2006-11-21T18:34:39+09:00