I am trying to build a calendar modal for my app by using Angular. I have a model like this
I have no problem building the year month but not sure how to setup the week that has other day. For example, first week of Oct has 28,29,30 in the first week.
//code to build day
var month = 9; // hardcoded for demo.
var monthA = [];
for (var m = 0; m <= 3; m ++) {
var weeks = [];
totalDay = new Date(year, month + m + 1, 0).getDate()
//build days
for (var i = 0; i <= totalDay; i++) {
//setting up weeks
if (i % 7 == 0) {
weeks.push([]);
}
weeks[weeks.length-1].push(i);
}
var monthObj = {
month : (month + m),
weeks:weeks
}
monthA.push(monthObj);
}
The above code will produce
monthA:
[
{
month: '10',
weeks: [
[1,2,3,4,5,6,7],
[8,9,10,11,12,13,14],
[15,16,17,18,19,20,21],
[21,22,23,24,25,26,27],
[28,29,30,31]
]
},
{
month: 'Nov',
weeks: [1,2,3,4,5,6,7] ...
}...
]
}
I was hoping to get
month:
[
{
month: '10',
weeks: [
[28, 29, 30, 1,2,3,4], //I haven o problem building the week from 1 to 4
[5,6,7,8,9,10,11],
[12,13,14,15,16,17,18],
[19,20,21,22,23,24,25],
[26,27,28,29,30,31,1]
]
},
{
month: '11',
weeks: [26,27,28,29,30,31,1] ...
}
]
Thanks so much for the help!
This function I just made should do what you want:
function getWeeksinMonth(year, month){ //month 1-12 based
var weeks = [];
lastDayinMonth = new Date(year, month, 0) // get last day in month
firstDayinMonth = new Date(year, month-1, 1) //get first day in month
start = new Date(firstDayinMonth.getTime()); //copy firstDay
start.setDate(start.getDate() - start.getDay() ); // set date to previous sunday
end=new Date(lastDayinMonth.getTime()); //copy lastDay
end.setDate(end.getDate() - end.getDay() ); // set date to previous sunday
if(end < lastDayinMonth){ // if previous sunday was not the lastDay itself, we want to add another week
end.setDate(end.getDate() + 7);
}
var counter=0;
var week=[]
for(;start<=end;start.setDate(start.getDate()+1)){ // traverse days
if(counter % 7==0 && counter != 0){ // every 7 days add a week
var copy=week.slice(0);
weeks.push(copy)
week=[];
}
week.push(start.getDate())
counter++
}
return weeks;
}
var weeks = getWeeksinMonth(2014,10);
for(var i=0;i<weeks.length;i++){
document.body.innerHTML+=weeks[i].toString() + '<br/>';
}
Related
I am new to programming. I am using javascript right now. I wanted codes to get end date for a execution. I have got Startdate, weekdays(days in which execution occures) and number of executions to occure. How can i get end date???
For example Start date is '15 - 03 - 2018'
days to be executed are Sunday ie '0' and friday '5'
Number of executions from start date to end date is 5
End date of execution here should be '30-03-2018' which is to be retrieved.
Any idea...
Hope this helps.
var date = new Date(2018,2,15); // set date to 15-Mar-2018
var weekdays = [0,6]; // set weekdays
var noOfExcution = 3;
var day = 7 - date.getDay(); //calculate first week days
noOfExcution -= weekdays.filter(x=>x>=date.getDay()).length;
day += noOfExcution % weekdays.length > 0
? weekdays[noOfExcution % weekdays.length - 1]
: weekdays[weekdays.length-1]; //calulate last week days
var x = Math.floor((noOfExcution-0.1) / weekdays.length) * 7 +
day; //calculate in between dates
date.setDate(date.getDate() + x); //setting end date
console.log(date.toLocaleString()); //printing end date
It can be done like this. I somehow figured out a method.
function calcDate() {
var type="weekly";
var date1=new Date('2018,mar,18');
var date2;
var gdays=[];
gdays[0]=0;
gdays[1]=1;
count=10;
if(type=="weekly"){
var d1=date1.getDate();
var year=date1.getFullYear();
var month=date1.getMonth();
while(count>0){
var temp=[];
var tempdays=[];
tempdays=getDaysInMonth(month,year,d1);
console.log(tempdays);
for(var i=0;i<=gdays.length-1;i++) {
var on=gdays[i];
var ddd=days(year,month,on);
for(var j=0;j<=ddd.length-1;j++){
temp.push(ddd[j]);
}
}
temp.sort(function(a, b){return a-b});
console.log(temp);
for(var k=0;k<=temp.length-1;k++){
if(tempdays.includes(temp[k])){
var finalday=temp[k];
count--;
alert("count" +count);
if(count==0) break;
}
}
if(count==0){
alert("final day"+finalday);
date2=new Date(year,month,finalday);
alert(date2);
}
if(count>0){
d1=0;
month=month+1;
if(month>11){
month=0;
year=year+1;
}
}
}
}
function days(year,month,on){
var day, counter, date;
var days=[];
day = 1;
counter = 0;
date = new Date(year, month, day);
while (date.getMonth() === month) {
if (date.getDay() ==on) { // Sun=0, Mon=1, Tue=2, etc.
days[counter]=date.getDate();
counter += 1;
}
day += 1;
date = new Date(year, month, day);
}
return(days);
}
function getDaysInMonth(month, year,day) {
day++;
alert(day);
var date = new Date(year, month, day);
var days = [];
while (date.getMonth() === month) {
var i=date.getDate();
days.push(i);
date.setDate(date.getDate()+1);
}
return days;
}
}
I need to find this month, previous month and the next month of a specific date.
For example, date was set to 31 of every month, what I expect to get the date is
2018-02-28, 2018-03-31 and 2018-04-30. For those dates which has no 31, than it becomes the day before.
And finally generate 2 period, 2018-02-28 to 2018-03-29, 2018-03-30 to 2018-04-31.
I don't know how to handle feb and the month which less than 31.
var d = new Date();
var tyear = d.getFullYear(); //2018
var tmonth = d.getMonth(); //2
new Date(2018, tmonth-1, 31);//output 2018-03-02 not what I wanted
A simple algorithm is to add months to the original date, and if the new date is wrong, set it to the last day of the previous month. Keeping the original date values unmodified helps, e.g.
/* #param {Date} start - date to start
** #param {number} count - number of months to generate dates for
** #returns {Array} monthly Dates from start for count months
*/
function getMonthlyDates(start, count) {
var result = [];
var temp;
var year = start.getFullYear();
var month = start.getMonth();
var startDay = start.getDate();
for (var i=0; i<count; i++) {
temp = new Date(year, month + i, startDay);
if (temp.getDate() != startDay) temp.setDate(0);
result.push(temp);
}
return result;
}
// Start on 31 Jan in leap year
getMonthlyDates(new Date(2016,0,31), 4).forEach(d => console.log(d.toString()));
// Start on 31 Jan not in leap year
getMonthlyDates(new Date(2018,0,31), 4).forEach(d => console.log(d.toString()));
// Start on 30 Jan
getMonthlyDates(new Date(2018,0,30), 4).forEach(d => console.log(d.toString()));
// Start on 5 Jan
getMonthlyDates(new Date(2018,0,5), 4).forEach(d => console.log(d.toString()));
I think you're going to need an array with 12 numbers in it. Each number is the amount of days in each month and the numbers in the array go in order (first number is 31 because January has 31 days, second is 28 or 29 for Feb), etc. Then you'll get the month number from your input date and look in the array at the number corresponding to the month number +/- 1.
You'll then need to construct a date for the previous month and the next month based on the number of days in the current month.
See comments inline:
let daysInMonths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
document.getElementById("date").addEventListener("input", function(){
console.clear();
// Create new Date based on value in date picker
var selectedDate = new Date(this.value + 'T00:00');
var year = selectedDate.getYear();
// Determine if it is a leap year (Feb has 29 days) and update array if so.
if (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0)) {
daysInMonths[1] = 29;
}
var selectedDateMonth = selectedDate.getMonth();
// Get previous month number (if current month is January, get December)
let prevMonth = selectedDateMonth > 0 ? selectedDateMonth - 1 : 11;
let prevMonthDate = null;
// If selected date is last day of month...
if(selectedDate.getDate() === daysInMonths[selectedDateMonth]){
// Create new date that takes the selected date and subtracts the correct amount of
// days from it based on a lookup in the array.
var newDate1 = new Date(selectedDate.getTime());
prevMonthDate =
new Date(newDate1.setDate(selectedDate.getDate() - daysInMonths[selectedDateMonth]));
} else {
// Create a new date that is last month and one day earlier
var newDate2 = new Date(selectedDate.getTime());
prevMonthDate =
new Date(new Date(newDate2.setDate(selectedDate.getDate() - 1))
.setMonth(selectedDate.getMonth() - 1));
}
// Get next month (if current month is December, get January
let nextMonth = selectedDateMonth < 11 ? selectedDateMonth + 1 : 0;
let nextMonthDate = null;
// Same idea for next month, but add instead of subtract.
// If selected date is last day of month...
if(selectedDate.getDate() === daysInMonths[selectedDateMonth]){
var newDate3 = new Date(selectedDate.getTime());
nextMonthDate =
new Date(newDate3.setDate(selectedDate.getDate() + daysInMonths[selectedDateMonth + 1]));
} else {
var newDate4 = new Date(selectedDate.getTime());
nextMonthDate = new Date(new Date(newDate4.setDate(selectedDate.getDate() + 1)).setMonth(selectedDate.getMonth() + 1));
}
console.log("Last month date: " + prevMonthDate.toLocaleDateString());
console.log("Next month date: " + nextMonthDate.toLocaleDateString());
});
<p>Pick a date: <input type="date" id="date"></p>
Use this approach:
Javascript Date Object – Adding and Subtracting Months
From the Author
There is a slight problem with the Javascript Date() Object when trying to advance to the next month or go back to the previous month.
For example, if your date is set to October 31, 2018 and you add one month, you'd probably expect the new date to be November 30, 2018 because November 31st doesn't exist. This, however, isn't the case.
Javascript automatically advances your Date object to December 1st. This functionality is very useful in most situations(i.e. adding days to a date, determining the number of days in a month or if it's a leap year), but not for adding/subtracting months. I've put together some functions below that extend the Date() object: nextMonth() and prevMonth().
function prevMonth() {
var thisMonth = this.getMonth();
this.setMonth(thisMonth - 1);
if (this.getMonth() != thisMonth - 1 && (this.getMonth() != 11 || (thisMonth == 11 && this.getDate() == 1)))
this.setDate(0);
}
function nextMonth() {
var thisMonth = this.getMonth();
this.setMonth(thisMonth + 1);
if (this.getMonth() != thisMonth + 1 && this.getMonth() != 0)
this.setDate(0);
}
Date.prototype.nextMonth = nextMonth;
Date.prototype.prevMonth = prevMonth;
var today = new Date(2018, 2, 31); //<----- March 31st, 2018
var prevMonth = new Date(today.getTime());
prevMonth.prevMonth();
console.log("Previous month:", prevMonth);
console.log("This month:", today)
var nextMonth = new Date(today.getTime());
nextMonth.nextMonth();
console.log("Next month:", nextMonth);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Dates and time zones are a real pain in JS, so challenge accepted.
I broke it down in two steps:
- Count the days of prev and next month
- Compare with selected day and pick the lowest number
Testcases included
function createUTCDate(year, month, day) {
return new Date(Date.UTC(year, month, day));
}
function splitDate(date) {
return {
year: date.getUTCFullYear(),
month: date.getUTCMonth(),
day: date.getUTCDate()
};
}
function numberOfDaysInMonth(year, month) {
return new Date(year, month + 1, 0).getDate();
}
function dateNextMonth(dateObj) {
const daysNextMonth = numberOfDaysInMonth(dateObj.year, dateObj.month + 1);
const day = Math.min(daysNextMonth, dateObj.day);
return createUTCDate(dateObj.year, dateObj.month + 1, day);
}
function datePreviousMonth(dateObj) {
const daysPrevMonth = numberOfDaysInMonth(dateObj.year, dateObj.month - 1);
const day = Math.min(daysPrevMonth, dateObj.day);
return createUTCDate(dateObj.year, dateObj.month - 1, day);
}
const log = console.log;
function print(dateString) {
const date = new Date(dateString);
const dateObj = splitDate(date);
log("Previous: ", datePreviousMonth(dateObj).toISOString());
log("Selected: ", date.toISOString());
log("Next: ", dateNextMonth(dateObj).toISOString());
log("--------------");
}
const testCases = [
"2018-03-01 UTC",
"2018-03-31 UTC",
"2018-01-01 UTC",
"2018-12-31 UTC"
];
testCases.forEach(print);
Please note that the hack with new Date(xxx + " UTC") is not according to spec and is just there for testing purposes. Results may vary per browser.
You should choose an input format and construct your dates accordingly.
I handle it in a foolish way by concatenating string
let daysInMonths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
let months = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
var target = nexttarget = lasttarget = "29"; //target day
if (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0)) {
daysInMonths[1] = 29;
}
function findLastDay(target, month){
if(target > daysInMonths[month]){
target = daysInMonths[month];
}
return target;
}
then
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth();
target = findLastDay(target, month);
var this_month = year+"-"+months[month]+"-"+target;
console.log(this_month);//2018-03-29
// next month
if(month == 11){
nextmonth = 0;
nextyear = year + 1;
}else{
nextmonth = month+1;
nextyear = year;
}
nexttarget = findLastDay(nexttarget, nextmonth);
var next_month = nextyear+"-"+months[nextmonth]+"-"+nexttarget;
console.log(next_month);//2018-04-29
//last month
if(month == 0){
lastmonth = 11;
lastyear = year - 1;
}else{
lastmonth = month - 1;
lastyear = year;
}
lasttarget = findLastDay(lasttarget, lastmonth);
var last_month = lastyear+"-"+months[lastmonth]+"-"+lasttarget;
console.log(last_month);//2018-02-28
Date handling is tricky at the best of times. Don't do this yourself. Use Moment.js.
var target = 31;
var today = moment().date(target).calendar();
// today == '03/31/2018'
var nextMonth = moment().date(target).add(1, 'month').calendar();
// nextMonth == '04/30/2018'
var lastMonth = moment().date(target).subtract(1, 'month').calendar()
// lastMonth == '02/28/2018'
I'm very new to javascript and moment.js. I'm working on a site where we need to list out the next 5 possible pickup dates for a product, excluding weekends and holidays. I have a start on this, using a function I found online. It works well at skipping the weekends, however I can't get the holidays working. Any help would be appreciated. http://jsfiddle.net/rLjQx/940/
moment.fn.addWorkdays = function(days) {
var increment = days / Math.abs(days);
var date = this.clone().add(Math.floor(Math.abs(days) / 5) * 7 * increment, 'days');
var remaining = days % 5;
while (remaining != 0) {
date.add(increment, 'days');
// Check for weekends and a static date
if (!(date.isoWeekday() === 6) && !(date.isoWeekday() === 7) && !(date.date() === 1 && date.month() === 4)) {
remaining -= increment;
}
}
return date;
};
for (count = 0; count < 5; count++) {
var test = moment().addWorkdays(count + 1).format('dddd, MMMM Do YYYY');
document.write("Pickup date : " + test);
document.write("<br />");
}
Here's a quick and easy solution using my moment-holiday plugin. :)
function getNextWorkDays(count, format) {
if (!count) { count = 5; }
if (!format) { format = 'dddd, MMMM Do YYYY'; }
var days = [];
var d = moment().startOf('day');
for (i = 0; i < count; i++) {
d.add(1, 'day');
if (d.day() === 0 || d.day() === 6 || d.isHoliday()) {
count++;
continue;
}
days.push(moment(d).format(format));
}
return days;
}
var days = getNextWorkDays();
alert("The following days are available for pickup:\n\n" + days.join("\n"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdn.rawgit.com/kodie/moment-holiday/v1.2.0/moment-holiday.js"></script>
I know this is an old post, but now that moment is deprecated using built-in date methods is a much better approach. Here is a gist I created doing just that and is copied below for reference.
function isHoliday(date: Date) {
const holidays = {
MD: {
// Month, Day
'1/1': "New Year's Day",
'7/4': 'Independence Day',
'11/11': "Veteran's Day",
'12/25': 'Christmas Day',
'12/31': "New Year's Eve"
},
MODW: {
// Month, Occurence, Day of Week
'1/3/1': 'Martin Luther King Jr. Day',
'2/3/1': 'Presidents Day',
'5/L/1': 'Memorial Day',
'9/1/1': 'Labor Day',
'10/2/1': 'Columbus Day',
'11/4/4': 'Thanksgiving Day'
}
};
const dayOfTheMonth = date.getDate();
const month = date.getMonth() + 1;
const dayOfTheWeek = date.getDay(); // 0 - 6, Su -> Sa
const lastDayOfTheMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
const isLastOccurrence = dayOfTheMonth + 7 > lastDayOfTheMonth;
let currentOccurrenceDay = dayOfTheMonth,
occurrence = 0;
for (currentOccurrenceDay; currentOccurrenceDay > 0; currentOccurrenceDay -= 7) occurrence++;
return !!(
holidays.MD?.[`${month}/${dayOfTheMonth}`] ||
(isLastOccurrence && holidays.MODW?.[`${month}/L/${dayOfTheWeek}`]) ||
holidays.MODW?.[`${month}/${occurrence}/${dayOfTheWeek}`]
);
}
I want to generate next working day using JavaScript.
This is my code as of now
var today = new Date();
today.setDate(today.getDate());
var tdd = today.getDate();
var tmm = today.getMonth()+1;
var tyyyy = today.getYear();
var date = new Date();
date.setDate(date.getDate()+3);
Problem is, on Fridays it returns Saturday's date whereas I want it to be Monday
This will choose the next working day when a date is passed to it.
I suggest you normalise the date you pass, so you will not be surprised around summertime/wintertime change
Updated in 2023
const getNextWork = date => {
let day = date.getDay(), add = 1;
if (day === 6) add = 2; else
if (day === 5) add = 3;
date.setDate(date.getDate() + add); // will correctly handle 31+1 > 32 > 1st next month
return date;
};
// tests:
const dt = new Intl.DateTimeFormat("en-US", {
weekday: "short",
year: "numeric",
month: "long",
day: "numeric",
timeZone: "UTC",
timeZoneName: "short",
hour: "numeric",
minute: "numeric",
});
const aDay = 24 * 60 * 60 * 1000;
// 26th of March 2023 is daylight savings date in my country
let date = new Date(2023, 2, 24, 15, 0, 0, 0).getTime();
for (let i = 0; i < 7; i++) {
const d = new Date(date + i * aDay);
console.log(dt.format(d), "-->", dt.format(getNextWork(d)));
}
Older code:
var today = new Date(2016, 7, 26,12,0,0,0,0); // Friday at noon
console.log("today, Monday",today,"day #"+today.getDay());
var next = new Date(today.getTime());
next.setDate(next.getDate()+1); // tomorrow
while (next.getDay() == 6 || next.getDay() == 0) next.setDate(next.getDate() + 1);
console.log("no change ",next,"day #"+next.getDay());
console.log("-------");
// or without a loop:
function getNextWork(d) {
d.setDate(d.getDate()+1); // tomorrow
if (d.getDay()==0) d.setDate(d.getDate()+1);
else if (d.getDay()==6) d.setDate(d.getDate()+2);
return d;
}
next = getNextWork(today); // Friday
console.log("today, Friday",today);
console.log("next, Monday ",next);
console.log("-------");
today = new Date(2016, 7, 29,12,0,0,0); // Monday at noon
next = getNextWork(today); // Still Monday at noon
console.log("today, Monday",today);
console.log("no change ",next);
console.log("-------");
// Implementing Rob's comment
function getNextWork1(d) {
var day = d.getDay(),add=1;
if (day===5) add=3;
else if (day===6) add=2;
d.setDate(d.getDate()+add);
return d;
}
today = new Date(2016, 7, 26,12,0,0,0,0); // Friday at noon
next = getNextWork1(today); // Friday
console.log("today, Friday",today);
console.log("next, Monday ",next);
console.log("-------");
today = new Date(2016, 7, 26,12,0,0,0,0); // Monday at noon
next = getNextWork1(today); // Monday
console.log("today, Monday",today);
console.log("no change ",next);
You can add 1 day at at time until you get to a day that isn't Saturday or Sunday:
function getNextBusinessDay(date) {
// Copy date so don't affect original
date = new Date(+date);
// Add days until get not Sat or Sun
do {
date.setDate(date.getDate() + 1);
} while (!(date.getDay() % 6))
return date;
}
// today, Friday 26 Aug 2016
[new Date(), new Date(2016,7,26)].forEach(function(d) {
console.log(d.toLocaleString() + ' : ' + getNextBusinessDay(d).toLocaleString());
});
You can also test the day and add extra to get over the weekend:
// Classic Mon to Fri
function getNextWorkDay(date) {
let d = new Date(+date);
let day = d.getDay() || 7;
d.setDate(d.getDate() + (day > 4? 8 - day : 1));
return d;
}
for (let i=0, d=new Date(); i<7; i++) {
console.log(`${d.toDateString()} -> ${getNextWorkDay(d).toDateString()}`);
d.setDate(d.getDate() + 1);
}
Here is another approach where the work week can be specified using ECMAScript weekday numbers (Sun = 0, Mon = 1, etc.). Dates outside the range are shifted to the start of the next work week.
This is useful where the week is not the classic Mon to Fri, such as the Middle East where Sat to Wed is common or for some who might work Fri to Mon (or whatever).
function getNext(start, end, date) {
let d = new Date(+date);
d.setDate(d.getDate() + 1);
let day = d.getDay();
// Adjust end and day if necessary
// The order of tests and adjustment is important
if (end < start) {
if (day <= end) {
day += 7;
}
end += 7;
}
// If day is before start, shift to start
if (day < start) {
d.setDate(d.getDate() + start - day);
// If day is after end, shift to next start (treat Sunday as 7)
} else if (day > end) {
d.setDate(d.getDate() + 8 - (day || 7));
}
return d;
}
// Examples
let f = new Intl.DateTimeFormat('en-GB', {
weekday:'short',day:'2-digit', month:'short'});
let d = new Date();
[{c:'Work days Mon to Fri',s:1,e:5},
{c:'Work days Sat to Wed',s:6,e:3},
{c:'Work days Fri to Mon',s:5,e:1}
].forEach(({c,s,e}) => {
for (let i = 0; i < 7; i++) {
!i? console.log(`\n${c}`) : null;
console.log(`${f.format(d)} => ${f.format(getNext(s, e, d))}`);
d.setDate(d.getDate() + 1);
}
});
Check this out: https://jsfiddle.net/e9a4066r/
function get_next_weekday (date) {
var tomorrow = new Date(date.setDate(date.getDate() + 1))
return tomorrow.getDay() % 6
? tomorrow
: get_next_weekday(tomorrow)
}
The accepted answer will skip one day at a time, which answers the OPs question, but for anyone looking to add a variable number of days while still skipping weekends the function below may be helpful:
function addWorkDays(date, days) {
while (days > 0) {
date.setDate(date.getDate() + 1);
if (date.getDay() != 0 && date.getDay() != 6) {
days -= 1;
}
}
return date;
}
Thought I'd throw my hat in the ring here with:
function getNextBusinessDate(date) {
// Create date array [S, M, T, W, T, F, S]
const days = new Array(7);
let nextDate = date;
for(let i = 0; i < 7; i++) {
days[nextDate.getDay()] = new Date(nextDate);
nextDate.setDate(nextDate.getDate() + 1);
}
// Shift indices to index as though array was [M, T, W, T, F, S, S]
// Then truncate with min to make F, S, S all yield M for next date
return days[Math.min((date.getDay() + 6) % 7 + 1, 5) % 5 + 1];
}
I have some pure javascript calendar.
my problem is that I want to add the days before the choosen month.
|so|mo|di|mi|do|fr|sa|
______________________
|29|30|31|1 |2 |3 | 4| <-- here 29,30,31
______________________
|5 |6 |.....
I hope it's clear what I mean. Here my script
<script type="text/javascript">
function Calendar(id, year, month) {
var elem = document.getElementById(id)
var mon = month - 1 // (1)
var d = new Date(year, mon)
var table = ['<table><tr>']
for (var i=0; i<d.getDay(); i++) {
table.push('<td></td>') // here days before this mounth
}
// main body (3)
while(d.getMonth() == mon) {
table.push('<td>'+d.getDate()+'</td>')
if (d.getDay() % 7 == 6) { // (4)
table.push('</tr><tr>')
}
d.setDate(d.getDate()+1)
}
n = 1
for (var i=d.getDay(); i<8; i++) {
table.push('<td>' + (n++) + '</td>')
}
table.push('</tr></table>')
elem.innerHTML = table.join('\n')
}
new Calendar("cal", 2015, 9)
</script>
I try around with setDate() but I don't mastered it jet.
As mentioned in the comments setDate (and the Date constructor) can have negative values. But instead of a pre and post loop, you could set the startdate to the beginning of the week and always add entire weeks:
function Calendar(id, year, month) {
var elem = document.getElementById(id)
var mon = month - 1; // (1)
var d = new Date(year, mon, 1 );
var start = 1-d.getDay();
var table = ['<table>'];
while(d.getMonth() <= mon) {
table.push('<tr>');
for(var i =0 ; i< 7; i++){
d = new Date(year,mon,start++);
table.push('<td>'+d.getDate() + '</td>')
}
table.push('</tr>');
}
table.push('</table>')
elem.innerHTML = table.join('\n')
}
new Calendar("cal", 2015, 9);
fiddle
edit: an alternate version just in case the 'other' months should have a lighter colour: fiddle
Try defining start and end dates for your month view and iterate from start to end.
var startDate = new Date(d);
var endDate = new Date(d.getFullYear(), d.getMonth() + 1, d.getDate() - 1);
while (startDate.getDay() != 0) {
startDate.setDate(startDate.getDate() - 1);
}
while (endDate.getDay() != 6) {
endDate.setDate(endDate.getDate() + 1);
}
I have managed it in this way:
tmp = new Date(year, mon, 0).getDate() // return day of the last month
for (var i=0; i<(d.getDay() + 6) % 7; i++) { // count days
table.splice(1,0,'<td>'+(tmp-i)+'</td>') // adding days at first pos of table
}
Thanks
Date object has method .setDate() for adding days to get updated date.
var someDate = new Date(2015, 06, 05); // (year, month, date)
console.log('old date : ' + someDate);
var numberOfDays = 6; // No of day add or remove. use negative sign for remove days
someDate.setDate(someDate.getDate() + numberOfDays); //date object with new date (new day, new month and new year)
console.log('new date : ' + someDate);