Skip to content

Instantly share code, notes, and snippets.

@yukioc

yukioc/jpn-calendar.html

Created February 25, 2012 14:22
Show Gist options
  • Save yukioc/1908728 to your computer and use it in GitHub Desktop.
Save yukioc/1908728 to your computer and use it in GitHub Desktop.
Download ZIP
a simple japanese calendar
Raw
jpn-calendar.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Japanese Calendar</title>
<!-- stylesheet -->
<style type="text/css">
<!--
body { font-size:smaller; }
em { font-style: normal; font-weight: bold; background-color: yellow; }
table,td,th,tr
{ margin:0; padding:0; vertical-align: middle; }
caption { background-color:#cccccc; }
div { margin:0; }
.frame td,th { vertical-align: top; }
.cal { border:0 solid gray; float:left; font-size:smaller; }
.cal td { text-align:right; }
.cal th { text-align:center; }
.sun { background-color:#ffcccc; }
.sat { background-color:#ccccff; }
.mon,.tue,.wed,.thu,.fri
{ background-color:#ddddcc; }
.today { border:2px solid red; }
.horiday { background-color:#ffcccc; }
-->
</style>
</head>
<body>
<a href="#" alt="previous month" onclick="yyyy.value=parseInt(yyyy.value)-1;makeCalendarHtml(yyyy.value)">&lt;&lt;</a>
<a href="#" alt="next month" onclick="yyyy.value=parseInt(yyyy.value)+1;makeCalendarHtml(yyyy.value)">&gt;&gt;</a>
<input type="text" size="4" id='yyyy' value="2011"/>
<input type="submit" value="go" onclick="makeCalendarHtml(yyyy.value);"/>
<span class="today" onclick="var y=(new Date()).getFullYear();makeCalendarHtml(y);yyyy.value=y;">Today: <span id="today" ></span></span>
<div id="cal"></div>
<script>//<!--
// lut for translation
var _=function(s){ return _locale_msg[s] || s; }
var _locale_msg={
"Heisei":"平成","Showa":"昭和","Taisho":"大正","Meiji":"明治",
"Sun":"日","Mon":"月","Tue":"火","Wed":"水","Thu":"木","Fri":"金","Sat":"土",
// "Jan":"睦月","Feb":"如月","Mar":"弥生","Apr":"卯月","May":"皐月","Jun":"水無月",
// "Jul":"文月","Aug":"葉月","Sep":"長月","Oct":"神無月","Nov":"霜月","Dec":"師走",
"Jan":"1月","Feb":"2月","Mar":"3月","Apr":"4月","May":"5月","Jun":"6月",
"Jul":"7月","Aug":"8月","Sep":"9月","Oct":"10月","Nov":"11月","Dec":"12月",
"New Year's Day":"元旦",
"Coming of Age Day":"成人の日",
"National Foundation Day":"建国記念日",
"Emperor's Birthday":"天皇誕生日",
"Greenery Day":"みどりの日",
"Showa Day":"昭和の日",
"Constitution Memorial Day":"憲法記念日",
"Children's Day":"こどもの日",
"Marine Day":"海の日",
"Respect for the Aged Day":"敬老の日",
"Health and Sports Day":"体育の日",
"National Culture Day":"文化の日",
"Labor Thanksgiving Day":"勤労感謝の日",
"Vernal Equinox":"春分の日", "Autumnal Equinox":"秋分の日",
"People's Day":"国民の休日",
"substitute horiday":"振替休日",
};
// horidays
var NationalHoridays = [
{m:1, d:1, f:1949, n:"New Year's Day"},
{m:1, d:15, f:1949, e:1999, n:"Coming of Age Day"},
{m:2, d:11, f:1967, n:"National Foundation Day"},
{m:4, d:29, f:1949, e:1988, n:"Emperor's Birthday" },
{m:4, d:29, f:1989, e:2006, n:"Greenery Day" },
{m:4, d:29, f:2007, n:"Showa Day" },
{m:5, d:3, f:1949, n:"Constitution Memorial Day"},
{m:5, d:4, f:2007, n:"Greenery Day"},
{m:5, d:5, f:1949, n:"Children's Day"},
{m:7, d:20, f:1996, e:2002, n:"Marine Day"},
{m:9, d:15, f:1966, e:2002, n:"Respect for the Aged Day"},
{m:10, d:10, f:1969, e:1999, n:"Health and Sports Day"},
{m:11, d:3, f:1949, n:"National Culture Day"},
{m:11, d:23, f:1949, n:"Labor Thanksgiving Day"},
{m:12, d:23, f:1989, n:"Emperor's Birthday"},
{y:2000, m:3, d:20, n:"Vernal Equinox"}, {y:2000, m:9, d:23, n:"Autumnal Equinox"},
{y:2001, m:3, d:20, n:"Vernal Equinox"}, {y:2001, m:9, d:23, n:"Autumnal Equinox"},
{y:2002, m:3, d:21, n:"Vernal Equinox"}, {y:2002, m:9, d:23, n:"Autumnal Equinox"},
{y:2003, m:3, d:21, n:"Vernal Equinox"}, {y:2003, m:9, d:23, n:"Autumnal Equinox"},
{y:2004, m:3, d:20, n:"Vernal Equinox"}, {y:2004, m:9, d:23, n:"Autumnal Equinox"},
{y:2005, m:3, d:20, n:"Vernal Equinox"}, {y:2005, m:9, d:23, n:"Autumnal Equinox"},
{y:2006, m:3, d:21, n:"Vernal Equinox"}, {y:2006, m:9, d:23, n:"Autumnal Equinox"},
{y:2007, m:3, d:21, n:"Vernal Equinox"}, {y:2007, m:9, d:23, n:"Autumnal Equinox"},
{y:2008, m:3, d:20, n:"Vernal Equinox"}, {y:2008, m:9, d:23, n:"Autumnal Equinox"},
{y:2009, m:3, d:20, n:"Vernal Equinox"}, {y:2009, m:9, d:23, n:"Autumnal Equinox"},
{y:2010, m:3, d:21, n:"Vernal Equinox"}, {y:2010, m:9, d:23, n:"Autumnal Equinox"},
{y:2011, m:3, d:21, n:"Vernal Equinox"}, {y:2011, m:9, d:23, n:"Autumnal Equinox"},
{y:2012, m:3, d:20, n:"Vernal Equinox"}, {y:2012, m:9, d:22, n:"Autumnal Equinox"},
{y:2013, m:3, d:20, n:"Vernal Equinox"}, {y:2013, m:9, d:23, n:"Autumnal Equinox"},
{y:2014, m:3, d:21, n:"Vernal Equinox"}, {y:2014, m:9, d:23, n:"Autumnal Equinox"},
{y:2015, m:3, d:21, n:"Vernal Equinox"}, {y:2015, m:9, d:23, n:"Autumnal Equinox"},
{y:2016, m:3, d:20, n:"Vernal Equinox"}, {y:2016, m:9, d:22, n:"Autumnal Equinox"},
{y:2017, m:3, d:20, n:"Vernal Equinox"}, {y:2017, m:9, d:23, n:"Autumnal Equinox"},
{y:2018, m:3, d:21, n:"Vernal Equinox"}, {y:2018, m:9, d:23, n:"Autumnal Equinox"},
{y:2019, m:3, d:21, n:"Vernal Equinox"}, {y:2019, m:9, d:23, n:"Autumnal Equinox"},
{y:2020, m:3, d:20, n:"Vernal Equinox"}, {y:2020, m:9, d:22, n:"Autumnal Equinox"},
{y:2021, m:3, d:20, n:"Vernal Equinox"}, {y:2021, m:9, d:23, n:"Autumnal Equinox"},
{y:2022, m:3, d:21, n:"Vernal Equinox"}, {y:2022, m:9, d:23, n:"Autumnal Equinox"},
{y:2023, m:3, d:21, n:"Vernal Equinox"}, {y:2023, m:9, d:23, n:"Autumnal Equinox"},
{y:2024, m:3, d:20, n:"Vernal Equinox"}, {y:2024, m:9, d:22, n:"Autumnal Equinox"},
{y:2025, m:3, d:20, n:"Vernal Equinox"}, {y:2025, m:9, d:23, n:"Autumnal Equinox"},
{y:2026, m:3, d:20, n:"Vernal Equinox"}, {y:2026, m:9, d:23, n:"Autumnal Equinox"},
{y:2027, m:3, d:21, n:"Vernal Equinox"}, {y:2027, m:9, d:23, n:"Autumnal Equinox"},
{y:2028, m:3, d:20, n:"Vernal Equinox"}, {y:2028, m:9, d:22, n:"Autumnal Equinox"},
{y:2029, m:3, d:20, n:"Vernal Equinox"}, {y:2029, m:9, d:23, n:"Autumnal Equinox"},
{y:2030, m:3, d:20, n:"Vernal Equinox"}, {y:2030, m:9, d:23, n:"Autumnal Equinox"},
{y:1990, m:5, d:4, n:"People's Day"}, {y:1993, m:5, d:4, n:"People's Day"},
{y:1988, m:5, d:4, n:"People's Day"}, {y:1989, m:5, d:4, n:"People's Day"},
{y:1991, m:5, d:4, n:"People's Day"}, {y:1994, m:5, d:4, n:"People's Day"},
{y:1995, m:5, d:4, n:"People's Day"}, {y:1996, m:5, d:4, n:"People's Day"},
{y:1999, m:5, d:4, n:"People's Day"}, {y:2000, m:5, d:4, n:"People's Day"},
{y:2001, m:5, d:4, n:"People's Day"}, {y:2002, m:5, d:4, n:"People's Day"},
{y:2004, m:5, d:4, n:"People's Day"}, {y:2005, m:5, d:4, n:"People's Day"},
{y:2006, m:5, d:4, n:"People's Day"},
{y:2032, m:9, d:21, n:"People's Day"},
{y:2009, m:9, d:22, n:"People's Day"}, {y:2015, m:9, d:22, n:"People's Day"},
{y:2026, m:9, d:22, n:"People's Day"}, {y:2037, m:9, d:22, n:"People's Day"},
{m:1, w:2, wd:1, f:1999, n:"Coming of Age Day" },
{m:7, w:3, wd:1, f:1999, n:"Marine Day" },
{m:9, w:3, wd:1, f:1999, n:"Respect for the Aged Day" },
{m:10, w:2, wd:1, f:1999, n:"Health and Sports Day" }
];
// Date class extenteds
Date.prototype.setNextDate = function(){
this.setDate( this.getDate() + 1 ); //Is this right?
};
Date.JapaneseEra = {
'Heisei':(new Date(1989, 0, 6)).getTime(),
'Showa': (new Date(1926,11,25)).getTime(),
'Taisho':(new Date(1912, 6,30)).getTime(),
'Meiji': (new Date(1868, 0,25)).getTime()
};
Date.prototype.getJapaneseYear = function(){
var when = this.getTime();
var yyyy = this.getFullYear();
for (var e in Date.JapaneseEra){
if (when >= Date.JapaneseEra[e]){
return _(e) + (yyyy-(new Date(Date.JapaneseEra[e])).getFullYear()+1);
}
}
return "too many years ago";
};
Date.prototype.toYYYYMMDDString = function(){
var y=this.getFullYear();
var m=this.getMonth()+1; if(m<10) m='0'+m;
var d=this.getDate(); if(d<10) d='0'+d;
return y + '-' + m + '-' + d;
}
// calendar generator
function makeCalendarHtml(year){
var col=4;
var table = document.createElement('table');
table.className = 'frame';
//caption
var caption = document.createElement('caption');
caption.innerHTML = year + ' (' + (new Date(year,11,31)).getJapaneseYear() + ')';
table.appendChild(caption);
//body
var tbody = document.createElement('tbody');
var tr;
for (var m = 0; m < 12; m++){
if (m % col == 0){
if (tr) tbody.appendChild(tr);
tr = document.createElement('tr');
}
var td = document.createElement('td');
var cal= makeMonthlyCalendarTable(year,m);
td.appendChild( cal );
tr.appendChild( td );
}
tbody.appendChild( tr );
table.appendChild( tbody );
var div=document.getElementById('cal');
div.innerHTML='';
div.appendChild( table );
}
// monthly calendar generator
function makeMonthlyCalendarTable(year,month){
var sub_horiday = 0;
var WeekDays = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
var Months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
//table
var table = document.createElement('table');
table.className = 'cal';
//caption
var caption = document.createElement('caption');
caption.innerHTML = _(Months[month]);
table.appendChild(caption);
//header
var wc=[];
var tr = document.createElement('tr');
for (var d=0; d<7; d++){
var th = document.createElement('th');
th.className = WeekDays[d];
th.innerHTML = _(WeekDays[d]);
tr.appendChild(th);
wc[d]=0;
}
var thead = document.createElement('thead');
thead.appendChild(tr);
table.appendChild(thead);
//body
var date=new Date(year,month,1,0,0,0);
var today=new Date();
if (today.getMonth() != month) today=undefined;
var tbody = document.createElement('tbody');
tr=undefined;
for (wd=0; wd<date.getDay(); wd++){//pad
if(wd==0) tr=document.createElement('tr');
var td=document.createElement('td');
tr.appendChild(td);
}
for (; date.getMonth() == month; date.setNextDate() ){
var wd = date.getDay();
var d = date.getDate();
wc[wd]++;
if (wd == 0){//sun
if(tr) tbody.appendChild(tr);
tr=document.createElement('tr');
}
var td = document.createElement('td');
td.innerHTML=d;
td.title='';
//day of week
td.className=WeekDays[wd];
//National Horidays
for(var i=0; i<NationalHoridays.length;i++){
var h=NationalHoridays[i];
if ((!h['f'] || year>=h['f']) && (!h['e'] || year<=h['e']) &&
(((!h['y'] || year==h['y']) && month+1==h['m'] && d==h['d'])||
(h['wd'] && month+1==h['m'] && wc[wd]==h['w'] && wd==h['wd']))){
if (td.className=='horiday' || td.className==WeekDays[0]) sub_horiday++;
td.className='horiday';
td.title+=' ' + _(h['n']);
}
}
//substitute horiday
if (sub_horiday>0 && td.className!='horiday' && td.className!='sun'){
sub_horiday--;
td.className='horiday';
td.title=' ' + _('substitute horiday');
}
//today
if (today && d==today.getDate()){
td.className+=" today";
td.title="today";
}
tr.appendChild(td);
}
tbody.appendChild(tr);
table.appendChild(tbody);
return table;
}
// create initial calendar view.
(function(){
var d=new Date();
makeCalendarHtml(d.getFullYear());
var t=document.getElementById('today');
t.innerHTML=d.toYYYYMMDDString();
yyyy.value=d.getFullYear();
})();
//--></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment