書式
calendarObj.setStyle(styleName, value)
calendarObj : カレンダーオブジェクト
styleName : スタイル名
value : 設定する値
説明
カレンダーのスタイルを指定するにはsetStyle()を使います。最初のパラメータには以下の表のスタイル名、2番目には設定する値を指定します。
スタイル名 | 内容 |
font_size | 文字サイズ(デフォルト:12px) |
frame_width | カレンダーの大きさ(デフォルト:150px) |
frame_color | カレンダーのフレームの色 |
day_bgcolo | 日付表示欄の背景色 |
month_colo | 「○年○月」表示部の文字色 |
month_hover_color | 前の月・次の月へのボタン選択中の文字色 |
month_hover_bgcolor | 前の月・次の月へのボタン選択中の背景色 |
weekday_color | 日付表示欄の月曜〜金曜の文字色 |
saturday_color | 日付表示欄の土曜の文字色 |
sunday_color | 日付表示欄の日曜の文字色 |
others_color | 日付表示欄の他の月の日の文字色 |
day_hover_bgcolor | 日付表示欄の日付選択中の背景色 |
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="jkl-calendar.js" charset="Shift_JIS"></script>
<script type="text/javascript"><!--
var calendarObj;
window.onload = function ()
{
calendarObj = new JKL.Calendar("calendar","aForm","dateVar");
calendarObj.setStyle("frame_color", "#0000ff");
calendarObj.setStyle("font_size", 9);
calendarObj.setStyle("day_hover_bgcolor","#ffdddd");
if ( ! calendarObj.getFormValue() ) calendarObj.setFormValue();
}
// --></script>
</head>
<body>
<h1>カレンダーのスタイルを指定する</h1>
<form id="aForm">
<input type="text" name="dateVar" id="dateVar" onClick="calendarObj.write()"
onChange="calendarObj.getFormValue(); calendarObj.hide();">
</form>
<div id="calendar"></div>
</body>
</html>