指定した日時を含む月のカレンダーを表示するhtaを作成しました。
任意の日付の部分のみ任意の関数を適用したり、数か月にまたがる表示もできます。
以下、ソース
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <title>カレンダー</title> | |
| <body style="text-align:center;"> | |
| <input id=inp value='2017/2/1'><button id=btn>表示</button> | |
| <div id=div></div> | |
| </body> | |
| <script> | |
| resizeTo(300,700) | |
| onl=function(f){window.attachEvent('onload',f)} | |
| btn.onclick = function(){ | |
| var objSD=objカレンダー.specialDay.get('2017/02/27', function(elem){ | |
| elem.title = '誕生日' | |
| elem.style.backgroundColor = '#3c3' | |
| }) | |
| var objNew=objカレンダー.新規(new Date(inp.value), objSD, 3, 1) | |
| div[iT] = '' | |
| div[iB](objNew.elems.TBL) | |
| objNew.onclick=function(dat, td, obj){ confirm(dat) } | |
| } | |
| onl(function(){ | |
| var ce=function(name){return document.createElement(name)} | |
| var div=ce('div'), tbl, tbody, tr, td | |
| div.innerHTML = '<table border=1><td></td></table>' | |
| tbl = div[FI].removeNode(true) | |
| tbody = tbl[FI] | |
| tr = tbody[FI] | |
| td = tr[FI] | |
| setProp(td.style, {width:'24px', height:'24px', fontSize:'12px', textAlign:'center'}) | |
| for(var i=0;i<6;i++){ tr[iB](td.cloneNode(true)) } | |
| for0L('日月火水木金土'.split(''), function(i,chr){ tr[CN][i][iT] = chr }) | |
| tr[CN][0].style.backgroundColor = '#fcc' | |
| tr[CN][6].style.backgroundColor = '#ccf' | |
| var get年月日=function(dat){return {年:dat.getFullYear(), 月:dat.getMonth()+1, 日:dat.getDate()}} | |
| var str年月日=function(dat){with(get年月日(dat)){return [年,月,日].join('/')}} | |
| objカレンダー={ | |
| 新規:function(dat, objSpecialDay, 月数, オフセット){ | |
| dat = dat || new Date() | |
| var newTBL=tbl.cloneNode(true), newTBO=newTBL[FI], obj年月日=get年月日(dat) | |
| if(オフセット){ | |
| dat.setMonth(obj年月日.月-1-オフセット) | |
| obj年月日=get年月日(dat) | |
| } | |
| var 年=obj年月日.年, 月=obj年月日.月, 日=1, dat0=new Date([年, 月, 日].join('/')), 曜日, newTR | |
| newTBO[FI].removeNode(true) | |
| var obj出力={ | |
| elems:{TBL:newTBL, tds:[]}, | |
| onclick:null | |
| } | |
| for(var 月数i=0; 月数i<月数 ;月数i++){ | |
| var td日onclick=function(){ | |
| if(!obj出力.onclick){return} | |
| var m=arguments.callee | |
| obj出力.onclick(new Date(m.年,m.月-1,this[iT]-0), this, obj出力) | |
| } | |
| setProp(td日onclick, {年:年, 月:月}) | |
| // 最上段：年月表示 | |
| newTBO[iB](newTR=ce('TR')) | |
| newTR[iB](ce('TD')) | |
| setProp(newTR[FI], {innerHTML:'<div style="white-space:nowrap;text-align:center;">'+年+'年 '+月+'月</div>', colSpan:7}) | |
| newTBO[iB](tr.cloneNode(true)) | |
| // 日 | |
| newTBO[iB](newTR=tr.cloneNode(true)) | |
| 曜日 = dat0.getDay() | |
| for(var i=0;i<曜日;i++){ newTR[CN][i][iT] = ' ' } | |
| while((月-1)==dat0.getMonth()){ | |
| obj出力.elems.tds[str年月日(dat0)] = td日 = newTR[CN][曜日++] | |
| td日[iT] = 日 | |
| td日.onclick = td日onclick | |
| objSpecialDay && objSpecialDay[年] && objSpecialDay[年][月] && objSpecialDay[年][月][日] && objSpecialDay[年][月][日](td日) | |
| if(曜日==7){ newTBO[iB](newTR=tr.cloneNode(true)); 曜日=0 } | |
| dat0.setDate(++日) | |
| } | |
| while(曜日<7){ newTR[CN][曜日++][iT] = ' ' } | |
| obj年月日 = get年月日(dat0) | |
| 年=obj年月日.年, 月=obj年月日.月, 日=1 | |
| } | |
| return obj出力 | |
| }, | |
| specialDay:{ | |
| add:function(dat, fun, objSD){ | |
| typeof(dat)=='string' && (dat=new Date(dat)) | |
| var obj=get年月日(dat), obj0={} | |
| obj0[obj.年] = {} | |
| obj0[obj.年][obj.月] = {} | |
| obj0[obj.年][obj.月][obj.日] = fun | |
| setProp(objSD, obj0, true) | |
| }, | |
| get:function(dat, fun){ | |
| var obj={} | |
| dat && fun && this.add(dat, fun, obj) | |
| return obj | |
| } | |
| } | |
| } | |
| }) | |
| iT='innerText', iH='innerHTML', PA='parentNode', FI='firstChild', CN='childNodes', NE='nextSibling', PR='previousSibling', sI='selectedIndex', iB='insertBefore', OP='options', LEN='length' | |
| for0L = function(arr,fun){for(var i=0,L=arr[LEN],res;i<L;i++){if(res=fun(i,arr[i])){return res}}} | |
| forIn = function(obj,fun){var name,res; for(name in obj){if(res=fun(name, obj[name])){return res}}} | |
| setProp=function(objTarget, objProp, swSub, swValue){ | |
| var getClone=function(){ | |
| var gt=function(obj){return typeof(obj)} | |
| var gc=function(obj){return obj.constructor} | |
| var objT={} | |
| objT[gt('')] = objT[gt(0)] = objT[gt(true)] = objT[gt(objT.und)] = true | |
| var objC={} | |
| objC[gc({})] = function(obj,swSub){return setProp({}, obj, swSub)} | |
| objC[gc([])] = function(obj,swSub){return setProp([], obj, swSub)} | |
| objC[gc(/1/)] = function(obj){var re; eval('re = '+obj); return re} | |
| objC[gc(new Date())] = function(obj){return new Date(obj+'')} | |
| objC[gc(gc)] = function(obj,swSub){var f; eval('f = '+obj); return setProp(f, obj, swSub)} | |
| return function(obj, swSub){ return (objT[gt(obj)] || obj===null) ? obj : objC[gc(obj)](obj, swSub) } | |
| }() | |
| var funChildsCheck=function(){return true} | |
| var arrT=[], arrP=[], 階層=-1, arrC=[].constructor | |
| var fun=function(n,v){ | |
| if(swSub && forIn(v,funChildsCheck)){ | |
| fun0(arrT[階層][n] || (arrT[階層][n]=getClone(v)), v) | |
| return | |
| } | |
| if(swValue && !v){return} | |
| arrT[階層][n] = v | |
| } | |
| var fun0=function(objT, objP){ | |
| arrT.push(objT) | |
| arrP.push(objP) | |
| 階層++ | |
| forIn(objP, fun) | |
| 階層-- | |
| arrT.pop() | |
| arrP.pop() | |
| } | |
| fun0(objTarget, objProp) | |
| return objTarget | |
| } | |
| </script> | |
| </html> |
0 件のコメント:
コメントを投稿