Vosegus Sakura

  1. Home
  2. JavaScript { Depository; }
  3. 次の月へと前の月へのナビゲーションのついたカレンダー

次の月へと前の月へのナビゲーションのついたカレンダー

JavaScript { Depository; }

デモ

HTML

<div id="demo"></div>

CSS

/*日曜・祝日*/ .sun, .spl{ color:#cc0000; } /*土曜日*/ .sat{ color:#2a447a; } /*今日*/ #today{ background-color:#6d84b4;color:#ffffff; }

JavaScript

window.onload = function(){ calendar.paramy = calendar.currentYear(); calendar.paramm = calendar.currentMonth(); calendar.createCal(calendar.paramy,calendar.paramm); } var calendar = {}; calendar.currentYear = function(){ var cy = {}; cy.date = new Date(); cy.month = cy.date.getFullYear() ; return cy.month; }; calendar.currentMonth = function(){ var cm = {}; cm.date = new Date(); cm.month = cm.date.getMonth() + 1; return cm.month; }; calendar.createCal = function(dispYear,dispMonth){ var cal = {}; cal.output = document.getElementById("demo"); if(cal.output.firstChild != null){ cal.output.removeChild(cal.output.firstChild); } //カレンダーデータレポジトリ cal.week = ["Sun","Mon","Tue","Wed","Thu","Fry","Sat"]; cal.monthdays = [0,31,28,31,30,31,30,31,31,30,31,30,31]; cal.date = new Date(); cal.year = cal.date.getFullYear(); cal.month = cal.date.getMonth() + 1; cal.day = cal.date.getDay(); cal.today = cal.date.getDate(); var wi = 0;//日にちセル生成ループ変数 var daytext = 1;//日にちの数字 cal.date2 = new Date(1); //うるう年 if((dispYear%4==0)&&(dispYear%100!=0)||(dispYear%400==0)){ cal.monthdays[2] = 29; } cal.currentMonthDays = cal.monthdays[dispMonth]; //HTMLレポジトリ cal.div = document.createElement("div"); cal.div.className = "cal"; cal.table = document.createElement("table"); cal.thead = document.createElement("thead"); cal.tbody = document.createElement("tbody"); //月とナビの生成 cal.unit = document.createElement("div"); cal.unit.className = "unit"; cal.prevm = document.createElement("a"); cal.prevm.className = "prev"; cal.prevm.setAttribute("href","javascript:void(0)"); cal.prevm.onclick = function(){ if(calendar.paramm > 1){ calendar.paramm-=1; }else{ calendar.paramm =12; calendar.paramy -=1; } calendar.createCal(calendar.paramy,calendar.paramm); } cal.nextm = document.createElement("a"); cal.nextm.className = "next"; cal.nextm.setAttribute("href","javascript:void(0)"); cal.nextm.onclick = function(){ if(calendar.paramm < 12){ calendar.paramm+=1; }else{ calendar.paramm =1; calendar.paramy +=1; } calendar.createCal(calendar.paramy,calendar.paramm); } cal.prevnav = document.createTextNode("prev"); cal.nextnav = document.createTextNode("next"); cal.head = document.createElement("h2"); cal.dispmonth = dispMonth cal.headtxt = document.createTextNode(dispYear+" "+cal.dispmonth); cal.date2.setFullYear(dispYear); cal.date2.setMonth(dispMonth - 1); cal.date2.setDate(1); cal.prevm.appendChild(cal.prevnav); cal.nextm.appendChild(cal.nextnav); cal.head.appendChild(cal.headtxt); cal.unit.appendChild(cal.prevm); cal.unit.appendChild(cal.head); cal.unit.appendChild(cal.nextm); cal.div.appendChild(cal.unit); //曜日をセルを生成 cal.trow = document.createElement("tr"); for(var i=0;i< 7;i+=1){ var th = document.createElement("th"); if(i===0){th.className = "sun"}; if(i===6){th.className = "sat"}; var wtext = document.createTextNode(cal.week[i]); th.appendChild(wtext); cal.trow.appendChild(th); } cal.thead.appendChild(cal.trow); //日にちセルを生成 for(wi=0;wi< cal.date2.getDay();wi+=1){ var td = document.createElement("td"); if(wi%7 === 0){ td.className = "sun" }else if(wi%7 === 6){ td.className = "sat" } var day = document.createTextNode(" "); td.appendChild(day); if(wi%7 === 0){ var tr = document.createElement("tr"); } tr.appendChild(td); cal.tbody.appendChild(tr); } var ctoday = cal.today; var splflg0 = 0; var splflg1 = 0; var splflg2 = 0; var splflg3 = 0; var splflg4 = 0; var splflg5 = 0; var splflg6 = 0; var splflg7 = 0; var splflg8 = 0; var splflg9 = 0; for(var i=wi;i< (cal.currentMonthDays + wi);i+=1){ var td = document.createElement("td"); if(daytext== ctoday && dispMonth == cal.month && dispYear == cal.year){ td.id = "today"; }else if(i%7 === 0){ td.className = "sun"; }else if(i%7 === 6){ td.className = "sat" }; //正月 if(dispMonth == 1 && daytext == 1){ td.className = "spl"; } //成人の日 1月第2月曜日 if(dispMonth == 1){ if(wi != 1 && wi > 0){ if(i == 15){ td.className = "spl"; } }else{ if(i == 8){ td.className = "spl"; } } } //建国記念の日 if(dispMonth == 2 && daytext == 11){ if((i%7) != 0){ td.className = "spl"; }else if((i%7) == 0){ splflg0 = 1; } } if(dispMonth == 2 && splflg0 == 1 && daytext == 12){ td.className = "spl"; } //天皇誕生日 if(dispMonth == 4 && daytext == 29){ if((i%7) != 0){ td.className = "spl"; }else if((i%7) == 0){ splflg1 = 1; } } if(dispMonth == 4 && splflg1 == 1 && daytext == 30){ td.className = "spl"; } //憲法記念日 if(dispMonth == 5 && daytext == 3){ if((i%7) != 0){ td.className = "spl"; }else if((i%7) == 0){ splflg2 = 1; } } if(dispMonth == 5 && splflg2 == 1 && daytext == 4){ td.className = "spl"; } //みどりの日 if(dispMonth == 5 && daytext == 4){ if((i%7) != 0){ td.className = "spl"; }else if((i%7) == 0){ splflg3 = 1; } } if(dispMonth == 5 && splflg3 == 1 && daytext == 5){ td.className = "spl"; } //こどもの日 if(dispMonth == 5 && daytext == 5){ if((i%7) != 0){ td.className = "spl"; }else if((i%7) == 0){ splflg4 = 1; } } if(dispMonth == 5 && splflg4 == 1 && daytext == 6){ td.className = "spl"; } //海の日 7月第3月曜日 if(dispMonth == 7){ if(wi != 1 && wi > 0){ if(i == 22){ td.className = "spl"; } }else{ if(i == 15){ td.className = "spl"; } } } //敬老の日 9月第3月曜日 if(dispMonth == 9){ if(wi != 1 && wi > 0){ if(i == 22){ td.className = "spl"; } }else{ if(i == 15){ td.className = "spl"; } } } //体育の日 10月の第2月曜日 if(dispMonth == 10){ if(wi != 1 && wi > 0){ if(i == 15){ td.className = "spl"; } }else{ if(i == 8){ td.className = "spl"; } } } //文化の日 if(dispMonth == 11 && daytext == 3){ if((i%7) != 0){ td.className = "spl"; }else if((i%7) == 0){ splflg5 = 1; } } if(dispMonth == 11 && splflg5 == 1 && daytext == 4){ td.className = "spl"; } //勤労感謝の日 if(dispMonth == 11 && daytext == 23){ if((i%7) != 0){ td.className = "spl"; }else if((i%7) == 0){ splflg6 = 1; } } if(dispMonth == 11 && splflg6 == 1 && daytext == 24){ td.className = "spl"; } //天皇誕生日 if(dispMonth == 12 && daytext == 23){ if((i%7) != 0){ td.className = "spl"; }else if((i%7) == 0){ splflg7 = 1; } } if(dispMonth == 12 && splflg7 == 1 && daytext == 24){ td.className = "spl"; } //春分の日 var springInt = parseInt(20.8431+0.242194*(dispYear-1980)-parseInt((dispYear-1980)/4)); if(dispMonth == 3 && daytext == springInt){ if((i%7) != 0){ td.className = "spl"; }else if((i%7) == 0){ splflg8 = 1; } } if(dispMonth == 3 && splflg8 && daytext == springInt+1){ td.className = "spl"; } //秋分の日 var fallInt = parseInt(23.2488+0.242194*(dispYear-1980)-parseInt((dispYear-1980)/4)); if(dispMonth == 9 && daytext == fallInt){ if((i%7) != 0){ td.className = "spl"; }else if((i%7) == 0){ splflg9 = 1; } } if(dispMonth == 3 && splflg9 && daytext == springInt+1){ td.className = "spl"; } var day = document.createTextNode(daytext); daytext += 1; td.appendChild(day); if(i%7 === 0){ var tr = document.createElement("tr"); } tr.appendChild(td); cal.tbody.appendChild(tr); } if(i%7> 0){ for(ix=0;ix< (7 - (i%7));ix+=1){ var td = document.createElement("td"); tr.appendChild(td); cal.tbody.appendChild(tr); } } cal.table.appendChild(cal.thead); cal.table.appendChild(cal.tbody); cal.div.appendChild(cal.table); cal.output.appendChild(cal.div); //国民の休日 var putTd = cal.output.getElementsByTagName("td"); for(var k=0;k< putTd.length;k++){ if(putTd[k].className === "spl" && putTd[k+2].className === "spl"){ putTd[k+1].className = "spl"; } } }

このページの上部へ