vanillaCal Calendar

by Julien Etienne

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css">
<div id="cal"></div>

CSS

#cal {
    width: 18rem;
    height: 18rem;
    background: #444;
    border: 2px solid #333;
    box-sizing: border-box;
    position: absolute;
    font-family: sans-serif;
}
/*Year Nav*/
 #cal #year-nav {
    width: 100%;
    height: 1.3rem;
    background: yellow;
    color: #FFF9D1;
}
#cal #prev-year, #cal #next-year, #cal #year-title {
    text-align: center;
    height: 1.3rem;
}
#cal #prev-year, #cal #next-year {
    background: #444;
    position: relative;
    width: 2rem;
    cursor: pointer;
}
#cal #prev-year {
    float: left;
    z-index: 1;
}
#cal #next-year {
    float: right;
    z-index: 1;
}
#cal #year-title {
    width: 100%;
    background: #FFF9D1;
    position: absolute;
    font-family: sans-serif;
    color: #444;
}
/*Month Nav*/
 #cal #month-nav {
    width: 100%;
    height: 1.3rem;
    color: #FFF9D1;
    border-top: 2px solid #555;
}
#cal #prev-month, #cal #next-month, #cal #month-title {
    text-align: center;
    height: 1.3rem;
}
#cal #prev-month, #cal #next-month {
    background: #444;
    position: relative;
    width: 2rem;
    cursor: pointer;
}
#cal #prev-month {
    float: left;
    z-index: 1;
}
#cal #next-month {
    float: right;
    z-index: 1;
}
#cal #month-title {
    width: 100%;
    background: #FFF9D1;
    position: absolute;
    font-family: sans-serif;
    color: #444;
}
//Calendar Table #cal #calendar-table {
    width: inherit;
    height: 100%;
    width: 100%;
    table-layout: fixed;
}
#cal #calendar-table tr {
    width: 100%;
    height: 100%;
}
#cal #calendar-table td {
    width:2000px;
    height: 2rem;
    vertical-align:center;
    text-align: center;
    box-sizing: border-box;
    background: #fff;
    -webkit-transition: background 2s ease;
    -moz-transition: background 1s ease;
    -o-transition: background 1s ease;
    transition: background 2s ease;
    cursor: pointer;
    border: 1px solid black;
}
#cal #calendar-table td:hover {
    background: greenyellow;
    -webkit-transition:...

JavaScript

/*
   CALENDAR OPTIONS
*/
var options = {
    weekStart: 'monday', // monday | sunday
    language: 'en', // (en)glish | (中国) | (fr)ench | (es)pañol) | (हिन्दी) 
    disableStyling: 'no'

},


cal = document.getElementById('cal'),
    date = new Date();


/*
   CALENDAR TIME STATE
*/

//  Current View State
var currentState = {
    date: date.getDate(), // 22     < 1 to 31 >

    month: 6, //date.getMonth(), // 2      < 0 to 11 >
    year: date.getFullYear(), // 2015  < 0000 >  

    init: function () {
        // Previous Month   1     < 0 to 11 >  needs fixing
        this.prevMonth = this.month - 1;
        // Day Name       Sunday
        this.dayName = this._dayNames[this.dayOfWeek];
        // Shorthand Day Name       Sun 
        this.dName = [];
        var tempDayNames = this._dayNames.splice(0);
        // Change week start day
        var endDay = tempDayNames.pop();
        tempDayNames.splice(0, 0, endDay);
        for (i = 0; i < 7; i++) {
            this.dName.push(tempDayNames[i].substring(0, 3));
        }
        // Day of week

        var weekArr = [6, 0, 1, 2, 3, 4, 5];
        if (options.weekStart === 'sunday') {
            weekArr = [0, 1, 2, 3, 4, 5, 6];
        }
        this.dayOfWeek = weekArr[date.getDay()]; // 0      < 0 to  6 > 
        // Days In Month
        this.daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
        // Month Start Offset
        var setFirstMonthDay = new Date();
        setFirstMonthDay.setDate(1);
        this.offset = setFirstMonthDay.getDay();
        this.offset = weekArr[this.offset]; // 0      < 0 to  6 > 
        // Last Months Tail
        this.lastMonthsTail = new Date(this.year, this.month, 0).getDate() - this.offset;


        // Month Name     March
        this.monthName = this._monthNames[this.month];
        return this;
    },
    _dayNames: ['Monday', 'Tuesday', 'Wednesday',
        'Thursday', 'Friday', 'Saturday', 'Sunday'],
    _monthNames: ['January', 'February', 'March',...