JavaScriptで描くカレンダーの作成方法

時計 2020.04.26 / 時計

HTML・CSS・JavaScript

JavaScriptを使い、カレンダーを作成しました。

「←」「→」ボタンを押下することにより、月を変更することができます。JavaScriptで記載したプログラムを掲載しておきますので、勉強に役立ててください。

Java Scriptでのカレンダー

Java Scriptコード


<script>
var myDate=new Date();
var weekArray=["日","月","火","水","木","金","土"];
var monthArray=[31,28,31,30,31,30,31,31,30,31,30,31];
var myYear=myDate.getFullYear();
var myMonth=myDate.getMonth();
var myDay=myDate.getDate();

$(function(){
init();
$(document).on("click","#last",lastMonth);
$(document).on("click","#next",nextMonth);
});
function init(){
uruHantei();
var myWeek=firstDow();
var weekLine=weekCount(myWeek);
var daysCell=new Array(42);
makeDaysCell(daysCell,myWeek);
makeTable(weekLine,daysCell);
}
function lastMonth(){
myMonth--;
if(myMonth<0){
myMonth +=12;
myYear--;
}
myDate=new Date(myYear,myMonth,myDay);
$("#calendar").html("");
init();
}
function nextMonth(){
myMonth++;
if(myMonth>11){
myMonth -=12;
myYear++;
}
myDate=new Date(myYear,myMonth,myDay);
$("#calendar").html("");
init();
}
function uruHantei(){
if((myYear%4==0 && myYear%100!=0) || (myYear%400==0)){
monthArray[1]=29;
}else{
monthArray[1]=28;
}
}
function firstDow(){
var firstDay=new Date(myYear,myMonth,1);
return firstDay.getDay();
}
function weekCount(myWeek){
return Math.ceil((myWeek+monthArray[myMonth])/7);
}
function makeDaysCell(daysCell,myWeek){
for(var i=0;i<42;i++){
daysCell[i]="";
}
for(i=0;i<monthArray[myMonth];i++){
daysCell[i+myWeek]=i+1;
}
console.log(daysCell);
}
function makeTable(weekLine,daysCell){
$("<table />").attr("id","ctbl").appendTo("#calendar");

$("<tr />").appendTo("#ctbl");
$("<th />").attr("id","last").html("←").appendTo("#ctbl tr:eq(0)");
$("<th />").attr("colspan","5").html(myYear+"年"+(myMonth+1)+"月").appendTo("#ctbl tr:eq(0)");
$("<th />").attr("id","next").html("→").appendTo("#ctbl tr:eq(0)");

$("<tr />").appendTo("#ctbl");
for(var i=0;i<7;i++){
$("<th />").html(weekArray[i]).appendTo("#ctbl tr:eq(1)");
}

for(i=0;i<weekLine;i++){
$("<tr />").appendTo("#ctbl");
for(var j=0;j<7;j++){
$("<td />").html(daysCell[i*7+j]).appendTo("#ctbl tr:eq("+(i+2)+")");
}
}
/***CSS***/
$("#ctbl tr:eq(1) th:eq(0)").css("backgroundColor","brown");
$("#ctbl tr:eq(1) th:eq(6)").css("backgroundColor","darkblue");
for(i=0;i<weekLine;i++){
$("#ctbl tr:eq("+(i+2)+") td:eq(0)").css("color","#ff0000");
$("#ctbl tr:eq("+(i+2)+") td:eq(6)").css("color","#0000ff");
}
/**today**/
var calToday=new Date();
$("#ctbl td").each(function(){
if(calToday.getFullYear()==myYear &&
calToday.getMonth()==myMonth &&
calToday.getDate()==$(this).html()){
$(this).css("backgroundColor","#cccc00")
}
});
}
</script>