1. Overview
A calendar scale layer (HuTime.CalendarScaleLayer) is used to display a calendar scale. The calendar scale layer, a class derived from the Layer class, can basically be used like other layers, for example, when you put it on a panel. Calendar data is obtained via the Web in cooperation with the calendar data service of the HuTime Project. Thus, calendar IDs for calendar types, dates, and other data can be formatted in the same way in other calendar data services in the HuTime Project.
2. Creating a Layer Object
You can specify a calendar ID for the scale to be displayed when creating an object. The height, as well as the top and bottom margins, of the layer can be specified similarly to other layers.
Constructor
HuTime.CalendarScaleLayer([vBreadth [, vMarginTop [, vMarginBottom [, calendarId]]]])
- vBreadth
- Type: Number
- The height of the layer (in pixels).
- vMarginTop
- Type: Number
- The size of the top margin of the layer (in pixels).
- vMarginBottom
- Type: Number
- The size of the bottom margin of the layer (in pixels).
- calendarId
- Type: String
- The calendar ID of the scale to be displayed. For the list of calendar IDs, visit http://datetime.hutime.org/calendar/. If omitted, meaning that calendarId has the null value, it is set to the Gregorian calendar (and the calendar data is computed on the client).
3. Adding a Layer to the Panel and Displaying
Just like other layers, you can add a calendar scale layer to a panel using the appendLayer method of a Panel object. The object is drawn according to the sequence of the redraw method, but there is a time difference when the layer is drawn because the calendar data is obtained via the Web. However, if calendarId is set to null or "1.1" (Julian Date), the calendar data is computed on the client, causing no time difference.
An example of displaying calendar scale layers (see the sample code below). The top layer is displayed in the Gregorian calendar (calendarId omitted), the middle layer in the Hijri calendar (Islamic calendar) (calendarId = "103.1"), and the bottom layer in the Japanese calendar (calendarId = "1001.1"). As shown in the figure, multiple calendar scales can be placed on a single panel.
Sample code (click here for a running example):
<!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>
4. Formatting Labels
You can format a label on a calendar scale by using the labelFormat property (except for the case where calendarId is set to null or "1.1"). The labelFormat property has more detailed properties depending on which label, such as year, month, or day, is specified, as shown in the list below. The combined formats are provided to reflect differences in the order of the name of an era, year, month, and day for different calendars or cultures. If a calendar does not have the era names, each format does not have to contain them.
| Setting targets | Properties |
|---|---|
| Era name | era |
| Year | year |
| Month | month |
| Day | day |
| Combination of the era name and year | toYear |
| Combination of the era name and month | toMonrh |
| Combination of the era name and day | toDay |
A calendar scale can be formatted in the same way in other calendar data services in the HuTime Project. For details, visit http://www.hutime.jp/basicdata/calendar/format.html. If the formats for the year, month, or day labels are omitted, the differentials in the combined format are applied.
An example of formatting labels on calendar scale layers (see the sample code below). The top layer uses the default format, and the middle layer uses a format of Chinese characters for numbers. The bottom layer uses a format copied from the middle layer, but specifies the separate format for month. In the middle layer, the format for the month label is not specified. Thus, the differential between the format of the combination of the era name and month ("ggyK1 year MK1 month") and the format of the combination of the era name and year ("ggyK1 year") is set as the format of the month label. As a result, numbers are represented as the month labels in Chinese characters. On the other hand, the month label is represented according to the format specified separately ("MMM month") in the bottom layer.
Sample code (click here for a running example):
<!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>
