Calendar using Javascript (with css)

        This post discusses on how to make a simple, elegant monthly calendar using javascript. You can change the appearance of the calendar by simply changing the CSS to suit your needs. The calendar displays the current days of the month and highlights the current day.

         This is how our calendar will look after we complete this post. You can easily change the calendar appearance by modifying this css, everything from calendar dimensions, colors, spacing, down to the font used to highlight the current day. My aim is to present an basic understanding of date manipulations and thus this post will not cover the advanced options like moving between next and previous months.

Now lets move onto the javascript code details. 
First we will define some constant variables which we will require in our code.
// Array to store month names
var months = new Array('January',' February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'); 

// Array to store month days
var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

// Array to store week names
var weekDay = new Array('Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su');
Next we will get the current date properties by instantiating a 'Date' object. The below code gets the current date, month, year and the number of days for current month.
var date = new Date();

var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var days_in_this_month = monthDays[month];
Then get the week-day for the 1st day of the month. We will require this to add blank columns at the beginning in our calendar table.
var first_week_day = new Date(year, month, 1).getDay();
Now as we have set up all the variables, on to the code for displaying the calendar. The comments in the code will help you understand the logic of each statement.
// Define the variable which holds the calendar table
  var calendar_html = '<table class="calendarTable">';

  // Create row for displaying current month and year
  calendar_html += '<tr><td class="monthHead" colspan="7">' + months[month] + ' ' + year + '</td></tr>';
  calendar_html += '<tr>';

  // Create row to display the week days (Monday - Sunday)
  for(week_day= 0; week_day < 7; week_day++) {
        calendar_html += '<td class="weekDay">' + weekDay[week_day] + '</td>';
  }
  calendar_html += '</tr><tr>';

  // Fill first row of the month with empty cells until the month starts.
  for(week_day = 0; week_day < first_week_day; week_day++) {
        calendar_html += '<td> </td>';
  }

  // Populate the days in the month
  week_day = first_week_day;
  for(day_counter = 1; day_counter <= days_in_this_month; day_counter++) {

        week_day %= 7;
        // Check if week ends, if yes move to next row
        if(week_day == 0)
              calendar_html += '</tr><tr>';

        // Show the current day in bold.
        if(day == day_counter)
          calendar_html += '<td class="currentDay">' + day_counter + '</td>';
        else
          calendar_html += '<td class="monthDay"> ' + day_counter + ' </td>';

        week_day++;
  }
  
  // Close the Calendar table
  calendar_html += '</tr>';
  calendar_html += '</table>';

  // Display the calendar.
  document.write(calendar_html);
Now on to styling the calendar. The following css styles will give a simple style to your calendar. You can easily change the calendar appearance by modifying this css, everything from calendar dimensions, colors, down to the font used to highlight the current day.
.calendarTable {
    background-color:#eee;
    color:#333;
    border: 1px solid #bbb;
}
.calendarTable td {
    text-align: center;
    padding: 2px 4px 2px 4px;
}
.calendarTable td.monthHead {
    font-weight: bold;
    border: 1px solid #bbb;
    background-color:#ddd;
}
.calendarTable td.weekDay {
    font-weight: bold;
}
.calendarTable td.monthDay {
    border: 1px solid #ddd;
}
.calendarTable td.currentDay {
    font-weight: bold;
    color:#ad5;
    border: 1px solid #aaa;
}
We have finished designing our basic calendar. If you have any question let me know in the comments. You can find the entire code along with html below.
<html>
<title>www.scriptSplash.com => javaScript - Basic Calendar</title>
<head>
<style type="text/css">
.calendarTable {
    background-color:#eee;
    color:#333;
    border: 1px solid #bbb;
}
.calendarTable td {
    text-align: center;
    padding: 2px 4px 2px 4px;
}
.calendarTable td.monthHead {
    font-weight: bold;
    border: 1px solid #bbb;
    background-color:#ddd;
}
.calendarTable td.weekDay {
    font-weight: bold;
}
.calendarTable td.monthDay {
    border: 1px solid #ddd;
}
.calendarTable td.currentDay {
    font-weight: bold;
    color:#ad5;
    border: 1px solid #aaa;
}
</style>
<script type="text/javascript" language="javascript">
/** Function to display a Calendar based on javascript. **/
function calendar() {
  // Get the current date parameters.
  var date = new Date();
  var day = date.getDate();
  var month = date.getMonth();
  var year = date.getFullYear();
  
  var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
  var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
  var weekDay = new Array('Mo','Tu','We','Th','Fr','Sa','Su');
  var days_in_this_month = monthDays[month];

  // Create the basic Calendar structure.
  var calendar_html = '<table class="calendarTable">';
  calendar_html += '<tr><td class="monthHead" colspan="7">' + months[month] + ' ' + year + '</td></tr>';
  calendar_html += '<tr>';
  var first_week_day = new Date(year, month, 1).getDay();
  for(week_day= 0; week_day < 7; week_day++) {
    calendar_html += '<td class="weekDay">' + weekDay[week_day] + '</td>';
  }
  calendar_html += '</tr><tr>';

  // Fill the first week of the month with the appropriate number of blanks.
  for(week_day = 0; week_day < first_week_day; week_day++) {
    calendar_html += '<td> </td>';
  }
  week_day = first_week_day;
  for(day_counter = 1; day_counter <= days_in_this_month; day_counter++) {
    week_day %= 7;
    if(week_day == 0)
      calendar_html += '</tr><tr>';
    // Do something different for the current day.
    if(day == day_counter) {
      calendar_html += '<td class="currentDay">' + day_counter + '</td>';
    } else {
      calendar_html += '<td class="monthDay"> ' + day_counter + ' </td>';
 }
    week_day++;
  }
  calendar_html += '</tr>';
  calendar_html += '</table>';
  // Display the calendar.
  document.write(calendar_html);
}
</script>
</head>
<body>
  <h2> Basic Calendar </h2>
  <br/>
  <script type="text/javascript">calendar();</script>
</body>
</html>

4 comments:

  1. The code runs perfectly but there should be one minor change:

    var first_week_day = new Date(year, month, 0).getDay();

    ..otherwise the current day highlighted is wrong.

    ReplyDelete
  2. Thanks a lot!
    I suddenly got a mind block and couldn't come up with the algorithm to render a calendar.
    My contribution would be this:

    days_in_this_month = new Date(year, month+1, 0).getDate();

    Which responds to the previous comment.

    ReplyDelete
  3. In your example the week starts with Monday, while getDay() returns 0 for Sunday...

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...
 

Copyright © 2012 | ScriptSplash | Powered by Blogger Templates