I had html table with 31 rows and 4 table columns I am trying to write javascript(Jquery) to bind first column with dates of the current month.
This is my code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function ($) {
var table = document.getElementById("myTable")
var myDate = new Date();
myDate.setDate(myDate.getDate() - 1)
for (var i = 0; i < 16; i++) {
var row = document.createElement("tr");
var cell = document.createElement("td");
cell.innerText = myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getYear();
myDate.setDate(myDate.getDate() + 1)
row.appendChild(cell);
table.tBodies[0].appendChild(row);
}
});
</script>
</head>
<body>
<table id="myTable"></table>
</body>
</html>
Here's a solution that also breaks the loop in case we're dealing with a shorter month (e.g. in April, the table will not display 31/4/2013):
$(function() {
var table = document.getElementById("myTable")
var myDate = new Date();
var month = myDate.getMonth() + 1;
var firstOfMonth = new Date();
firstOfMonth.setDate(1);
for (var i = 0; i < 31; i++) {
myDate.setDate(firstOfMonth.getDate() + i);
if (myDate.getMonth() + 1 != month) break;
var row = document.createElement("tr");
var cell = document.createElement("td");
cell.innerText = formatDate(myDate, dateFormat);
row.appendChild(cell);
table.tBodies[0].appendChild(row);
}
});
Link to jsfiddle
Note: the OP mentions javascript as the 1st option (jQuery only in backets), that's why I left the code in plain js (with the exception of the DOM ready wrapper).
In case that you want a solution that fully independent of jQuery, bind the DOM content load event as described in this SO post
I suppose that your question is related to this question.
In other words, you are looking for a Javascript function that should add to an empty table one row for each day of the current month; each row should have four columns named "Date", "Start Time", "End Time" and "Hour Type" and the first column ("Date") should contain a text input with a date in the format "dd/mm/yyyy".
If so, here is my solution:
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
// See https://stackoverflow.com/questions/4881938/javascript-calculate-number-of-days-in-month-for-a-given-year
Date.prototype.daysInMonth = function(year, month) {
var monthStart = new Date(year, month, 1);
var monthEnd = new Date(year, month + 1, 1);
var monthLength = Math.round((monthEnd - monthStart) / (1000 * 60 * 60 * 24));
var mm = ((month + 1) < 10) ? ('0' + (month + 1)) : (month + 1);
var ret = new Array();
for (var i = 1; i <= monthLength; i++) {
var dd = (i < 10) ? ('0' + i) : i;
ret.push(dd + '/' + mm + '/' + year);
}
return ret;
};
function addRows(table, dates) {
var idx = 1;
for (var i in dates) {
table.append('<tr>'+
'<td><input name="date'+idx+'" id="date'+idx+'" class="date" value="'+dates[i]+'"></td>'+
'<td><input name="startTime'+idx+'" id="startTime'+idx+'"></td>'+
'<td><input name="endTime'+idx+'" id="EndTime'+idx+'"></td>'+
'<td>'+
'<select name="hourType'+idx+'" id="hourType'+idx+'">'+
'<option value="">Please select</option>'+
'<option value="1">Regular</option>'+
'<option value="2">Overtime</option>'+
'</select>'+
'</td>'+
'</tr>');
idx++;
}
}
$(function() {
var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth();
var dates = myDate.daysInMonth(year, month);
var table = $("#myTable").find("tbody");
addRows(table, dates);
});
</script>
</head>
<body>
<form>
<table id="myTable">
<thead>
<tr>
<th>Date</th>
<th>Start Time</th>
<th>End Time</th>
<th>Hour Type</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
</body>
</html>
Obviously, the table may also have less than 31 rows, depending on the number of days of the current month.
You are trying to append to the tbody but you didn't defined one. Change HTML to
<table id="myTable"><tbody></tbody></table>
And if you already have rows and cells, you want just to prepend the new cells
for (var i = 0; i < 16; i++) {
var cell = document.createElement("td");
cell.innerText = myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getFullYear();
myDate.setDate(myDate.getDate() + 1)
$(table).find('tr').eq(i).prepend(cell);
}
Try this out :- http://jsfiddle.net/adiioo7/9fQxq/
Use
table.appendChild(row);
instead of
table.tBodies[0].appendChild(row);
Here is a working jsFiddle.
The way I would use :
var d = new Date(); // get current date
var currentMonth = d.getMonth(); // save current month
d.setDate(1); // set date to first day of current month
// (...) create your table header
// create 31 rows
for(var i=1; i<=31; i++) {
var line = $(document.createElement('tr'));
if(d.getMonth() == currentMonth) {
// add the date to the first column
line.append('<td>'+dateToDMY(d)+'</td>')
.append('<td></td>')
.append('<td></td>')
.append('<td></td>');
} else {
// in case you always want to have 31 rows, whatever the month
line.append('<td colspan="4" class="empty"> </td>');
}
$('#myTable').append(line); // append the line to the table
d.setDate(d.getDate() + 1); // increase the date
}
/*
* Format Date : dd/mm/yyyy
* Based on Adrian Maire work
* http://stackoverflow.com/a/10685571/1238019
*/
function dateToDMY(date) {
var d = date.getDate();
var m = date.getMonth() + 1;
var y = date.getFullYear();
return '' + (d <= 9 ? '0' + d : d) + '/' + (m<=9 ? '0' + m : m) + '/' + y;
}
Note that using setDate function will automaticaly update the date month with an out of range day (then you don't have to care about leap years)
If I understood your question correctly than you want to bind the first column with dates in current month? Fiddle
$(document).ready(function () {
// Get today date
var d = new Date();
//Get Days of Month
var n = new Date(d.getYear(), d.getMonth()+1, 0).getDate();
//Run loop for number of days
for (var i = 1; i <= n; i++) {
//Create row data
var row = '<tr><td>'+ i + "/" + (d.getMonth() + 1) + "/" + d.getFullYear()+'</td><td><td/><td><td/><td><td/></tr>';
// Append row data to table
$('#myTable').append(row);
}
});
You question is not very clear.. but From your code what I understood is that you are creating table 16 rows in which column 1 has date from (CURRENT_DATE - 1) to (CURRENT_DATE+14).
I used template to render table rows. Update the templates as you like to render other columns.
DEMO: http://jsfiddle.net/nLQ7q/3/
$(document).ready(function ($) {
var table = $("#myTable")
var myDate = new Date();
myDate.setDate(myDate.getDate() - 1);
var rowTmpl = '<tr><td>{DATE}</td><td> </td><td> </td><td> </td></tr>';
var rows = [];
for (var i = 0; i < 16; i++) {
var row = rowTmpl.replace('{DATE}', myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getYear());
myDate.setDate(myDate.getDate() + 1)
rows.push(row);
}
table.html(rows.join(''));
});
A little bit fancy version here with a date picker http://jsfiddle.net/nLQ7q/4/
You can tryout this: FIDDLE
<table id="myTable"></table>
Mind it, you don't have tbody in your markup, so i put that and used the below jquery
-JQUERY-:
jQuery(document).ready(function ($) {
var table = $("#myTable");
var myDate = new Date();
myDate.setDate(myDate.getDate() - 1)
for (var i = 0; i < 16; i++) {
var row = $("<tr>");
var cell = $("<td>");
myDate.setDate(myDate.getDate() + 1)
cell.text(myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getFullYear());
row.append(cell);
table.find('tbody').append(row);
}
$('#myTable').find('tr').each(function (i, v) {
$(this).append('<td/><td/><td/>');
$('td:not(:first)', this).text(i + 1);
});
});
At each row in the tr filled first td with dates and created other tds with some default text.
I have comeup with this : FIDDLE
$(function ($) {
var table = $("#myTable")
var myDate = new Date();
myDate.setDate(myDate.getDate() - 1);
for (var i = 0; i < 16; i++)
{
var row = $('<tr/>');
var cell = $('<td/>');
cell.text
(myDate.getDate() +
"/" +
(myDate.getMonth() + 1) +
"/" +
(1900 + myDate.getYear()));
myDate.setDate(myDate.getDate() + 1);
row.append(cell);
table.append(row);
}
});
Related
I want to return chosen by click date in alert window. For example, if today is 12 April and I clicked 1 January of 2016 alert should show 2016-1-1.
Here is my Javascript code:
var Cal = function(divId) {
//Store div id
this.divId = divId;
// Days of week, starting on Sunday
this.DaysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
// Months, stating on January
this.Months = ['January', 'February', 'Marhc', 'April', 'May', 'June', 'July', 'August', 'September', 'Octomber', 'November', 'December'];
// Set the current month, year
var d = new Date();
this.currMonth = d.getMonth();
this.currYear = d.getFullYear();
this.currDay = d.getDate();
};
// Goes to next month
Cal.prototype.nextMonth = function() {
if (this.currMonth == 11) {
this.currMonth = 0;
this.currYear = this.currYear + 1;
} else {
this.currMonth = this.currMonth + 1;
}
this.showcurr();
};
// Goes to previous month
Cal.prototype.previousMonth = function() {
if (this.currMonth == 0) {
this.currMonth = 11;
this.currYear = this.currYear - 1;
} else {
this.currMonth = this.currMonth - 1;
}
this.showcurr();
};
// Show current month
Cal.prototype.showcurr = function() {
this.showMonth(this.currYear, this.currMonth);
};
// Show month (year, month)
Cal.prototype.showMonth = function(y, m) {
var d = new Date()
// First day of the week in the selected month
,
firstDayOfMonth = new Date(y, m, 1).getDay()
// Last day of the selected month
,
lastDateOfMonth = new Date(y, m + 1, 0).getDate()
// Last day of the previous month
,
lastDayOfLastMonth = m == 0 ? new Date(y - 1, 11, 0).getDate() : new Date(y, m, 0).getDate();
var html = '<table>';
// Write selected month and year
html += '<thead><tr>';
html += '<td colspan="7">' + this.Months[m] + ' ' + y + '</td>';
html += '</tr></thead>';
// Write the header of the days of the week
html += '<tr class="days">';
for (var i = 0; i < this.DaysOfWeek.length; i++) {
html += '<td>' + this.DaysOfWeek[i] + '</td>';
}
html += '</tr>';
// Write the days
var i = 1;
do {
var dow = new Date(y, m, i).getDay();
// If Sunday, start new row
if (dow == 0) {
html += '<tr>';
}
// If not Sunday but first day of the month
// it will write the last days from the previous month
else if (i == 1) {
html += '<tr>';
var k = lastDayOfLastMonth - firstDayOfMonth + 1;
for (var j = 0; j < firstDayOfMonth; j++) {
html += '<td class="not-current">' + k + '</td>';
k++;
}
}
// Write the current day in the loop
var chk = new Date();
var chkY = chk.getFullYear();
var chkM = chk.getMonth();
if (chkY == this.currYear && chkM == this.currMonth && i == this.currDay) {
html += '<td class="today">' + i + '</td>';
} else {
html += '<td class="normal">' + i + '</td>';
}
// If Saturday, closes the row
if (dow == 6) {
html += '</tr>';
}
// If not Saturday, but last day of the selected month
// it will write the next few days from the next month
else if (i == lastDateOfMonth) {
var k = 1;
for (dow; dow < 6; dow++) {
html += '<td class="not-current">' + k + '</td>';
k++;
}
}
i++;
} while (i <= lastDateOfMonth);
// Closes table
html += '</table>';
// Write HTML to the div
document.getElementById(this.divId).innerHTML = html;
};
// On Load of the window
window.onload = function() {
// Start calendar
var c = new Cal("divCal");
c.showcurr();
// Bind next and previous button clicks
getId('btnNext').onclick = function() {
c.nextMonth();
};
getId('btnPrev').onclick = function() {
c.previousMonth();
};
}
// Get element by id
function getId(id) {
return document.getElementById(id);
}
function MyFunction(){
alert(document.getElementById('dge').text);
}
I looked at the calendar in the example, and all of the calendar dates have data-year, data-month and data-day set (as far as I could see). So a simple idea would be to attach an event to every a that has a data-month, data-year, and data-day set and then alert the date as follows ...
$("a[data-year][data-month][data-day]").on("click", function(){ alert($(this).data("year")+"-"+$(this).data("month")+"-" +$(this).data("day"));})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-day="12" href="content.php?year=2017&month=4&day=12&lang=ge" data-month="4" data-year="2017">12</a>
Furthermore, if your code is open to little more modification, then all the a tags that are dates could be in a class like class="dateClass" so that your selector does not get so complex like above, instead only looks for the elements belonging to this class ... Like the snippet below :
$(".dateClass").on("click", function(){ alert($(this).data("year")+"-"+$(this).data("month")+"-" +$(this).data("day"));})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="dateClass" data-day="12" href="content.php?year=2017&month=4&day=12&lang=ge" data-month="4" data-year="2017">12</a>
---- EDIT ----
Given the further request ( and not using jQuery this time ), you could add the date, month, and year to the a tag as attributes and also send the this to the function so that the currently clicked a element is sent to function (get rid of the duplicate id dge by the way) like below :
html += '<td class="normal">' + i + '</td>';
becomes
html += '<td class="normal">' + i + '</td>';
Then the below snippet should do the trick :
function MyFunction(val){
alert(val.getAttribute("day")+"-"
+val.getAttribute("month")+"-"
+val.getAttribute("year"));
};
3
4
Hello I am trying to add increment in my all form fields from zero to the number whenever I add new clone it assigns the next number to the name tag, I tried all the ways but no any methods works for me.
Here is my fiddle
https://jsfiddle.net/o5wam5r2/
and here is my JS code
var formItem;
$(document).ready(function() {
//Clone and remove your div instead of hiding it
formItem = $('.ScheduleextraPartTemplate').clone();
$('.ScheduleextraPartTemplate').remove();
formItem.addClass('clone clone-1');
$('#Schedulecontainer').append(formItem);
});
$(document).on('click', '#ScheduleaddRow', function() {
var cloneForm = $('.clone').last().clone();
var cloneNum = $('.clone').length;
cloneForm.removeClass('clone-'+cloneNum).addClass('clone-' + (cloneNum+1));
var date = cloneForm.find('[name="txtSchedule"]').val();
cloneForm.find('[name="txtSchedule"]').val(addOneMonth(date));
$('#Schedulecontainer').append(cloneForm);
})
function addOneMonth(date) {
var year = parseInt(date.split("-")[0]);
var month = parseInt(date.split("-")[1]) + 1;
var day = parseInt(date.split("-")[2]);
if(month > 12) {
month = month - 12;
year++
}
return year + "-" + month + "-" + day;
}
I fixed it by changing a little piece of code
var formItem;
var counter = 0;
$(document).ready(function() {
//Clone and remove your div instead of hiding it
formItem = $('.ScheduleextraPartTemplate').clone();
formItem.find('[name^=txtSchedule]')[0].name = "txtSchedule" + counter;
formItem.find('[name^=txtScheduleAmountPay]')[0].name = "txtScheduleAmountPay" + counter;
$('.ScheduleextraPartTemplate').remove();
formItem.addClass('clone clone-1');
$('#Schedulecontainer').append(formItem);
});
$(document).on('click', '#ScheduleaddRow', function() {
var lens = counter++;
var cloneForm = $('.clone').last().clone();
var cloneNum = $('.clone').length;
cloneForm.removeClass('clone-'+cloneNum).addClass('clone-' + (cloneNum+1));
var date = cloneForm.find('[name^="txtSchedule"]').val();
cloneForm.find('[name^="txtSchedule"]').val(addOneMonth(date));
cloneForm.find('[name^=txtSchedule]')[0].name = "txtSchedule" + (lens+1);
cloneForm.find('[name^=txtScheduleAmountPay]')[0].name = "txtScheduleAmountPay" + (lens+1);
$('#Schedulecontainer').append(cloneForm);
})
function addOneMonth(date) {
var d = new Date( date );
d.setMonth( d.getMonth( ) + 1 );
return d.getFullYear() + '-' + ("0" + ((d.getMonth() + 1))).slice(-2) + '-' + ("0" + (d.getDate())).slice(-2);
}
I'm writing a script that prompts you to enter a low temperature and a high one. When you click add temperatures, it displays todays date, low temp, and high temp, and the average of low temps and high temps. Each time you enter these temps, the previous date before the last is displayed with those temps and the averages. When I try to run the code I get this: TypeError: tempTable is null. Any suggestions?
(function() {
//Array to hold temp data
var temperatures = new Array();
// function which updates the array
function addTemp() {
var lowTemp = document.getElementById("lowTemp").value;
var highTemp = document.getElementById("highTemp").value;
if (lowTemp.length === 0 || highTemp.length === 0) {
alert("Valid low and high temperatures must be entered!");
} else {
document.getElementById("output").style.display = "block";
// Add new temperatures to the array
// Current date
var d = new Date();
if (temperatures.length == 0) {
// Current date if it is 1st temperature
temperatures.push(new Array(d.getMonth(), d.getDate(), d.getFullYear(), lowTemp, highTemp));
} else {
// 1 day before last date
newDate = temperatures[temperatures.length - 1][1] - 1;
temperatures.push(new Array(d.getMonth(), newDate, d.getFullYear(), lowTemp, highTemp));
}
// Create the output table
var tempTable = document.getElementById("tempTable");
tempTable.innerHTML = "<tr><th>Date</th><th>Low Temperatures</th><th>High Temperatures</th></tr>";
// Loop over the array and create the table
// Also calculate the averages
var avgLow = 0;
var avgHigh = 0;
temperatures.forEach(function(entry) {
var newRow = document.createElement('tr');
newRow.innerHTML = '<td>' + entry[0] + '/' + entry[1] + '/' + entry[2] + '</td><td align="right">' + entry[3] + '</td><td align="right">' + entry[4] + '</td>';
tempTable.appendChild(newRow);
avgLow += parseInt(entry[3]);
avgHigh += parseInt(entry[4]);
});
// Add the row for average
avgLow /= temperatures.length;
avgHigh /= temperatures.length;
avgLow = avgLow.toFixed(1)
avgHigh = avgHigh.toFixed(1)
var newRow = document.createElement('tr');
newRow.innerHTML = '<td>Averages</td><td align="right">' + avgLow + '</td><td align="right">' + avgHigh + '</td>';
tempTable.appendChild(newRow);
//Add row for lowest temp
var minTemp = Math.min.apply(lowTemp.value);
var key = lowTemp.indexOf(d);
var newRow = document.createElement('tr');
newRow.innerHTML = '<td colspan="3"> The lowest temp of' + minTemp + 'occured on' + key + '</td>';
tempTable.appendChild(newRow);
}
return false;
}
function init() {
'use strict';
document.getElementById('theForm').onsubmit = addTemp;
} // End of init() function.
window.onload = init;
})();
The error means that when your code executed at that time temptable was not set possibly because your JS code is rendering prior to DOM element loaded.
var tempTable = document.getElementById("tempTable");
Also execute init() in DomContentLoaded instead of window.onload.
document.addEventListener("DOMContentLoaded", function(event) {
init();
});
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
For some reason I'm getting 8 forward slashes rendered on their own line after the header for my dynamically populated calendar. The basic code for it is below:
<script type="text/javascript">
function getCalendar() {
var now = new Date();
var thisMonth = now.getMonth();
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var month = months[now.getMonth()];
var thisYear = now.getFullYear();
var firstDay = new Date(thisYear, thisMonth, 1, 0, 0, 0, 0);
var firstDayOfWeek = firstDay.addDays(-firstDay.getDay()); // get the first date of the 5-week calendar
var calendar = '<header> <h1 class="month-year">' + month + ' ' + thisYear + '</h1> ';
calendar += '</header> <table> <tr> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr> ';
var calMonth = new Array(6); // least amount that will contain an entire month every time
calMonth[0] = new Array(7); // each week contains 7 days
calMonth[1] = new Array(7);
calMonth[2] = new Array(7);
calMonth[3] = new Array(7);
calMonth[4] = new Array(7);
calMonth[5] = new Array(7);
for(var i = 0; i < 6; i++) {
for(var j = 0; j < 7; j++) {
calMonth[i][j] = new Date(firstDayOfWeek); // input each date for the calendar into the array
firstDayOfWeek = new Date(firstDayOfWeek.addDays(1));
}
}
for(var i = 0; i < 6; i++) {
calendar += '<tr>';
for(var j = 0; j < 7; j++) {
var currDate = new Date(calMonth[i][j]);
day = currDate.getDate();
if(day == now.getDate() && currDate.getMonth() == now.getMonth()) {
calendar += '<td class="moderate current-day">' + day + '</td>';
} else if(currDate < now) {
calendar += '<td class="event heavy"><s>' + day + '</s></td>';
} else if(currDate.getDay() >= 5) {
calendar += '<td class="light">' + day + '</td>/';
} else if(currDate.getMonth() > now.getMonth() && currDate.getYear() == now.getYear()
|| currDate.getMonth() < now.getMonth() && currDate.getYear() < now.getYear()) {
calendar += '<td class="event moderate next-month">' + day + '</td>';
} else if(currDate.getMonth() < now.getMonth() && currDate.getYear() == now.getYear()
|| currDate.getMonth() > now.getMonth() && currDate.getYear() > now.getYear()) {
calendar += '<td class="event heavy prev-month">' + day + '</td>';
} else { calendar += '<td class="event light">' + day + '</td>'; }
}
calendar += '</tr>';
}
document.getElementById('calendar').innerHTML = calendar;
}
Date.prototype.addDays = function (n) {
var time = this.getTime();
var changedDate = new Date(time + (n * 24 * 60 * 60 * 1000));
this.setTime(changedDate.getTime());
return this;
}
</script>
When it renders to the <div class='calendar' id='calendar'></div>, for some reason it populates //////// on the line directly below the header, which currently renders August 2015.
I don't have anything between the header and the body of the table and I also do not have anything in the actual div until the calendar is rendered (which is during the onload event). An image of it is rendered below:
Additionally, an in-progress version with current styling can be viewed at this website.
Can anyone help me solve this mystery?
Thanks,
-C§
You had a stray forward slash inside your for loop after the tag. It is removed below.
<script type="text/javascript">
function getCalendar() {
var now = new Date();
var thisMonth = now.getMonth();
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var month = months[now.getMonth()];
var thisYear = now.getFullYear();
var firstDay = new Date(thisYear, thisMonth, 1, 0, 0, 0, 0);
var firstDayOfWeek = firstDay.addDays(-firstDay.getDay()); // get the first date of the 5-week calendar
var calendar = '<header> <h1 class="month-year">' + month + ' ' + thisYear + '</h1> ';
calendar += '</header> <table> <tr> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr> ';
var calMonth = new Array(6); // least amount that will contain an entire month every time
calMonth[0] = new Array(7); // each week contains 7 days
calMonth[1] = new Array(7);
calMonth[2] = new Array(7);
calMonth[3] = new Array(7);
calMonth[4] = new Array(7);
calMonth[5] = new Array(7);
for(var i = 0; i < 6; i++) {
for(var j = 0; j < 7; j++) {
calMonth[i][j] = new Date(firstDayOfWeek); // input each date for the calendar into the array
firstDayOfWeek = new Date(firstDayOfWeek.addDays(1));
}
}
for(var i = 0; i < 6; i++) {
calendar += '<tr>';
for(var j = 0; j < 7; j++) {
var currDate = new Date(calMonth[i][j]);
day = currDate.getDate();
if(day == now.getDate() && currDate.getMonth() == now.getMonth()) {
calendar += '<td class="moderate current-day">' + day + '</td>';
} else if(currDate < now) {
calendar += '<td class="event heavy"><s>' + day + '</s></td>';
} else if(currDate.getDay() >= 5) {
calendar += '<td class="light">' + day + '</td>';
} else if(currDate.getMonth() > now.getMonth() && currDate.getYear() == now.getYear()
|| currDate.getMonth() < now.getMonth() && currDate.getYear() < now.getYear()) {
calendar += '<td class="event moderate next-month">' + day + '</td>';
} else if(currDate.getMonth() < now.getMonth() && currDate.getYear() == now.getYear()
|| currDate.getMonth() > now.getMonth() && currDate.getYear() > now.getYear()) {
calendar += '<td class="event heavy prev-month">' + day + '</td>';
} else { calendar += '<td class="event light">' + day + '</td>'; }
}
calendar += '</tr>';
}
document.getElementById('calendar').innerHTML = calendar;
}
Date.prototype.addDays = function (n) {
var time = this.getTime();
var changedDate = new Date(time + (n * 24 * 60 * 60 * 1000));
this.setTime(changedDate.getTime());
return this;
}
</script>
Here I have below a full html page for a calendar creation, copy it over to see what it does.
I have two buttons below that can increment month by one. My problem is because I can instantiating var month= date.getMonth() at the top of the page, the global variable month only allows me to increment and decrement by 1, how can I let month be set as a local variable so I am able to increment to more than just 1. Here is the code: I'm sure copy paste will work:
Below I have posted my my button handlers to increase month/decrease month.
<script type="text/javascript">
printCalendar(year,month,divDestination);
function printCalendar(year,mth,divDestination){
var currentmonth = mth;
var myOutput=document.getElementById(divDestination)
myOutput.innerHTML=makeCalendar(year,mth)
}
function prevMonth(m){
m--;
var currentmonth = m;
alert(m);
if(m < 0)
{
m = 11;
year--;
}
printCalendar(year,currentmonth,divDestination);
}
function nextMonth(m){
m++;
var currentmonth = m;
if(m > 11)
{
m=0;
year++;
}
printCalendar(year,currentmonth,divDestination);
}
function test(div){
var myOutput=document.getElementById("divCalendar")
myOutput.innerHTML += eventmonth;
}
</script>
<div align="center" id="divCalendar"></div>
<div align="center" id="myButtons">
<input type="button" onclick="test('divCalendar')" value="Say hi" />
<input type="button" onclick="prevMonth(month,'divCalendar')" value="Previous"/>
<input type="button" onclick="nextMonth(month,'divCalendar')" value="Next" />
<input type="button" onclick="printCalendar(year,month,'divCalendar')" value="Reload Calendar" />
Here below is my makeCalendar function
var myDate = new Date();
var month = myDate.getMonth();
var year = myDate.getFullYear();
var divDestination="divCalendar";
function leapYear(yr) {
if (yr < 1000) yr+=1900
return((yr%4 == 0) && ((yr%100 == 0) || (yr%400 ==0)))
}
function startCol(width, height, color){
return('<TD WIDTH=' + width + ' HEIGHT=' + height + '>' + '<FONT COLOR="' + color + '">');
}
function getHoliday(monthSelected,theday)
{
monthSelected = monthSelected + 1
var holiday = ""
var HolidayName = new Array (1, 1, "New Year's Day",7, 1, "Canada Day",12, 25, "Christmas Day",12, 26, "Boxing Day", 2,14,"Valentine's Day")
for(var index = 0; HolidayName.length >= index; index++)
{
if(HolidayName[index] == monthSelected && HolidayName[index+1] == theday)
{
holiday = HolidayName[index+2]
}
}
return holiday
}
function makeCalendar(yr, mth)
{
var monthSelected = mth
var months = new Array("Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec")
var days = new Array(31, leapYear(yr)?29:28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)
var weekDays = new Array("Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat")
var mthSz = days[mth]
var mthName = months[mth]
var firstDyofMnth = new Date(yr, mth, 1)
var firstDay = firstDyofMnth.getDay() + 1
var numRows = Math.ceil((mthSz + firstDay-1)/7)
var mthNameHeight = 50
var borderWidth = 2
var cellSpacing = 4
var cellHeight = 80
var hdrColor = "midnightblue"
var hdrSz = "+3"
var colWidth = 100
var dayCellHeight = 25
var dayColor = "black"
var dayCtr = 1
// Build the HTML Table
var txt = '<CENTER>'
txt += '<TABLE BORDER=' + borderWidth + ' CELLSPACING=' + cellSpacing + '>'
//Show Month Name and Year
txt += '<TH COLSPAN=7 HEIGHT=' + mthNameHeight + '>'
txt += '<FONT COLOR="' + hdrColor + '" SIZE=' + hdrSz + '>'
txt += mthName + ' ' + year + '</FONT>' + '</TH>'
// Show Days of the Week
txt += '<TR ALIGN="center" VALIGN="center">'
for (var dy = 0; dy < 7; ++dy) {
txt += startCol(colWidth, dayCellHeight, dayColor) + weekDays[dy] + '</FONT></TD>'
}
txt += '</TR>'
// Show Dates in Calendar
for (var row=1; row <= numRows; ++row)
{
txt += '<TR ALIGN="right" VALIGN="top">'
for (var col = 1; col <= 7; ++col)
{
if (((col < firstDay) && (row==1)) || (dayCtr>mthSz))
{txt += '<TD BGCOLOR="Gainsboro"><BR></TD>'}
else
{
var event = getHoliday(monthSelected, dayCtr)
txt += '<TD HEIGHT=' + cellHeight + '><FONT COLOR="' + dayColor + '"> <B>'
txt += dayCtr
txt += '</B></FONT><BR>' + event + '</TD>'
dayCtr++;
}
}
txt += '</TR>'
}
// close all basic table tags and output txt string
txt += '</TABLE></CENTER>'
return txt
}
Lets try to trim this down further to the money bits. Here's basically what you are doing.
var month = new Date().getMonth()
var nextMonth = function(m) {
m++;
setMonthSomewhere(m);
};
nextMonth(month);
So what happens is that you pass your global, which is accessible everywhere anywhere, to the nextMonth() function. And function arguments basically declare a local variable, which is sets to the passed in value. You now have a global month variable set to 1, and a totally different m local to the nextMonth() function also set to 1. You then increment the local variable m to 2, which has no effect on the global variable.
Instead, simply don't pass it in. Manipulate the global directly.
var month = new Date().getMonth()
var nextMonth = function() {
month++;
setMonthSomewhere(month);
};
nextMonth();
Now nextMonth() increments the global month variable directly, changing it's value.
You are using the global variable month in your handler <input type="button" onclick="nextMonth(month,'divCalendar')" value="Next" /> but you never update that global variable.
Why not try removing the first argument from your nextMonth function and instead of using m you use month.
function nextMonth(){
month++;
if(month > 11)
{
month=0;
year++;
}
printCalendar(year,month,divDestination);
}
(note your usage of "currentMonth" variable is probably wrong too so I removed that)
But I think that your design is a little flawed - because you are using global variables and putting them on the global namespace, you will have a tough time if you ever need to render 2 calendars or if ever some other javascript wants to use the variable name "month" or "year".
EDIT (Adding a better solution)
I would recommend though that instead of passing in numbers to your function, that you pass an entire date object - because that will make the code a lot simpler.
function printCalendar(date, divDestination) {
var myOutput=document.getElementById(divDestination)
myOutput.innerHTML=makeCalendar(date.getFullYear(), date.getMonth());
}
function nextMonth(date, divDestination) {
date.setMonth(date.getMonth()+1);
printCalendar(date, divDestination);
}
function prevMonth(date, divDestination) {
date.setMonth(date.getMonth()-1);
printCalendar(date, divDestination);
}
Now because you passed a Date object, the nextMonth and prevMonth functions actually modify the object, so that next time you call the Date will be updated with the new month.
Here is a fiddle that shows the solution using a date object
Fiddle