カレンダーのスタイルを指定する

書式

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>