Simple Month Calendar

great start on this project. thanks for sharing. something like this can definatley be useful in future projects.

Thanks for sharing!

I re-wrote this in jQuery, Bootstrap, and English

<script>
    var Calendar = function($calendar, $title) {

        //Store div id
        this.$e = $calendar;
        this.$t = $title;

        this.$e.addClass("grid-calendar");

        // Days of week, starting on Sunday
        this.DaysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

        // Months, stating on January
        this.Months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', '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();

        this.$e.html("");

        this.$t.html(this.Months[m] + '<span class="year">' + y + '</span>');

        var $header = $('<div class="row calendar-week-header"></div>');
        var $rowtemplate = $('<div class="row calendar-week"></div>');

        // Write the header of the days of the week
        for(var i=0; i < this.DaysOfWeek.length;i++) $header.append('<div class="col-xs-1 grid-cell"><span>' + this.DaysOfWeek[i] + '</span></div>');

        this.$e.append($header);

        var $row = $rowtemplate.clone(true, true);

        // Write the days
        var i = 1;
        do {

            var dow = new Date(y, m, i).getDay();

            // If Sunday, start new row
            if ( dow == 0 ) $row = $rowtemplate.clone(true, true);

            // If not Sunday but first day of the month
            // it will write the last days from the previous month
            else if ( i == 1 ) {
                $row = $rowtemplate.clone(true, true);

                var k = lastDayOfLastMonth - firstDayOfMonth+1;
                for(var j=0; j < firstDayOfMonth; j++) {
                    $row.append('<div class="col-xs-1 grid-cell previous-month"><span>' + k + '</span></div>');
                    k++;
                }
            }

            // Write the current day in the loop
            $row.append('<div class="col-xs-1 grid-cell"><span>' + i + '</span></div>');

            // If Saturday, closes the row
            if ( dow == 6 ) {
                this.$e.append($row);
            }
            // 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++) {
                    $row.append('<div class="col-xs-1 grid-cell previous-month"><span>' + k + '</span></div>');
                    k++;
                }
                this.$e.append($row);
            }

            i++;
        } while(i <= lastDateOfMonth);

    };

    $(window).load(function(){
        // Start calendar
        var c = new Calendar($('.calendar'), $('.ttl'));
        c.showCurrent();

        // Bind next and previous button clicks
        $('.nxt').click( function() {
            c.nextMonth();
        });
        $('.prv').click( function() {
            c.previousMonth();
        });
    });
</script>
<style type='text/scss'> // This is in sass.

      $min-width: 320px;
      $number-of-days: 7;
      $column-width: percentage(1/$number-of-days);

      .grid-calendar {
        .row {
          margin: 0;
        }

        .calendar-week .grid-cell {
          background-color: #f6f6f6;
          border: 1px solid #fff;
        }

        .calendar-week-header .grid-cell > div > div {
          padding-bottom: 10px;
          height: auto;
        }

        .grid-cell {
          display: inline-block;
          float: left;
          min-height: 1px;
          padding: 0;
          position: relative;
          width: $column-width;

          &.previous-month {
            color: #a6a6a6;
          }

          &.next-month {
            background-color: #e1e1e1;
          }

        }

</style>

Thanks for the code. You'd be better posting this as a code snippet rather than as a post in a well dead article.

I meant separate snippet!

I found this on google when I was searching for how to do this for a project. After I modernized it I felt that I should update the original post in case someone else found it and wanted to do the same thing I was doing.