yuru4c/2019.html

## 2019.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="cal.css">
	<title>カレンダー</title>
	<style type="text/css" media="screen">
		.cal {
			margin: auto;
			width: 1024px;
			transform-origin: 0 0;
			transform: scale(.5);
			opacity: .625;
		}
		.month {
			margin-bottom: 2em;
		}
	</style>
</head>
<body>
	<script type="text/javascript" src="cal.js"></script>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

## cal.css
.cal {
	font-family: sans-serif;
	font-size: 2em;
	line-height: 1;
}
.year {
	margin: auto;
	width: 2048px;
}

.month {
	padding-right: 0.5px;
	page-break-after: always;
}
.index {
	font-size: 2em;
}
.name:before {
	content: " ";
}

.month table {
	border-collapse: collapse;
}
.month th {
	padding-bottom: 8px;
	font-weight: normal;
}
.week th {
	padding-top: 12px;
	padding-right: 8px;
	color: green;
	text-align: right;
	vertical-align: top;
}

.date {
	position: relative;
	border: 1px solid #808080;
	width: 512px;
	height: 192px;
}
.number {
	position: absolute;
	top:  12px;
	left: 12px;
	font-size: 1.5em;
}

.info, .holiday, .lunar {
	position: absolute;
	font-size: 0.75em;
}
.info {
	top: calc(20px + 2em);
	left: 16px;
	color: #404040;
}
.holiday {
	top: 16px;
	left: calc(24px + 4ch);
}
.lunar {
	left:   12px;
	bottom: 12px;
}

th.sun, .sun .number, .isholiday .number, .holiday {
	color: red !important;
}
th.sat, .sat .number {
	color: blue;
}

.next .number, th.next {
	opacity: .375;
}
.next .info,
.next .holiday,
.next .lunar {
	display: none;
}

/* Lunar phase */
.lunar {
	border-radius: 50%;
	width:  1em;
	height: 1em;
	overflow: hidden;
}

.new, .wax, .full, .wane {
	border: 2px solid #404040;
}
.new, .wax, .wane {
	background-color: #404040;
}

.wax:after, .wane:after {
	content: "";
	display: block;
	background-color: white;
	width: 50%;
	height: 100%;
}
.wax:after {
	margin-left: 50%;
}

