---
title: Calendar
disable_feed: true
---

<noscript>
	This calendar works locally in your browser and requires JavaScript to remain serverless
</noscript>
<div>
	<label>
		Solar date:
		<input id="solar-date" type="date" />
	</label>
	<button id="nav-today">Today</button>
</div>
<div id="lunar-solar-cal">
	<div id="solar-cal">
		<div id="month-year-row">
			<div id="solar-month-vi" lang=vi></div>
			<div id="solar-year"></div>
			<div id="solar-month-en"></div>
		</div>
		<hr>
		<div id="day-area" lang=vi>
			<button id="nav-day-before">
				<span class="sr-only">Ngày trước</span>
			</button>
			<div>
				<div id="solar-day"></div>
				<div id="special-day-vi"></div>
			</div>
			<button id="nav-day-after">
				<span class="sr-only">Ngày tiếp theo</span>
			</button>
		</div>
		<hr>
		<div id="weekday-row">
			<div id="solar-weekday-en"></div>
			<div id="solar-weekday-vi" lang=vi></div>
			<div id="solar-weekday-zh" lang=zh></div>
		</div>
	</div>
	<hr>
	<div id="lunar-cal">
		<div id=lunar-cal-vi lang="vi">
			<div id="lunar-year-vi"></div>
			<div id="lunar-month-vi"></div>
			<div id="lunar-month-zodiac-vi"></div>
			<div id="lunar-day-zodiac-vi"></div>
			<div id="solar-term-vi"></div>
		</div>
		<div id="lunar-day"></div>
		<div id=lunar-cal-zh lang="zh">
			<div id="lunar-year-zh"></div>
			<div>
				<span id="lunar-month-zh"></span> ·
				<span id="lunar-month-zodiac-zh"></span>
			</div>
			<div id="lunar-day-zh"></div>
			<div id="lunar-day-zodiac-zh"></div>
			<div>
				<span id="solar-term-zh"></span>
				<span id="special-day-zh"></span>
			</div>
		</div>
	</div>
</div>
<script src="lunar.js"></script>