カレンダーコントロールのレイアウトについて解説します。
基本的な設定
カレンダーの最初の列に表示する曜日は、setFirstDayOfWeekメソッドで設定します。通常のカレンダーでは、日曜日または月曜日が最初の列に表示されます。なお、デフォルトでは、週の開始曜日はシステムから取得されます。
次のサンプルコードは、月曜日を最初の列に表示する方法を示します。
setCalendarDimensionsメソッドは、カレンダーコントロールに表示する月数を設定します。1から12までの数の月を１つのカレンダーコントロールに表示できます。行と列の月数を掛け合わせた数が12を超えることはできません。12を超えた場合は、エラーが発生します。
12か月分のカレンダーを表示している場合に、左上に配置する最初の月は、setFirstMonthInViewメソッドで設定します。setFirstMonthInViewメソッドをMonths.Default以外に設定すると、指定した月が左上に表示されます。 ナビゲータのスキップボタンをクリックするか、またはマウスでドラッグすると、ScrollRateメソッドの設定にかかわらず、常に１回の操作につき１年分のカレンダーがスクロールされます。コントロール内に表示される最初の月はどんな場合にも変更されません。
次のサンプルコードは、縦4×横3＝12ヶ月分のカレンダーを表示し、4月から表示を開始する方法を示します。
ヘッダ
カレンダーの対象年月を表示するヘッダ部では、次の項目を設定できます。
表示と非表示 （setShowHeaderメソッド）
次のサンプルコードは、ヘッダを設定する方法を示します。
隣接日
対象年月の前後のスペースについて、次の項目を設定できます。
隣接日の表示と非表示 （setShowTrailingメソッド）
空白行の表示と非表示 （setEmptyRowsメソッド）
今日の日付
カレンダーの下側の領域に今日の日付を表示することができます。表示した今日の日付をマウスでクリックすることでで今日の日付を選択することができます。今日の日付を表示する場合は、setShowTodayメソッドをtrueに設定します。
週番号
カレンダーの各月の左側に、通年で第何週に相当するか（週番号）を示すことができます。週番号を表示する場合は、setShowWeekNumberメソッドをtrueに設定します。
六曜
setShowRokuyouメソッドを使用して、日付領域の各日付に六曜を表示することができます。setShowRokuyouメソッドをRokuyous.Allに設定すると六曜はすべて表示されますが、特定の六曜のみ指定することも可能です。
次のサンプルコードでは、大安と仏滅のみ表示する方法を示します。
import '@mescius/inputman/CSS/gc.inputman-js.css';
import { InputMan } from '@mescius/inputman';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
const gcCalendar = new InputMan.GcCalendar(document.getElementById('gcCalendar'), {
// 最初の列の曜日を設定します。
firstDayOfWeek: InputMan.DayOfWeek.NotSet,
// 表示する月数を設定します。
calendarDimensions: { width: 1, height: 1 },
// 12ヶ月表示時に左上に配置する最初の月を設定します。
firstMonthInView: InputMan.Months.Default,
// ヘッダを表示します。
showHeader: true,
// 表示する六曜を設定します。
showRokuyou: InputMan.Rokuyou.None
});
document.getElementById('setFirstDayOfWeek').addEventListener('change', (e) => {
gcCalendar.setFirstDayOfWeek(dayOfWeeks[e.target.selectedIndex]);
});
document.getElementById('width').addEventListener('change', (e) => {
gcCalendar.setCalendarDimensions(Number(document.getElementById('width').value), Number(document.getElementById('height').value));
});
document.getElementById('height').addEventListener('change', (e) => {
gcCalendar.setCalendarDimensions(Number(document.getElementById('width').value), Number(document.getElementById('height').value));
});
document.getElementById('setFirstMonthInView').addEventListener('change', (e) => {
gcCalendar.setFirstMonthInView(months[e.target.selectedIndex]);
});
document.getElementById('setShowHeader').addEventListener('change', (e) => {
gcCalendar.setShowHeader(e.target.checked);
});
document.getElementById('setShowTrailing').addEventListener('change', (e) => {
gcCalendar.setShowTrailing(e.target.checked);
});
document.getElementById('setEmptyRows').addEventListener('change', (e) => {
gcCalendar.setEmptyRows(e.target.checked ? InputMan.EmptyRows.StartEmpty : InputMan.EmptyRows.AllAtEnd);
gcCalendar.setFocusDate(new Date(2015, 1, 1));
});
document.getElementById('setShowToday').addEventListener('change', (e) => {
gcCalendar.setShowToday(e.target.checked);
});
document.getElementById('setShowWeekNumber').addEventListener('change', (e) => {
gcCalendar.setShowWeekNumber(e.target.checked);
});
document.getElementById('showAllRokuyouBtn').addEventListener('click', () => {
showAllRokuyou(true);
});
document.getElementById('hideAllRokuyouBtn').addEventListener('click', () => {
showAllRokuyou(false);
});
document.getElementById('rokuyouList').addEventListener('click', (e) => {
const target = e.currentTarget;
var rokuyou = InputMan.Rokuyou.None;
for (var i = 0; i < target.children.length; i++) {
const checkbox = target.children[i].firstChild;
rokuyou |= (checkbox && checkbox.checked) ? rokuyous[i] : InputMan.Rokuyou.None;
}
gcCalendar.setShowRokuyou(rokuyou);
});
const showAllRokuyou = (show) => {
const rokuyousList = document.getElementById('rokuyouList');
for (var i = 0; i < rokuyousList.children.length; i++) {
const checkbox = rokuyousList.children[i].firstChild;
if (checkbox) {
checkbox.checked = show;
}
}
gcCalendar.setShowRokuyou(show ? InputMan.Rokuyou.All : InputMan.Rokuyou.None);
}
const dayOfWeeks = [
InputMan.DayOfWeek.NotSet,
InputMan.DayOfWeek.Sunday,
InputMan.DayOfWeek.Monday,
InputMan.DayOfWeek.Tuesday,
InputMan.DayOfWeek.Wednesday,
InputMan.DayOfWeek.Thursday,
InputMan.DayOfWeek.Friday,
InputMan.DayOfWeek.Saturday
];
const months = [
InputMan.Months.Default,
InputMan.Months.January,
InputMan.Months.February,
InputMan.Months.March,
InputMan.Months.April,
InputMan.Months.May,
InputMan.Months.June,
InputMan.Months.July,
InputMan.Months.August,
InputMan.Months.September,
InputMan.Months.October,
InputMan.Months.November,
InputMan.Months.December
];
const rokuyous = [
InputMan.Rokuyou.Senshou,
InputMan.Rokuyou.Tomobiki,
InputMan.Rokuyou.Senbu,
InputMan.Rokuyou.Butsumetsu,
InputMan.Rokuyou.Taian,
InputMan.Rokuyou.Shakkou
];
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>カレンダーコントロール - レイアウトの変更</title>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
window.onload = function() {
System.import('./src/app');
}
</script>
</head>
<body>
<div id="gcCalendar"></div>
<table class="sample">
<tr>
<th>最初の列の曜日</th>
<td>
<select id="setFirstDayOfWeek">
<option>システムの設定</option>
<option>日曜</option>
<option>月曜</option>
<option>火曜</option>
<option>水曜</option>
<option>木曜</option>
<option>金曜</option>
<option>土曜</option>
</select>
</td>
</tr>
<tr>
<th>複数月の表示</th>
<td>
<label>列数：<input type="number" id="width" value="1" min="1" style="width: 3rem;"></label>
<label>行数：<input type="number" id="height" value="1" min="1" style="width: 3rem;"></label>
</td>
</tr>
<tr>
<th>最初の月</th>
<td>
<select id="setFirstMonthInView">
<option>指定なし</option>
<option>1月</option>
<option>2月</option>
<option>3月</option>
<option>4月</option>
<option>5月</option>
<option>6月</option>
<option>7月</option>
<option>8月</option>
<option>9月</option>
<option>10月</option>
<option>11月</option>
<option>12月</option>
</select>
（12ヶ月表示時のみ）
</td>
</tr>
<tr>
<th>ヘッダの表示</th>
<td><label><input type="checkbox" checked id="setShowHeader">表示する</label></td>
</tr>
<tr>
<th>隣接日の表示</th>
<td><label><input type="checkbox" checked id="setShowTrailing">表示する</label></td>
</tr>
<tr>
<th>空白行の表示</th>
<td><label><input type="checkbox" id="setEmptyRows">表示する</label></td>
</tr>
<tr>
<th>今日の日付の表示</th>
<td><label><input type="checkbox" checked id="setShowToday">表示する</label></td>
</tr>
<tr>
<th>週番号</th>
<td><label><input type="checkbox" checked id="setShowWeekNumber">表示する</label></td>
</tr>
<tr>
<th>六曜</th>
<td>
<button id="showAllRokuyouBtn">すべて表示</button>
<button id="hideAllRokuyouBtn">すべて非表示</button><br>
<div id="rokuyouList">
<label><input type="checkbox" value="先勝">先勝</label>
<label><input type="checkbox" value="友引">友引</label>
<label><input type="checkbox" value="先負">先負</label>
<label><input type="checkbox" value="仏滅">仏滅</label>
<label><input type="checkbox" value="大安">大安</label>
<label><input type="checkbox" value="赤口">赤口</label>
</div>
</td>
</tr>
</table>
</body>
</html>
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