## cal.js
var createCal = (function ($) {

var monthNames = [
	'睦月', '如月', '弥生', '卯月', '皐月', '水無月',
	'文月', '葉月', '長月', '神無月', '霜月', '師走'
];
var dayNames = ['日', '月', '火', '水', '木', '金', '土'];
var rokuyoNames = ['大安', '赤口', '先勝', '友引', '先負', '仏滅'];

var separator = '-';

var newMoon = new String('new');
var lunarNames = {
	'朔': newMoon,
	'上': new String('wax'),
	'望': new String('full'),
	'下': new String('wane')
};

var d = new Date(0);
var oneDay = d.setDate(d.getDate() + 1);
var oneWeek = oneDay * 7;

function addClass(element, name) {
	if (name) {
		var c = element.className;
		element.className = c ? c + ' ' + name : name;
	}
}
function element(tagName, className) {
	var element = $.createElement(tagName);
	addClass(element, className);
	return element;
}

function setDay(element, day) {
	switch (day) {
		case 0: addClass(element, 'sun'); break;
		case 6: addClass(element, 'sat'); break;
	}
}

function Rokuyo(kyureki) {
	var args = kyureki.first.split(separator);
	this.month = +args[0];
	this.date  = +args[1];
	this.leap = kyureki.leap;
	this.skip = true;
}
Rokuyo.prototype.next = function (lunar) {
	if (this.skip) this.skip = false;
	else {
		if (lunar == newMoon) {
			if (this.month == this.leap) {
				this.leap = 0;
			} else {
				this.month = this.month % 12 + 1;
			}
			this.date = 0;
		}
		this.date++;
	}
	return rokuyoNames[(this.month + this.date) % 6];
};

function createYear(y, rokuyo, koyomi) {
	var div = element('div', 'year');
	for (var m = 0; m < 12; m++) {
		div.appendChild(createMonth(y, m, rokuyo, koyomi));
	}
	return div;
}

function createMonth(y, m, rokuyo, koyomi) {
	var div = element('div', 'month');
	var p = element('p');

	var index = element('span', 'index');
	var name  = element('span', 'name');
	index.appendChild($.createTextNode(m + 1));
	name .appendChild($.createTextNode(monthNames[m]));

	p.appendChild(index);
	p.appendChild(name);
	div.appendChild(p);

	var table = element('table');
	var firstDay = koyomi.firstDay;

	var tr = element('tr');
	tr.appendChild(element('th'));

	for (var i = 0; i < 7; i++) {
		var th = element('th');
		var d = (i + firstDay) % 7;
		th.appendChild($.createTextNode(dayNames[d]));
		setDay(th, d);
		tr.appendChild(th);
	}
	table.appendChild(tr);

	var mDate = new Date(y, m);
	var nDate = new Date(y, m + 1);
	var day = (mDate.getDay() - firstDay + 7) % 7;
	var weeks = ((nDate - mDate) / oneDay + day) / 7;

	for (var w = 0; w < weeks; w++) {
		table.appendChild(createWeek(y, m, w, day, rokuyo, koyomi));
	}
	div.appendChild(table);
	return div;
}

function createWeek(y, m, w, day, rokuyo, koyomi) {
	var tr = element('tr', 'week');
	var d = 1 + 7 * w - day;

	var th = element('th');
	var rule = koyomi.weekRule;
	var wd = new Date(y, m, d - (rule || 1) + 7);
	var wy = (rule || w <= 0 ? wd : new Date(y, m, d))
		.getFullYear();
	var weeknum = -~((wd - new Date(wy, 0)) / oneWeek);

	if (wy != y) {
		addClass(th, 'next');
	}
	th.appendChild($.createTextNode(
		(weeknum < 10 ? '0' : '') + weeknum));
	tr.appendChild(th);

	for (var weekend = d + 7; d < weekend; d++) {
		tr.appendChild(createDate(y, m, d, rokuyo, koyomi));
	}
	return tr;
}

function createDate(y, m, d, rokuyo, koyomi) {
	var td = element('td', 'date');
	var dDate = new Date(y, m, d);
	var ny = dDate.getFullYear() != y;
	var dm = dDate.getMonth();
	var dd = dDate.getDate();

	setDay(td, dDate.getDay());
	if (ny ||  dm != m) {
		addClass(td, 'next');
		rokuyo = null;
	}

	var key = dm + 1 + separator + dd;
	if (ny) {
		key = separator + key;
	}
	var kh = koyomi.holidays[key];
	var ks = koyomi.solar[key];
	var kl = koyomi.lunar[key];

	var name = kl && lunarNames[kl];
	var data = rokuyo ? rokuyo.next(name) : '';
	if (ks) {
		data += data ? ' ' + ks : ks;
	}

	var div     = element('div',  'number');
	var info    = element('span', 'info');
	var holiday = element('span', 'holiday');
	var lunar   = element('div',  'lunar');

	div .appendChild($.createTextNode(dd));
	info.appendChild($.createTextNode(data));
	if (kh) {
		holiday.appendChild($.createTextNode(kh));
		addClass(td, 'isholiday');
	}
	addClass(lunar, name);

	td.appendChild(div);
	td.appendChild(info);
	td.appendChild(holiday);
	td.appendChild(lunar);
	return td;
}

return function (year, koyomi) {
	var cal = element('div', 'cal');
	var rokuyo = koyomi.kyureki == null ?
		null : new Rokuyo(koyomi.kyureki);
	cal.appendChild(createYear(year, rokuyo, koyomi));
	return cal;
};

})(document);

