Calender by js help me to keep some cell empty

JavaScript
1

Help me to put some cell blank at staring

<table id="table">
	
</table>

var currentDate,currentDay, currentMonth, currentYear, totalNumberOfDays, prevMonthDays, daysName, monthName, openingDayOfCurrentMonth;

currentDate = new Date();
currentDay = currentDate.getDate(); //return date number
currentMonth = currentDate.getMonth(); //return month as number 0 for january and so on
currentYear = currentDate.getFullYear();
daysName = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
monthName = ["january","february","march","aprit","may","june","july","auguast","september","october","november","december"];


openingDayOfCurrentMonth = new Date(currentYear,currentMonth,1);
openingDayOfCurrentMonth = openingDayOfCurrentMonth.toDateString().substring(0,3);
//console.log(openingDayOfCurrentMonth);

totalNumberOfDays = new Date(currentYear,currentMonth+1,0);
//console.log(totalNumberOfDays.toDateString());

totalNumberOfDays = totalNumberOfDays.toDateString().substring(8,10); //current month total number of days
//console.log(totalNumberOfDays);

prevMonthDays = new Date(currentYear,currentMonth,0); //previous month total number of days
//console.log(prevYearDays.toDateString());


//making row of days name
var table = document.getElementById("table");
var tr = document.createElement("tr");
table.appendChild(tr);
for(var i=0;i<daysName.length;i++){
	td = document.createElement("td");
	td.innerHTML = daysName[i];
	tr.appendChild(td);
}

//making rows for all number of days
var tr = document.createElement("tr");
table.appendChild(tr);
var count =0;
for(i=1;i<=totalNumberOfDays;i++){
	if(count ==7){
		tr = document.createElement('tr');
		td = document.createElement("td");
		td.innerHTML = i;
		tr.appendChild(td);
		table.appendChild(tr);
		count = 1;
	}
	else{
		var td = document.createElement('td');
		td.innerHTML = i;
		tr.appendChild(td);
		count++
	}
}

my output is like: -

error2
I am creating calender for nov month 2018, want to print day’s number from Thursday.
help pls…

2

You can get the day of the week with getDay(). You could add a ‘td’ with ‘colspan’ equal to this ‘getDay()’ and append it before everything else. You would also have to update ‘count’.

1 Like
3

I don’t know if it is a good solution, but first i check the index of the starting array that contains the month value, then i evaluate the blank days.

Then in the rendering table, i compare the blankdays var with a row counter, and i print blank values until it fill the blanks.

<table id="table">
	
</table>

<script>
var currentDate,currentDay, currentMonth, currentYear, totalNumberOfDays, prevMonthDays, daysName, monthName, openingDayOfCurrentMonth;

currentDate = new Date();
currentDay = currentDate.getDate(); //return date number
currentMonth = currentDate.getMonth(); //return month as number 0 for january and so on
currentYear = currentDate.getFullYear();
daysName = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
monthName = ["january","february","march","aprit","may","june","july","auguast","september","october","november","december"];

openingDayOfCurrentMonth = new Date(currentYear,currentMonth,1);
openingDayOfCurrentMonth = openingDayOfCurrentMonth.toDateString().substring(0,3);
//console.log(openingDayOfCurrentMonth);

let index = daysName.indexOf(openingDayOfCurrentMonth); 
let firstSlice = daysName.slice(index, daysName.length);
let blankDays = 7 - (firstSlice.length + 1);

totalNumberOfDays = new Date(currentYear,currentMonth+1,0);
//console.log(totalNumberOfDays.toDateString());

totalNumberOfDays = totalNumberOfDays.toDateString().substring(8,10); //current month total number of days
//console.log(totalNumberOfDays);

prevMonthDays = new Date(currentYear,currentMonth,0); //previous month total number of days
//console.log(prevYearDays.toDateString());

// 
let tdFiller = (value) => {
	let td = document.createElement('td');
	td.innerHTML = value;
	tr.appendChild(td);
}

//making row of days name
var table = document.getElementById("table");
var tr = document.createElement("tr");
table.appendChild(tr);
for(var i=0;i<daysName.length;i++){
	td = document.createElement("td");
	td.innerHTML = daysName[i];
	tr.appendChild(td);
}

//making rows for all number of days
var tr = document.createElement("tr");
table.appendChild(tr);
var count = 0;
var blankCounter = 0;

for(i=1;i<=totalNumberOfDays;i++){
	if(count == 7){
		tr = document.createElement('tr');
		td = document.createElement("td");
		td.innerHTML = i;
		tr.appendChild(td);
		table.appendChild(tr);
		count = 1;
	}
	else{
		
		while (blankCounter <= blankDays ){
			tdFiller('');
                        count++;
			blankCounter++
		}
		tdFiller(i);
                count++;
	}
}


</script>