カレンダーコントロールで表示される祝日の設定は定義ファイルに保存して利用することができます。保存した定義ファイルは、他のプロジェクトやユーザーなどで再利用が可能です。
祝日の定義ファイル
祝日定義ファイルは、休日と休日スタイルが定義されたXMLファイルです。カレンダーコントロールでこの定義ファイルをインポートすることで、簡単に祝日を設定することができます。
インポート方法
祝日定義ファイルをインポートするには、loadHolidayFromUrlメソッドを使用します。第1引数に定義ファイルのパス、第2引数に文字エンコーディング（省略可能）を指定します。
次のサンプルコードは、祝日定義ファイルHoliday.xmlをUTF-8エンコーディングでカレンダーコントロール（gcCalendar）にインポートする例です。
なお、InputManJSには、サンプルとして国民の祝日が予め登録された休日定義ファイルを製品ヘルプよりダウンロードできます。サンプルの祝日定義ファイルには、次の注意点があります。
春分の日と秋分の日について
定義ファイルに登録されている春分の日と秋分の日は1950年から2099年まで登録されています。また、これらの日付は天文学に基づく計算から算出されていますが、実際の祝日とは異なる可能性があります。春分の日と秋分の日は、毎年２月に翌年分が閣議決定され、官報によって公布されます。
ハッピーマンデーについて
成人の日、敬老の日は、祝日改正法に基づいた日付で登録されています。よって、法律改正前の暦については、成人の日、敬老の日が異なります。
天皇の即位の日、即位礼正殿の儀の行われる日について
天皇即位にともない、2019年5月1日と2019年10月22日は祝日となります。また祝日法第3条第3項により、2019年4月30日と2019年5月2日も休日となります。定義ファイルには天皇即位に関連した祝日は臨時休業日(ForceHolyday)で登録されています。
天皇誕生日について
天皇即位にあわせ、2020年より天皇誕生日が変更となります。定義ファイルには1989年から2018年までの天皇誕生日を12月23日、2020年以降は2月23日として臨時休業日(ForceHolyday)で登録されています。
海の日、体育の日（スポーツの日）について
2020年の東京オリンピック／東京パラリンピックのため、2020年の海の日と体育の日が変更されます。また2020年以降は体育の日は「スポーツの日」に名称変更になります。これらの対応のため、海の日と体育の日（スポーツの日）は臨時休業日(ForceHolyday)で登録されています。
山の日について
山の日は2016年以降に施行されるため、定義ファイルには2016年から2099年まで登録されています。
import '@mescius/inputman/CSS/gc.inputman-js.css';
import './styles.css';
import { InputMan } from '@mescius/inputman';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
const gcCalendar = new InputMan.GcCalendar(document.getElementById('gcCalendar'));
gcCalendar.loadHolidayFromUrl('./src/Holiday.xml', {
encoding: 'utf-8',
});
<!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>
</body>
</html>
/* 休日のスタイル */
[calendar-holiday-type] {
color: red;
}
/* 休日のスタイル */
[gcim-control-appearance="modern"] [calendar-holiday-type] {
color: red;
}
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',
'@mescius/inputman.richtexteditor': 'npm:@mescius/inputman.richtexteditor/index.js',
"@mescius/inputman.richtexteditor/CSS": "npm:@mescius/inputman.richtexteditor/CSS",
'@mescius/inputman.richtexteditor/JS/plugins/advlist': 'npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/all': 'npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/autosave': 'npm:@mescius/inputman.richtexteditor/JS/plugins/autosave/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/charmap': 'npm:@mescius/inputman.richtexteditor/JS/plugins/charmap/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/directionality': 'npm:@mescius/inputman.richtexteditor/JS/plugins/directionality/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/emoticons': 'npm:@mescius/inputman.richtexteditor/JS/plugins/emoticons/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/fullscreen': 'npm:@mescius/inputman.richtexteditor/JS/plugins/fullscreen/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/htmlcode': 'npm:@mescius/inputman.richtexteditor/JS/plugins/htmlcode/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/image': 'npm:@mescius/inputman.richtexteditor/JS/plugins/image/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/link': 'npm:@mescius/inputman.richtexteditor/JS/plugins/link/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/lists': 'npm:@mescius/inputman.richtexteditor/JS/plugins/lists/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/media': 'npm:@mescius/inputman.richtexteditor/JS/plugins/media/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/pagebreak': 'npm:@mescius/inputman.richtexteditor/JS/plugins/pagebreak/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/preview': 'npm:@mescius/inputman.richtexteditor/JS/plugins/preview/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/save': 'npm:@mescius/inputman.richtexteditor/JS/plugins/save/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/searchreplace': 'npm:@mescius/inputman.richtexteditor/JS/plugins/searchreplace/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/table': 'npm:@mescius/inputman.richtexteditor/JS/plugins/table/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/template': 'npm:@mescius/inputman.richtexteditor/JS/plugins/template/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/wordcount': 'npm:@mescius/inputman.richtexteditor/JS/plugins/wordcount/plugin.js',
'@mescius/inputman.comment': 'npm:@mescius/inputman.comment/index.js',
'@mescius/inputman.comment/CSS': 'npm:@mescius/inputman.comment/CSS',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js',
'@mescius/spread-sheets/styles': 'npm:@mescius/spread-sheets/styles',
'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'
},
}
});
