１．概要
暦目盛を表示するには、暦目盛レイヤ（HuTime.CalendarScaleLayer）を利用する。暦目盛レイヤはLayerクラスから派生ており、パネルへの配置など、その基本的な使用方法は他のレイヤと同じである。暦データはHuTimeプロジェクトの暦データサービスとの連携により、Web経由で取得される。このため、暦の種類を示す暦IDや日付等の書式指定の方法は、HuTimeプロジェクトの他の暦データサービスと同じである。
２．レイヤオブジェクトの生成
オブジェクトの生成時に、表示する目盛の暦IDを指定することができる。レイヤの高さや上下の余白の設定は、他のレイヤと同じである。
コンストラクタ
HuTime.CalendarScaleLayer([vBreadth [, vMarginTop [, vMarginBottom [, calendarId]]]])
- vBreadth
- 型：数値
- レイヤの高さ（単位：px）。
- vMarginTop
- 型：数値
- レイヤの上側の余白の大きさ（単位：px）。
- vMarginBottom
- 型：数値
- レイヤの下側の余白の大きさ（単位：px）。
- calendarId
- 型：文字列
- 表示する目盛の暦ID。暦IDの一覧は、http://datetime.hutime.org/calendar/から閲覧可能。省略した場合は、calendarIdはnullとなり、グレゴリオ暦（暦データをクライアント上で計算）が設定される。
３．パネルへの追加と表示
他のレイヤと同様に、暦目盛レイヤもPanelオブジェクトのappendLayerメソッドでパネルに追加する。描画はredrawメソッドのフローに沿って行われるが、暦データをWeb経由で取得するため、表示に時間差が生じる。ただし、calendarId=nullの場合とユリウス通日（calendarId="1.1"）は、クライアント上で暦データが計算されるため、表示の時間差は生じない。
暦目盛レイヤの表示の例（下記サンプルコード）。上段はグレゴリオ暦（calendarIdは省略）、中段はヒジュラ暦（イスラム暦）（calendarId = "103.1"）、下段は和暦（calendarId = "1001.1"）。図のように、１つのパネルに複数の暦目盛を配置することも可能である。
サンプルコード（実行例はこちら）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
<title>Sample Code</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
var ht = new HuTime();
var pnls = new HuTime.PanelCollection(200, 400);
ht.appendPanelCollection(pnls, document.getElementById("timeline"));
var pnl = new HuTime.TilePanel(200);
pnls.appendPanel(pnl);
var lyr0 = new HuTime.CalendarScaleLayer(70, 0, null);
pnl.appendLayer(lyr0);
var lyr1 = new HuTime.CalendarScaleLayer(70, 70, null, "103.1");
pnl.appendLayer(lyr1);
var lyr2 = new HuTime.CalendarScaleLayer(80, null, 0, "1001.1");
pnl.appendLayer(lyr2);
ht.redraw(HuTime.timeToJd(2016, 7, 1), HuTime.timeToJd(2017, 6, 30));
</script>
</body>
</html>
４．ラベルの書式設定
暦目盛のラベルの書式を、labelFormatプロパティにより変更することができる（calendarIdをnullまたは"1.1"に設定した場合を除く）。labelFormatプロパティは、年、月、日のどのラベルを設定するかで、下記のとおり細分化されている。組み合わせの書式は、暦や文化による年号、年、月、日を記す順序の違いを反映させるためのものである。年号が存在しない暦では、各書式に年号を含む必要はない。
| 設定対象 | プロパティ |
|---|---|
| 年号 | era |
| 年 | year |
| 月 | month |
| 日 | day |
| 年号-年の組み合わせ | toYear |
| 年号-月の組み合わせ | toMonrh |
| 年号-日の組み合わせ | toDay |
書式指定の方法は、HuTimeプロジェクトの他の暦データサービスと同様である。詳細は、http://www.hutime.jp/basicdata/calendar/format.htmlから参照できる。年、月、日のラベルの書式が省略された場合は、組み合わせによる書式の差分が設定される。
暦目盛レイヤのラベル書式の設定例（下記サンプルコード）。上段は既定の書式、中段は漢数字による表現である。下段は中段の設定をコピーしたものであるが、月の書式を別途設定している。中段では月ラベルの書式が省略されているため、年号-月の書式（"ggyK1年MK1月"）と年号-年の書式（"ggyK1年"）の差分（"MK1月"）が月ラベルの書式として設定される。この結果、月ラベルは、漢数字で表現される。一方、下段では、別途設定された書式（"MMM月"）に従って、月ラベルが表現される。
サンプルコード（実行例はこちら）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
<title>Sample Code</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
var ht = new HuTime();
var pnls = new HuTime.PanelCollection(200, 400);
ht.appendPanelCollection(pnls, document.getElementById("timeline"));
var pnl = new HuTime.TilePanel(200);
pnls.appendPanel(pnl);
var lyr0 = new HuTime.CalendarScaleLayer(70, 0, null, "1001.1");
pnl.appendLayer(lyr0);
var lyr1 = new HuTime.CalendarScaleLayer(70, 70, null, "1001.1");
lyr1.labelFormat.toYear = "ggyK1年";
lyr1.labelFormat.toMonth = "ggyK1年MK1月";
lyr1.labelFormat.toDay = "ggyK1年MK1月dK1日";
pnl.appendLayer(lyr1);
var lyr2 = new HuTime.CalendarScaleLayer(80, null, 0, "1001.1");
lyr2.labelFormat.toYear = lyr1.labelFormat.toYear;
lyr2.labelFormat.toMonth = lyr1.labelFormat.toMonth;
lyr2.labelFormat.toDay = lyr1.labelFormat.toDay;
lyr2.labelFormat.month = "MMM月";
pnl.appendLayer(lyr2);
ht.redraw(HuTime.timeToJd(2016, 7, 1), HuTime.timeToJd(2017, 6, 30));
</script>
</body>
</html>
