diff options
Diffstat (limited to 'content')
| -rw-r--r-- | content/cal/_index.html | 37 | ||||
| -rw-r--r-- | content/cal/lunar.js | 83 |
2 files changed, 86 insertions, 34 deletions
diff --git a/content/cal/_index.html b/content/cal/_index.html index 1d078d6..876897d 100644 --- a/content/cal/_index.html +++ b/content/cal/_index.html @@ -12,26 +12,31 @@ disable_feed: true Solar date: <input id="solar-date" type="date" /> </label> - <label> - Timezone offset: - <select id="timezone-offset"> - <option value=7>UTC+7 (Vietnam)</option> - <option value=8>UTC+8 (China)</option> - <option value=9>UTC+9 (Japan/Korea)</option> - </select> - </label> </div> <div id="solar-cal"> - <div id="solar-year"></div> - <div id="solar-month"></div> + <div id="month-year-row"> + <div id="solar-month-vi"></div> + <div id="solar-year"></div> + <div id="solar-month-en"></div> + </div> <div id="solar-day"></div> - <div id="solar-weekday"></div> + <div id="weekday-row"> + <div id="solar-weekday-vi"></div> + <div id="solar-weekday-en"></div> + </div> </div> <div id="lunar-cal"> - <div id="lunar-year"></div> - <div id="lunar-month"></div> - <div id="lunar-day"></div> + <div id=lunar-cal-vi> + <div id="lunar-year-vi"></div> + <div id="lunar-month-vi"></div> + <div id="lunar-day-vi"></div> + </div> + <div id=lunar-cal-zh> + <div id="lunar-year-zh"></div> + <div id="lunar-month-zh"></div> + <div id="lunar-day-zh"></div> + <div id="solar-weekday-zh"></div> + </div> </div> </div> -<script src="lunar.js"> -</script> +<script src="lunar.js"></script> diff --git a/content/cal/lunar.js b/content/cal/lunar.js index ce4434f..cfd15a6 100644 --- a/content/cal/lunar.js +++ b/content/cal/lunar.js @@ -162,7 +162,41 @@ function convertSolarToLunar(date, tzOffset) { year: lunarYear, month: lunarMonth, day: lunarDay, - isLeap: isLeapMonth + isLeap: isLeapMonth, + jd: jd + } +} + +CAN_VI = ['Giáp', 'Ất', 'Bính', 'Đinh', 'Mậu', 'Kỷ', 'Canh', 'Tân', 'Nhâm', 'Quý'] +CAN_ZH = [] +CHI_VI = ['Tý', 'Sửu', 'Dần', 'Mão', 'Thìn', 'Tỵ', 'Ngọ', 'Mùi', 'Thân', 'Dậu', 'Tuất', 'Hợi'] +CHI_ZH = [] + +// Get can/chi of a lunar date +function getZodiac({year, month, day, jd}) { + let yearZodiac = { + can: (year + 6) % 10, + chi: (year + 8) % 12 + } + let monthZodiac = { + can: (year * 12 + month + 3) % 10, + chi: (month + 1) % 12 + } + let dayZodiac = { + can: (jd + 9) % 10, + chi: (jd + 1) % 12 + } + return {yearZodiac, monthZodiac, dayZodiac} +} + +function getZodiacText(zodiac, lang) { + switch (lang) { + case "vi": + return CAN_VI[zodiac.can] + " " + CHI_VI[zodiac.chi] + case "zh": + return CAN_ZH[zodiac.can] + CHI_ZH[zodiac.chi] + default: + throw("Unsupported") } } @@ -170,39 +204,52 @@ function convertSolarToLunar(date, tzOffset) { // DOM const dateInput = document.querySelector('#solar-date') -const tzOffsetInput = document.querySelector('#timezone-offset') const solarYearOutput = document.querySelector('#solar-year') -const solarMonthOutput = document.querySelector('#solar-month') +const solarMonthOutputEN = document.querySelector('#solar-month-en') +const solarMonthOutputVI = document.querySelector('#solar-month-vi') const solarDayOutput = document.querySelector('#solar-day') -const solarWeekdayOutput = document.querySelector('#solar-weekday') -const lunarYearOutput = document.querySelector('#lunar-year') -const lunarMonthOutput = document.querySelector('#lunar-month') -const lunarDayOutput = document.querySelector('#lunar-day') - -const monthFormat = new Intl.DateTimeFormat("en-US", {month: "long"}) -const weekdayFormat = new Intl.DateTimeFormat("en-US", {weekday: "long"}) +const solarWeekdayOutputEN = document.querySelector('#solar-weekday-en') +const solarWeekdayOutputVI = document.querySelector('#solar-weekday-vi') +const solarWeekdayOutputZH = document.querySelector('#solar-weekday-zh') +const lunarYearOutputVI = document.querySelector('#lunar-year-vi') +const lunarMonthOutputVI = document.querySelector('#lunar-month-vi') +const lunarDayOutputVI = document.querySelector('#lunar-day-vi') +const lunarYearOutputZH = document.querySelector('#lunar-year-zh') +const lunarMonthOutputZH = document.querySelector('#lunar-month-zh') +const lunarDayOutputZH = document.querySelector('#lunar-day-zh') + +const monthFormatEN = new Intl.DateTimeFormat("en-US", {month: "long"}) +const monthFormatVI = new Intl.DateTimeFormat("vi-VN", {month: "long"}) +const weekdayFormatEN = new Intl.DateTimeFormat("en-US", {weekday: "long"}) +const weekdayFormatVI = new Intl.DateTimeFormat("vi-VN", {weekday: "long"}) +const weekdayFormatZH = new Intl.DateTimeFormat("zh-CN", {weekday: "long"}) + +const LUNAR_MONTH_VI = ["một", "hai", "ba", "tư", "năm", "sáu", "bảy", "tám", "chín", "mười", "mười một", "chạp"] function updateOutputs() { if (dateInput.valueAsDate === null) { dateInput.valueAsDate = new Date() } const date = dateInput.valueAsDate - const tzOffset = parseInt(tzOffsetInput.value) + const tzOffset = 7 solarYearOutput.innerText = date.getFullYear() - solarMonthOutput.innerText = monthFormat.format(date) + solarMonthOutputEN.innerText = monthFormatEN.format(date) + solarMonthOutputVI.innerText = monthFormatVI.format(date) solarDayOutput.innerText = date.getDate() - solarWeekdayOutput.innerText = weekdayFormat.format(date) + solarWeekdayOutputEN.innerText = weekdayFormatEN.format(date) + solarWeekdayOutputVI.innerText = weekdayFormatVI.format(date) + solarWeekdayOutputZH.innerText = weekdayFormatZH.format(date) const lunarDate = convertSolarToLunar(date, tzOffset) - lunarYearOutput.innerText = lunarDate.year - lunarMonthOutput.innerText = lunarDate.month + const zodiac = getZodiac(lunarDate) + lunarYearOutputVI.innerText = "Năm " + getZodiacText(zodiac.yearZodiac, "vi") + lunarMonthOutputVI.innerText = "Tháng " + LUNAR_MONTH_VI[lunarDate.month - 1] if (lunarDate.isLeap) { - lunarMonthOutput.innerText += " (leap)" + lunarMonthOutputVI.innerText += " (nhuận)" } - lunarDayOutput.innerText = lunarDate.day + lunarDayOutputVI.innerText = "Ngày " + lunarDate.day } document.addEventListener("DOMContentLoaded", updateOutputs) dateInput.onchange = updateOutputs -tzOffsetInput.onchange = updateOutputs |