Pure JS Calendar

designed for use with angular

by Preston Badeer

HTML

<div class="calendar" id="calendar">
    <div id="container">
        <div class="prevMonth" onclick="calendar._nav('prev')"></div>
        <div class="monthHeader" id="monthHeader">{{calendar.currMonth}} {{calendar.currYear}}</div>
        <div class="nextMonth" onclick="calendar._nav('next')"></div>
        <div class="dayHeader">
            <div class="days" ng-repeat="d in calendar.day">{{d}}</div>
        </div>
        <div id="main">
            <div ng-repeat="n in calendar.dayNums" class="{{n.type}}">{{n.day}}</div>
        </div>
    </div>
</div>

CSS

.calendar {
    width: 230px;
    height: 220px;
    background-image: linear-gradient(to right, #2cd664 0%, #0082d5 100%);
    border-radius: 5px;
    text-align: center;
}
#container {
    margin: 0 auto;
    width: 209px;
}
.prevMonth, .nextMonth {
    background-position: center center;
    background-repeat: no-repeat;
    height: 9px;
    width: 10px;
    display: inline-block;
    cursor: pointer;
}
.prevMonth {
    background-image: url('../img/icon-calendar-left.png');
}
.nextMonth {
    background-image: url('../img/icon-calendar-right.png');
}
.monthHeader {
    color: #fff;
    font-family:"Roboto Condensed";
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 400;
    margin-top: 18px;
    display: inline-block;
    text-align: center;
    width: 70%;
}
.dayHeader {
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    margin: 10px 0;
}
.days {
    color: #fff;
    font-size: 9px;
    font-weight: 400;
    text-transform: uppercase;
    width: 14.2%;
    display: inline-block;
    vertical-align: top;
}
.datebox, .dateboxZeros, .dateboxToday {
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    text-align: center;
    width: 14.2%;
    line-height: 22px;
    display: inline-block;
}
.dateboxToday {
    width: 20px;
    height: 20px;
    background-color: #ff9948;
    border-radius: 50%;
    margin: 0 2.4%;
}
.dateboxZeros {
    opacity: 0.5;
}

JavaScript

var calendar = {
    day: new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"),
    month: new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"),
    currYear: "",
    currMonth: "",
    currMonthNum: new Date().getMonth(),
    currYearNum: new Date().getFullYear(),
    dayNums: [],

    _getDays: function () {
        var monthNum = calendar.currMonthNum;
        var yearNum = calendar.currYearNum;
        var now = new Date();
        var d = new Date(yearNum, monthNum);
        // 0 gets last day of last month
        var offset = new Date(yearNum, monthNum, 0).getDay();
        var daysInLastMonth = new Date(yearNum, (monthNum), 0).getDate();
        var daysInMonth = new Date(yearNum, monthNum + 1, 0).getDate();
        var dayArray = [];

        for (var i = daysInLastMonth - offset; i <= daysInLastMonth; i++) {
            dayArray.push({
                day: i,
                type: 'dateboxZeros'
            });
        }
        for (i = 1; i <= daysInMonth; i++) {
            if (i == now.getDate() && monthNum == now.getMonth() && yearNum == now.getFullYear()) {
                dayArray.push({
                    day: i,
                    type: 'dateboxToday'
                });
            } else {
                dayArray.push({
                    day: i,
                    type: 'datebox'
                });
            }
        }
        for (i = 1; dayArray.length < 42; i++) {
            dayArray.push({
                day: i,
                type: 'dateboxZeros'
            });
        }

        calendar.currYear = yearNum;
        calendar.currYearNum = yearNum;
        calendar.currMonthNum = monthNum;
        calendar.currMonth = calendar.month[monthNum];
        calendar.dayNums = dayArray;
    },

    _nav: function (direction) {
        if (direction && direction == 'next') {
            if (calendar.currMonthNum == 12) {
               ...