## script.js
(function ($) {

var holidays = {
	"1-1"  : "元日",
	"1-14" : "成人の日",
	"2-11" : "建国記念の日",
	"3-21" : "春分の日",
	"4-29" : "昭和の日",
	"5-3"  : "憲法記念日",
	"5-4"  : "みどりの日",
	"5-5"  : "こどもの日",
	"7-15" : "海の日",
	"8-11" : "山の日",
	"9-16" : "敬老の日",
	"9-23" : "秋分の日",
	"10-14": "体育の日",
	"11-3" : "文化の日",
	"11-23": "勤労感謝の日",
	"5-6"  : "振替休日",
	"8-12" : "振替休日",
	"11-4" : "振替休日",
	"4-30" : "退位の日",
	"5-1"  : "即位の日",
	"10-22": "即位礼正殿の儀",
	"12-23": "平成の天皇誕生日",
	"-1-1" : "元日"
};
var solar = {
	"1-6"  : "小寒",
	"1-20" : "大寒",
	"2-4"  : "立春",
	"2-19" : "雨水",
	"3-6"  : "啓蟄",
	"3-21" : "春分",
	"4-5"  : "清明",
	"4-20" : "穀雨",
	"5-6"  : "立夏",
	"5-21" : "小満",
	"6-6"  : "芒種",
	"6-22" : "夏至",
	"7-7"  : "小暑",
	"7-23" : "大暑",
	"8-8"  : "立秋",
	"8-23" : "処暑",
	"9-8"  : "白露",
	"9-23" : "秋分",
	"10-8" : "寒露",
	"10-24": "霜降",
	"11-8" : "立冬",
	"11-22": "小雪",
	"12-7" : "大雪",
	"12-22": "冬至",

	"1-17" : "土用",
	"2-3"  : "節分",
	"3-18" : "彼岸",
	"4-17" : "土用",
	"5-2"  : "八十八夜",
	"6-11" : "入梅",
	"7-2"  : "半夏生",
	"7-20" : "土用",
	"9-1"  : "二百十日",
	"9-20" : "彼岸",
	"10-21": "土用"
};
var lunar = {
	"1-6"  : "朔",
	"1-14" : "上",
	"1-21" : "望",
	"1-28" : "下",
	"2-5"  : "朔",
	"2-13" : "上",
	"2-20" : "望",
	"2-26" : "下",
	"3-7"  : "朔",
	"3-14" : "上",
	"3-21" : "望",
	"3-28" : "下",
	"4-5"  : "朔",
	"4-13" : "上",
	"4-19" : "望",
	"4-27" : "下",
	"5-5"  : "朔",
	"5-12" : "上",
	"5-19" : "望",
	"5-27" : "下",
	"6-3"  : "朔",
	"6-10" : "上",
	"6-17" : "望",
	"6-25" : "下",
	"7-3"  : "朔",
	"7-9"  : "上",
	"7-17" : "望",
	"7-25" : "下",
	"8-1"  : "朔",
	"8-8"  : "上",
	"8-15" : "望",
	"8-23" : "下",
	"8-30" : "朔",
	"9-6"  : "上",
	"9-14" : "望",
	"9-22" : "下",
	"9-29" : "朔",
	"10-6" : "上",
	"10-14": "望",
	"10-21": "下",
	"10-28": "朔",
	"11-4" : "上",
	"11-12": "望",
	"11-20": "下",
	"11-27": "朔",
	"12-4" : "上",
	"12-12": "望",
	"12-19": "下",
	"12-26": "朔"
};
/*
	firstDay: 週初日の曜日
		0~6 - 日曜日～土曜日
	weekRule: 週番号の規則
		 0  - 元日から大晦日まで
		1~7 - その日を含む週から
	kyureki: 六曜用の旧暦
		null    - 無効
		Kyureki - 有効

	Kyureki {
		first: 元日の旧暦表示
		leap : 閏月
			 0   - なし
			1~12 - 指定の月
	}
*/
var cal = createCal(2019, {
	firstDay: 0,
	weekRule: 0,
	holidays: holidays,
	solar: solar,
	lunar: lunar,
	kyureki: {first: '11-26', leap: 0}
});

$.body.appendChild(cal);

})(document);
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html lang="ja-JP">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="cal.css">
	<title>カレンダー</title>
	<style type="text/css" media="screen">
	.cal {
	margin: auto;
	width: 1024px;
	transform-origin: 0 0;
	transform: scale(.5);
	opacity: .625;
	}
	.month {
	margin-bottom: 2em;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript" src="cal.js"></script>
	<script type="text/javascript" src="script.js"></script>
	</body>
	</html>
	.cal {
	font-family: sans-serif;
	font-size: 2em;
	line-height: 1;
	}
	.year {
	margin: auto;
	width: 2048px;
	}

	.month {
	padding-right: 0.5px;
	page-break-after: always;
	}
	.index {
	font-size: 2em;
	}
	.name:before {
	content: " ";
	}

	.month table {
	border-collapse: collapse;
	}
	.month th {
	padding-bottom: 8px;
	font-weight: normal;
	}
	.week th {
	padding-top: 12px;
	padding-right: 8px;
	color: green;
	text-align: right;
	vertical-align: top;
	}

	.date {
	position: relative;
	border: 1px solid #808080;
	width: 512px;
	height: 192px;
	}
	.number {
	position: absolute;
	top: 12px;
	left: 12px;
	font-size: 1.5em;
	}

	.info, .holiday, .lunar {
	position: absolute;
	font-size: 0.75em;
	}
	.info {
	top: calc(20px + 2em);
	left: 16px;
	color: #404040;
	}
	.holiday {
	top: 16px;
	left: calc(24px + 4ch);
	}
	.lunar {
	left: 12px;
	bottom: 12px;
	}

	th.sun, .sun .number, .isholiday .number, .holiday {
	color: red !important;
	}
	th.sat, .sat .number {
	color: blue;
	}

	.next .number, th.next {
	opacity: .375;
	}
	.next .info,
	.next .holiday,
	.next .lunar {
	display: none;
	}

	/* Lunar phase */
	.lunar {
	border-radius: 50%;
	width: 1em;
	height: 1em;
	overflow: hidden;
	}

	.new, .wax, .full, .wane {
	border: 2px solid #404040;
	}
	.new, .wax, .wane {
	background-color: #404040;
	}

	.wax:after, .wane:after {
	content: "";
	display: block;
	background-color: white;
	width: 50%;
	height: 100%;
	}
	.wax:after {
	margin-left: 50%;
	}
	var createCal = (function ($) {

	var monthNames = [
	'睦月', '如月', '弥生', '卯月', '皐月', '水無月',
	'文月', '葉月', '長月', '神無月', '霜月', '師走'
	];
	var dayNames = ['日', '月', '火', '水', '木', '金', '土'];
	var rokuyoNames = ['大安', '赤口', '先勝', '友引', '先負', '仏滅'];

	var separator = '-';

	var newMoon = new String('new');
	var lunarNames = {
	'朔': newMoon,
	'上': new String('wax'),
	'望': new String('full'),
	'下': new String('wane')
	};

	var d = new Date(0);
	var oneDay = d.setDate(d.getDate() + 1);
	var oneWeek = oneDay * 7;

	function addClass(element, name) {
	if (name) {
	var c = element.className;
	element.className = c ? c + ' ' + name : name;
	}
	}
	function element(tagName, className) {
	var element = $.createElement(tagName);
	addClass(element, className);
	return element;
	}

	function setDay(element, day) {
	switch (day) {
	case 0: addClass(element, 'sun'); break;
	case 6: addClass(element, 'sat'); break;
	}
	}

	function Rokuyo(kyureki) {
	var args = kyureki.first.split(separator);
	this.month = +args[0];
	this.date = +args[1];
	this.leap = kyureki.leap;
	this.skip = true;
	}
	Rokuyo.prototype.next = function (lunar) {
	if (this.skip) this.skip = false;
	else {
	if (lunar == newMoon) {
	if (this.month == this.leap) {
	this.leap = 0;
	} else {
	this.month = this.month % 12 + 1;
	}
	this.date = 0;
	}
	this.date++;
	}
	return rokuyoNames[(this.month + this.date) % 6];
	};

	function createYear(y, rokuyo, koyomi) {
	var div = element('div', 'year');
	for (var m = 0; m < 12; m++) {
	div.appendChild(createMonth(y, m, rokuyo, koyomi));
	}
	return div;
	}

	function createMonth(y, m, rokuyo, koyomi) {
	var div = element('div', 'month');
	var p = element('p');

	var index = element('span', 'index');
	var name = element('span', 'name');
	index.appendChild($.createTextNode(m + 1));
	name .appendChild($.createTextNode(monthNames[m]));

	p.appendChild(index);
	p.appendChild(name);
	div.appendChild(p);

	var table = element('table');
	var firstDay = koyomi.firstDay;

	var tr = element('tr');
	tr.appendChild(element('th'));

	for (var i = 0; i < 7; i++) {
	var th = element('th');
	var d = (i + firstDay) % 7;
	th.appendChild($.createTextNode(dayNames[d]));
	setDay(th, d);
	tr.appendChild(th);
	}
	table.appendChild(tr);

	var mDate = new Date(y, m);
	var nDate = new Date(y, m + 1);
	var day = (mDate.getDay() - firstDay + 7) % 7;
	var weeks = ((nDate - mDate) / oneDay + day) / 7;

	for (var w = 0; w < weeks; w++) {
	table.appendChild(createWeek(y, m, w, day, rokuyo, koyomi));
	}
	div.appendChild(table);
	return div;
	}

	function createWeek(y, m, w, day, rokuyo, koyomi) {
	var tr = element('tr', 'week');
	var d = 1 + 7 * w - day;

	var th = element('th');
	var rule = koyomi.weekRule;
	var wd = new Date(y, m, d - (rule \|\| 1) + 7);
	var wy = (rule \|\| w <= 0 ? wd : new Date(y, m, d))
	.getFullYear();
	var weeknum = -~((wd - new Date(wy, 0)) / oneWeek);

	if (wy != y) {
	addClass(th, 'next');
	}
	th.appendChild($.createTextNode(
	(weeknum < 10 ? '0' : '') + weeknum));
	tr.appendChild(th);

	for (var weekend = d + 7; d < weekend; d++) {
	tr.appendChild(createDate(y, m, d, rokuyo, koyomi));
	}
	return tr;
	}

	function createDate(y, m, d, rokuyo, koyomi) {
	var td = element('td', 'date');
	var dDate = new Date(y, m, d);
	var ny = dDate.getFullYear() != y;
	var dm = dDate.getMonth();
	var dd = dDate.getDate();

	setDay(td, dDate.getDay());
	if (ny \|\| dm != m) {
	addClass(td, 'next');
	rokuyo = null;
	}

	var key = dm + 1 + separator + dd;
	if (ny) {
	key = separator + key;
	}
	var kh = koyomi.holidays[key];
	var ks = koyomi.solar[key];
	var kl = koyomi.lunar[key];

	var name = kl && lunarNames[kl];
	var data = rokuyo ? rokuyo.next(name) : '';
	if (ks) {
	data += data ? ' ' + ks : ks;
	}

	var div = element('div', 'number');
	var info = element('span', 'info');
	var holiday = element('span', 'holiday');
	var lunar = element('div', 'lunar');

	div .appendChild($.createTextNode(dd));
	info.appendChild($.createTextNode(data));
	if (kh) {
	holiday.appendChild($.createTextNode(kh));
	addClass(td, 'isholiday');
	}
	addClass(lunar, name);

	td.appendChild(div);
	td.appendChild(info);
	td.appendChild(holiday);
	td.appendChild(lunar);
	return td;
	}

	return function (year, koyomi) {
	var cal = element('div', 'cal');
	var rokuyo = koyomi.kyureki == null ?
	null : new Rokuyo(koyomi.kyureki);
	cal.appendChild(createYear(year, rokuyo, koyomi));
	return cal;
	};

	})(document);
	(function ($) {

	var holidays = {
	"1-1" : "元日",
	"1-14" : "成人の日",
	"2-11" : "建国記念の日",
	"3-21" : "春分の日",
	"4-29" : "昭和の日",
	"5-3" : "憲法記念日",
	"5-4" : "みどりの日",
	"5-5" : "こどもの日",
	"7-15" : "海の日",
	"8-11" : "山の日",
	"9-16" : "敬老の日",
	"9-23" : "秋分の日",
	"10-14": "体育の日",
	"11-3" : "文化の日",
	"11-23": "勤労感謝の日",
	"5-6" : "振替休日",
	"8-12" : "振替休日",
	"11-4" : "振替休日",
	"4-30" : "退位の日",
	"5-1" : "即位の日",
	"10-22": "即位礼正殿の儀",
	"12-23": "平成の天皇誕生日",
	"-1-1" : "元日"
	};
	var solar = {
	"1-6" : "小寒",
	"1-20" : "大寒",
	"2-4" : "立春",
	"2-19" : "雨水",
	"3-6" : "啓蟄",
	"3-21" : "春分",
	"4-5" : "清明",
	"4-20" : "穀雨",
	"5-6" : "立夏",
	"5-21" : "小満",
	"6-6" : "芒種",
	"6-22" : "夏至",
	"7-7" : "小暑",
	"7-23" : "大暑",
	"8-8" : "立秋",
	"8-23" : "処暑",
	"9-8" : "白露",
	"9-23" : "秋分",
	"10-8" : "寒露",
	"10-24": "霜降",
	"11-8" : "立冬",
	"11-22": "小雪",
	"12-7" : "大雪",
	"12-22": "冬至",

	"1-17" : "土用",
	"2-3" : "節分",
	"3-18" : "彼岸",
	"4-17" : "土用",
	"5-2" : "八十八夜",
	"6-11" : "入梅",
	"7-2" : "半夏生",
	"7-20" : "土用",
	"9-1" : "二百十日",
	"9-20" : "彼岸",
	"10-21": "土用"
	};
	var lunar = {
	"1-6" : "朔",
	"1-14" : "上",
	"1-21" : "望",
	"1-28" : "下",
	"2-5" : "朔",
	"2-13" : "上",
	"2-20" : "望",
	"2-26" : "下",
	"3-7" : "朔",
	"3-14" : "上",
	"3-21" : "望",
	"3-28" : "下",
	"4-5" : "朔",
	"4-13" : "上",
	"4-19" : "望",
	"4-27" : "下",
	"5-5" : "朔",
	"5-12" : "上",
	"5-19" : "望",
	"5-27" : "下",
	"6-3" : "朔",
	"6-10" : "上",
	"6-17" : "望",
	"6-25" : "下",
	"7-3" : "朔",
	"7-9" : "上",
	"7-17" : "望",
	"7-25" : "下",
	"8-1" : "朔",
	"8-8" : "上",
	"8-15" : "望",
	"8-23" : "下",
	"8-30" : "朔",
	"9-6" : "上",
	"9-14" : "望",
	"9-22" : "下",
	"9-29" : "朔",
	"10-6" : "上",
	"10-14": "望",
	"10-21": "下",
	"10-28": "朔",
	"11-4" : "上",
	"11-12": "望",
	"11-20": "下",
	"11-27": "朔",
	"12-4" : "上",
	"12-12": "望",
	"12-19": "下",
	"12-26": "朔"
	};
	/*
	firstDay: 週初日の曜日
	0~6 - 日曜日～土曜日
	weekRule: 週番号の規則
	0 - 元日から大晦日まで
	1~7 - その日を含む週から
	kyureki: 六曜用の旧暦
	null - 無効
	Kyureki - 有効

	Kyureki {
	first: 元日の旧暦表示
	leap : 閏月
	0 - なし
	1~12 - 指定の月
	}
	*/
	var cal = createCal(2019, {
	firstDay: 0,
	weekRule: 0,
	holidays: holidays,
	solar: solar,
	lunar: lunar,
	kyureki: {first: '11-26', leap: 0}
	});

	$.body.appendChild(cal);

	})(document);