1次元配列をN個づつ区切り、2次元の配列を返す。
function ArySplit (ary, n) { return (n < ary.length) ? Array.prototype.concat.apply ( [ary.splice (0, n)], [split (ary, n)] ) : [ary] }
カレンダーを作る
http://oshiete.goo.ne.jp/qa/7999208.html
WEB用カレンダーの不具合?について
質問者は、innerHTML を多用して、イベント処理まで書き込んでいる。ちと見づらい。
各月は、 caption から得る。一日の手前と末日の空白は、ちょっと小細工。
そして日付は、数字を32進法にして文字に置き換え、それを区切って配列とし、7個づつ区切って
日付ノードに変換して書き込む。
<!DOCTYPE html> <title></title> <meta charset="UTF-8"/> <style> table.calendar { border-collapse: collapse; float: left; font-size : small; margin : 1em 2em; border : none; width :30em; height :18em; } table.calendar caption { text-align: left; padding: .5ex 1em; color : green; font-size: large; } table.calendar tr > * { color : #666; border : none; text-align : center; padding : .5ex; } table.calendar tr > *:nth-of-type(1) { color : #f22; } table.calendar tr > *:nth-of-type(7) { color : #22f; } table.calendar th { background : #eee; height : 1em; } table.calendar td { border-bottom : 1px #ddd solid; } </style> <table class="calendar"> <caption>2013-1</caption> </table> <table class="calendar" border="1"> <caption>2013-2</caption> </table> <table class="calendar" border="1"> <caption>2013-3</caption> </table> <table class="calendar" border="1"> <caption>2013-4</caption> </table> <table class="calendar" border="1"> <caption>2013-5</caption> </table> <table class="calendar" border="1"> <caption>2013-6</caption> </table> <script> (function () { var A = Array.prototype; var doc = document; var yyyymm_reg = /(\d{4}).*(\d{1,2})/; var num = '123456789abcdefghijklmnopqrstuv'; var youbi = ['日','月', '火', '水', '木', '金', '土']; function Calendar () { ; } function insertTH (t) { var th = this.ownerDocument.createElement ('th'); th.textContent = t; this.appendChild (th); } function insertTD (t) { this.insertCell (-1).textContent = t; } function insertTR (r) { r.forEach (insertTD, this.insertRow (-1)); } function insertTRh (r) { r.forEach (insertTH, this.insertRow (-1)); } function appendTbody (t, a) { a.forEach (insertTR, t); } function ArraySplit (ary, n) { return (n < ary.length) ? A.concat.apply ([ary.splice (0, n)], [ArraySplit (ary, n)]): [ary]; } function makeDays (date) { var matubi = new Date (date.getFullYear (), date.getMonth () + 1, 0); var dayMax = matubi.getDate (); var week = matubi.getDay (); var begin = (7 + week - (dayMax % 7)) % 7 + 2; var map = [ (new Array (begin)).join (' '), (num.substring (0, dayMax)), (new Array (7 - week)).join (' ') ].join('').split ('').map (function (c) { return ' ' === c ? c: parseInt (c, 32); }); return ArraySplit (map, 7); } function dayFormat (date) { return [ date.getFullYear (), '年', date.getMonth () + 1, '月' ].join (' '); } function theMonthObj (str) { var ym = yyyymm_reg.exec (str); return (ym) ? new Date (ym[1], ym[2]-1, 1): new Date; } function create (table) { var caption = table.querySelector ('caption'); var tbody = doc.createElement ('tbody'); var base = theMonthObj (caption ? caption.textContent: null); if (caption) caption.textContent = dayFormat (base); insertTRh.call (tbody, youbi); appendTbody (tbody, makeDays (base)); table.appendChild (tbody); } Calendar.create = create; this.Calendar = Calendar; }) (); var table = document.querySelectorAll ('table.calendar'); Array.prototype.forEach.call (table, Calendar.create); </script>