dven88 Posted August 12, 2014 Share Posted August 12, 2014 Hey guys, Ive been working on this script and I cant seem to figure out how to highlite the current date in lets say a blue color. Any ideas please? <!DOCTYPE html> <html> <head> <title>Simple Month Calendar</title> <script type="text/javascript"> // Author: Danny van der ven // Created: 12 aug 2014 // P.S. I'm from The Netherlands, so the names of the weeks and months are in Dutch. var Calendar = function(divId) { //Store div id this.divId = divId; // Days of week, starting on Sunday this.DaysOfWeek = [ 'Z', 'M', 'D', 'W', 'D', 'V', 'Z' ]; // Months, stating on January this.Months = ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december' ]; // Set the current month, year var d = new Date(); this.CurrentMonth = d.getMonth(); this.CurrentYear = d.getFullYear(); }; // Goes to next month Calendar.prototype.nextMonth = function() { if ( this.CurrentMonth == 11 ) { this.CurrentMonth = 0; this.CurrentYear = this.CurrentYear + 1; } else { this.CurrentMonth = this.CurrentMonth + 1; } this.showCurrent(); }; // Goes to previous month Calendar.prototype.previousMonth = function() { if ( this.CurrentMonth == 0 ) { this.CurrentMonth = 11; this.CurrentYear = this.CurrentYear - 1; } else { this.CurrentMonth = this.CurrentMonth - 1; } this.showCurrent(); }; // Show current month Calendar.prototype.showCurrent = function() { this.showMonth(this.CurrentYear, this.CurrentMonth); }; // Show month (year, month) Calendar.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 += '<tr><td colspan="7">' + this.Months[m] + ' - ' + y + '</td></tr>'; // Write the header of the days of the week html += '<tr>'; for(var i=0; i < this.DaysOfWeek.length;i++) { html += '<td>' + this.DaysOfWeek + '</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 html += '<td>' + 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 Calendar("divCalendar"); c.showCurrent(); // 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); } </script> <style type="text/css"> td.not-current { color: #777; } </style> </head> <body> <div id="divCalendar"> </div> <button id="btnPrev" type="button">Terug</button> <button id="btnNext" type="button">Vooruit</button> </body> </html> Quote Link to comment Share on other sites More sharing options...
Solution PravinS Posted August 12, 2014 Solution Share Posted August 12, 2014 search the following line html += '<td>' + i + '</td>'; and replace it with if (i == d.getDate()) html += '<td style="color:blue;">' + i + '</td>'; else html += '<td>' + i + '</td>'; Quote Link to comment Share on other sites More sharing options...
PravinS Posted August 12, 2014 Share Posted August 12, 2014 (edited) you can check it in jsfiddle for the output Edited August 12, 2014 by PravinS Quote Link to comment Share on other sites More sharing options...
dven88 Posted August 13, 2014 Author Share Posted August 13, 2014 Awsome, thanks! thats it Quote Link to comment Share on other sites More sharing options...
dven88 Posted August 13, 2014 Author Share Posted August 13, 2014 With this code the week starts on sunday, is it also possible ot start the week on monday? Quote Link to comment Share on other sites More sharing options...
CroNiX Posted August 13, 2014 Share Posted August 13, 2014 This is only checking to see if the DAY is the same as today. If today is the 13th and you go to a future/previous month, 13 is also highlighted. You might want to check to see if the entire date is the same and not just the day. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.