<div id="cal">
        <div id="calhead">
            <div id="calPrevMonth"></div>
            <div id="calheadline"></div>
            <div id="calNextMonth"></div>
            <div id="calrss" style="display:none">
                <a href="#">RSS Feed</a>
            </div>
            <div id="calExprt" title="Export Calendar for iCal/Outlook"></div>
            <div id="caldate"></div>
            <div style="clear: both;"></div>
        </div>
        <div id="calcontent">
            <div id="calevents"></div>
            <div id="calImprtntMsg">
            </div>           
            <div id="caltablecntr"></div>
            <div style="clear: both;"></div>
        </div>
    </div>
a {
 color: black; 
}

/* Sprite for Cal */

/* Calendar Widget */

#cal {
	background: #e9e9e9;
	width: 450px;
	height: 267px;
	padding: 0;
	margin: 0 0 30px 0;
	border-top: 1px solid #e9e9e9;
	border-bottom: 1px solid #e9e9e9;
	position: absolute;
	}

#cal
{
	height: 285px;
}

#calhead {
	width: 410px;
	margin: 10px 0 0 20px;
	padding: 0;
	border-bottom: 1px dotted #adadad;
	}


#calPrevMonth, #calNextMonth
{
	float: left;
	cursor:pointer;
}

#calPrevMonth
{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12.5px 15px 12.5px 0;
  border-color: transparent #af1b20 transparent transparent;
}

#calNextMonth
{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12.5px 0 12.5px 15px;
  border-color: transparent transparent transparent #af1b20;
  margin-left: 30px;
}

.calNavMnthHide
{
	background: none ! important
}

#calheadline {
	height: 23px;
	width: 151px;
	margin: 0;
	padding: 0;
	float: left;
	text-align: center;
    color: #AF1B20;
    font-family: 'MuseoSlab500Regular',helvetica,sans-serif;
    font-size: 19px;
    font-style: normal;
    font-weight: normal;
    margin: 0;
    padding: 0 0 15px;
	}

#caldate {
	width: 145px;
	margin: 4px 0 0 0;
	padding: 0;
	color: #af1b20;
	font-size: 11px;
	text-transform: uppercase;
	text-decoration: none;
	float: right;
	}

#calcontent {
	width: 430px;
	margin: 0 0 0 20px;
	padding: 0;
	}

#cal table {
	background: transparent;
	padding: 0;
	margin: 0;
	color: #000;
	font-size: 11px;
	line-height: 11px;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	border-collapse:collapse;
	}

#cal tr {
	background: transparent;
	padding: 0;
	margin: 0;
	border: none;
	}

#cal td {
	background: transparent;
	width: 29px;
	height: 29px;
	padding: 0;
	margin: 0;
	border: 1px dotted #adadad;
	vertical-align: middle;
	text-align: center;
	}

#cal td.head {
	background: transparent;
	height: 19px;
	color: #af1b20;
	border-top: none;
	}

#cal td.today {
	background: #e6bc1f !important;
	color: #af1b20 !important;
	}
	
#cal td.event
{
	background: #9c1a1e;
}

#cal td.event a
{
	color: #fff;
}

#cal a.off {
	color: #adadad;
	}

#caltablecntr {
	margin: 0;
	padding: 0;
	float: left;
	}

#caltablecntr a {
	background: transparent;
	width: 29px;
	height: 29px;
	padding: 0;
	margin: 0;
	line-height: 30px;
	text-decoration: none;
	display: block;
	}

#caltablecntr a:hover {
	background: #adadad;
	color: #fff;
	text-decoration: underline;
	}

#calevents {
    float: right;
    height: 202px;
    margin: 0;
    overflow: auto;
    padding: 0 0 0 27px;
    width: 190px;
	}


#calevents p {
	width: 155px;
	}

#calevents .date {
	color: #af1b20;
	font-size: 11px;
	text-transform: uppercase;
	}


/* 3D Calendar (three sided object) */

/* Calendar */

.carContainer, .calHeadContainer {
    width: 210px;
    height: 210px;
    position: relative;
    margin: 0 0 0 2px;
    perspective: 1100;
    -webkit-perspective: 1100;
    -moz-perspective: 1100;
}

#carousel, #calHeadcrsl, #carGalL3DCntr {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    margin: 0px;
}
    
.ready #carousel, .ready #calHeadcrsl, .ready #carGalL3DCntr {
    transition: transform 1s;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
}

#carousel.panels-backface-invisible figure, #calHeadcrsl.panels-backface-invisible figure, #carGalL3DCntr.panels-backface-invisible figure {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

#carousel figure, #calHeadcrsl figure, #carGalL3DCntr figure{
    display: block;
    position: absolute;
    width: 210px;
    height: 210px;
    left: 0;
    top: 0;
    border: 2px solid #E9E9E9;
    line-height: 116px;
    font-size: 80px;
    font-weight: bold;
    color: white;
    text-align: center;
}

#calImprtntMsg {
    position: absolute;
	height: 15px;
    width: 406px;
    left: 23px;
    text-align: left;
    top: 260px;
    z-index: 1;
    margin-top: 2px;
}

#calImprtntMsg span a, #calExprt a
{
	font-weight: bold;
	text-decoration: none;
}

#calExprt, #calExprt:hover, .hideCalExprt
{
	float: right;
	height: 20px;
	width: 20px;
	margin: 3px 4px 0 0;
	background-position: 0 -329px !important;
	cursor: pointer;
}

#calExprt:hover
{
	background-position: 0 -374px !important;
}

#calExprt.hideCalExprt
{
	background-position: 0 -350px !important;
}

#crsl1, #crsl2, #crsl3
{
	margin: 0;
	background-color: #E9E9E9;
	transform: rotateY(0deg) translateZ(61px);
	-webkit-transform: rotateY(0deg) translateZ(61px);
	-moz-transform: rotateY(0deg) translateZ(61px);
	opacity: 1;
}

#crsl2
{
	transform: rotateY(120deg) translateZ(61px);
	-webkit-transform: rotateY(120deg) translateZ(61px);
	-moz-transform: rotateY(120deg) translateZ(61px);	
}

#crsl3
{
	transform: rotateY(240deg) translateZ(61px);
	-webkit-transform: rotateY(240deg) translateZ(61px);
	-moz-transform: rotateY(240deg) translateZ(61px);
}

#galL3DFig1, #galL3DFig2, #galL3DFig3, #galL3DFig4, #galL3DFig5, #galL3DFig6
{
	margin: 0;
	background-color: #E9E9E9;
	transform: rotateY(0deg) translateZ(182px);
	-webkit-transform: rotateY(0deg) translateZ(182px);
	-moz-transform: rotateY(0deg) translateZ(182px);
	opacity: 1;
}

#galL3DFig2
{
	transform: rotateY(0deg) translateZ(182px);
	-webkit-transform: rotateY(0deg) translateZ(182px);
	-moz-transform: rotateY(0deg) translateZ(182px);
}
 
#galL3DFig3
{
 	transform: rotateY(60deg) translateZ(182px);
 	-webkit-transform: rotateY(60deg) translateZ(182px);
 	-moz-transform: rotateY(60deg) translateZ(182px);
}
 
#galL3DFig4
{
 	transform: rotateY(120deg) translateZ(182px);
 	-webkit-transform: rotateY(120deg) translateZ(182px);
 	-moz-transform: rotateY(120deg) translateZ(182px);
}

#galL3DFig5
{
 	transform: rotateY(180deg) translateZ(182px);
 	-webkit-transform: rotateY(180deg) translateZ(182px);
 	-moz-transform: rotateY(180deg) translateZ(182px);
}

#galL3DFig6
{
	transform: rotateY(240deg) translateZ(182px);
	-webkit-transform: rotateY(240deg) translateZ(182px);
	-moz-transform: rotateY(240deg) translateZ(182px);
}

/* Calendar Header */

.calHeadContainer {
    width: 151px;
    height: 20px;
    margin: 0px;
}

#calHeadcrsl figure 
{
    width: 151px;
    height: 18px;
    font-size: 19px;
    line-height: 19px;
    color: #AF1B20;
    font-style: normal;
    font-weight: normal;
}

#calHeadcrsl1, #calHeadcrsl2, #calHeadcrsl3
{
	margin: 0;
	background-color: #E9E9E9;
	transform: rotateX(0deg) translateZ(-5px);
	-webkit-transform: rotateX(0deg) translateZ(-5px);
	-moz-transform: rotateX(0deg) translateZ(-5px);
	opacity: 1;
}

#calHeadcrsl2
{
	transform: rotateX(120deg) translateZ(-5px);
	-webkit-transform: rotateX(120deg) translateZ(-5px);
	-moz-transform: rotateX(120deg) translateZ(-5px);
}

#calHeadcrsl3
{
	transform: rotateX(240deg) translateZ(-5px);
	-webkit-transform: rotateX(240deg) translateZ(-5px);
	-moz-transform: rotateX(240deg) translateZ(-5px);
}
// Global scope
var bc = null;

/* Init jQuery Click Events */
$(document).ready(function () {

    var bindBehaviors = function () {

        /* Calendar Click Events */
        $("#calNextMonth").click(function (event) {

            event.preventDefault();

            bc.SetNextMonth();

            if (Modernizr.csstransforms3d && ieChk.IsNotIE10()) {
                bc.CSS3DCal(true);
            } else {
                $("#caltablecntr").hide();
                bc.BuildDispCal();
            }
        })

        $("#calPrevMonth").click(function (event) {
            event.preventDefault();

            bc.SetPrevMonth();

            if (Modernizr.csstransforms3d && ieChk.IsNotIE10()) {
                bc.CSS3DCal(false);
            } else {
                $("#caltablecntr").hide();
                bc.BuildDispCal();
            }
        })
    }
    
    // Bind click events
    bindBehaviors();

    // Create IEChk Obj
    ieChk = new $.IEChk();
    // Create CCSUtils Obj
    cssUtils = new $.CSSUtils();
    // Create Calendar Display Obj
    bc = new $.BuildDispCal();
    // Render Calendar
    bc.BuildDispCal();
})

$.BuildDispCal = function () {
    // private vars
    var _currCalMnthYr = new Date();
    var _days_full_labels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    var _cal_months_labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var _currRotDeg = 0;
    var _currSide = 1;
    // set private vars
    _currCalMnthYr.setDate(1);

    //private methods
    var getDayName = function (dayNbr) {
        return _days_full_labels[dayNbr];
    }

    var getShortMonthName = function (mnthNbr) {
        return _cal_months_labels[mnthNbr];
    }

    var getTransformProperty = function (elm) {
        // Note that in some versions of IE9 it is critical that
        // msTransform appear in this list before MozTransform
        var properties = [
            'transform',
            'WebkitTransform',
            'msTransform',
            'MozTransform',
            'OTransform'
        ];
        var p;
        while (p = properties.shift()) {
            if (typeof elm.style[p] != 'undefined') {
                return p;
            }
        }
        return false;
    }

    // public methods
    return {
        // Build Calendar SRC
        BuildDispCal: function () {
            var cal = new Calendar(_currCalMnthYr.getMonth(), _currCalMnthYr.getFullYear());
            cal.generateHTML();
            /* If CSS 3D allowed - show calendar header and calendar 3D elements */
            if (Modernizr.csstransforms3d && ieChk.IsNotIE10()) {
                // Month Heading
                var calHeadMnthSrc = '<div id="calHeadBody"><section id="calHeadContainer" class="calHeadContainer">';
                calHeadMnthSrc += '<div id="calHeadcrsl" style="transform: translateZ(-5px) rotateX(0deg);-webkit-transform: translateZ(-5px) rotateX(0deg);-moz-transform: translateZ(-5px) rotateX(0deg);" class="panels-backface-invisible">';
                calHeadMnthSrc += '<figure id="calHeadcrsl1">' + getShortMonthName(_currCalMnthYr.getMonth()) + "&nbsp;" + _currCalMnthYr.getFullYear() + '</figure>';
                calHeadMnthSrc += '<figure id="calHeadcrsl2"></figure>';
                calHeadMnthSrc += '<figure id="calHeadcrsl3"></figure>';
                calHeadMnthSrc += '</div></section></div>';
                $("#calheadline").html(calHeadMnthSrc);
                // Month Caledar Main
                var threeSideSRC = '<div id="carBody"><section id="carContainer" class="carContainer">';
                threeSideSRC += '<div id="carousel" style="transform: translateZ(-61px) rotateY(0deg);-webkit-transform: translateZ(-61px) rotateY(0deg);-moz-transform: translateZ(-61px) rotateY(0deg);" class="panels-backface-invisible">';
                threeSideSRC += '<figure id="crsl1">' + cal.getHTML() + '</figure>';
                threeSideSRC += '<figure id="crsl2"></figure>';
                threeSideSRC += '<figure id="crsl3"></figure>';
                threeSideSRC += '</div></section></div>';
                $("#caltablecntr").html(threeSideSRC);
            } else {
                $("#calheadline").html(getShortMonthName(_currCalMnthYr.getMonth()) + "&nbsp;" + _currCalMnthYr.getFullYear());
                $("#caltablecntr").html(cal.getHTML());
                $("#caltablecntr").show();
                cssUtils.CSSFadeIn("#caltablecntr", 1);
            }
            $("#cal").show();
            setTimeout('$(".clkDay").click(function (event) { event.preventDefault();$("#calevents").html("<p>No Events Found</p>"); });', 400);
        },
        SetNextMonth: function () {
            _currCalMnthYr.setMonth(_currCalMnthYr.getMonth() + 1);
        },
        SetPrevMonth: function () {
            _currCalMnthYr.setMonth(_currCalMnthYr.getMonth() - 1);
        },
        CSS3DCal: function (nxt) {
            var carourseHdrObj = document.getElementById('calHeadcrsl');
            var carouselObj = document.getElementById('carousel');

            /* Build Next/Prev Month */
            var calObj = new Calendar(_currCalMnthYr.getMonth(), _currCalMnthYr.getFullYear());
            calObj.generateHTML();

            /* enable webkit animation */
            $("#carBody").attr("class", "ready");
            $("#calHeadBody").attr("class", "ready");

            if (nxt) {
                _currSide++;
                if (_currSide > 3) {
                    _currSide = 1;
                }
                _currRotDeg -= 120;
                carouselObj.style[getTransformProperty(carouselObj)] = 'translateZ(-61px) rotateY(' + _currRotDeg + 'deg)';
                carourseHdrObj.style[getTransformProperty(carourseHdrObj)] = 'translateZ(-5px) rotateX(' + _currRotDeg + 'deg)';
            } else {
                _currSide--;
                if (_currSide < 1) {
                    _currSide = 3;
                }
                _currRotDeg += 120;
                carouselObj.style[getTransformProperty(carouselObj)] = 'translateZ(-61px) rotateY(' + _currRotDeg + 'deg)';
                carourseHdrObj.style[getTransformProperty(carourseHdrObj)] = 'translateZ(-5px) rotateX(' + _currRotDeg + 'deg)';
            }

            $("#crsl" + _currSide).html(calObj.getHTML());
            $("#calHeadcrsl" + _currSide).html(getShortMonthName(_currCalMnthYr.getMonth()) + "&nbsp;" + _currCalMnthYr.getFullYear());
        }
    }
}

$.CSSUtils = function () {
    var _opacID = "";
    var _opacOPNbr = 0;
    // Private Methods
    var setOpacity = function () {
        $(_opacID).css('opacity', _opacOPNbr);
        if (ieChk.IsLessThanIE9()) {
            $(_opacID).css('filter', 'alpha(opacity=' + _opacOPNbr * 100 + ')');
        }
    }

    // Public Methods
    return {
        CSSFadeIn: function (fadeElmJQID, opacNbr) {
            if (Modernizr.csstransitions) {
                $(fadeElmJQID).css('display', 'block');
                opacGlblID = fadeElmJQID;
                opacGlblOPNbr = opacNbr;
                setTimeout("setOpacity()", 1);
            } else {
                if (ieChk.IsIE9()) {
                    if ($(fadeElmJQID).css('opacity').length && $(fadeElmJQID).css('opacity') == 0) {
                        $(fadeElmJQID).css('opacity', '100');
                    }
                    $(fadeElmJQID).show();
                } else {
                    $(fadeElmJQID).fadeIn(500);
                }
            }
        },
        CSSFadeOut: function (fadeElmJQID) {
            if (Modernizr.csstransitions) {
                $(fadeElmJQID).css('display', 'none');
                _opacID = fadeElmJQID;
                _opacOPNbr = 0;
                setTimeout("setOpacity()", 1);
            } else {
                if (ieChk.IsIE9()) {
                    if ($(fadeElmJQID).css('opacity').length && $(fadeElmJQID).css('opacity') == 100) {
                        $(fadeElmJQID).css('opacity', '0');
                    }
                    $(fadeElmJQID).hide();
                } else {
                    $(fadeElmJQID).fadeOut(500);
                }
            }
        }
    }
}

$.IEChk = function () {
    var _chkDone = false;
    var _isIE9 = false;
    var _isIE10 = false;
    var _isNotIE10 = true;
    var _isLessThanIE8 = false;
    var _isLessThanIE9 = false;
    // Private Methods
    var evalUA = function () {
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE");
        var msieNbr = 0;

        if (msie > 0) {
            msieNbr = parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)));
            switch (msieNbr) {
                case 8:
                    _isLessThanIE9 = true;
                    break;
                case 9:
                    _isIE9 = true;
                    break;
                case 10:
                    _isIE10 = true;
                    _isNotIE10 = false;
                    break;
                default:
                    _isLessThanIE8 = true;
                    break;
            }
        }
    }

    // Public Methods
    return {
        IsIE9: function () {
            if (!_chkDone) {
                evalUA();
            }
            return _isIE9;
        },
        IsIE10: function () {
            if (!_chkDone) {
                evalUA();
            }
            return _isIE10;
        },
        IsNotIE10: function () {
            if (!_chkDone) {
                evalUA();
            }
            return _isNotIE10;
        },
        IsLessThanIE8: function () {
            if (!_chkDone) {
                evalUA();
            }
            return _isLessThanIE8;
        },
        IsLessThanIE9: function () {
            if (!_chkDone) {
                evalUA();
            }
            return _isLessThanIE9;
        }
    }
}


/* Third Party Calendar builder */


// these are labels for the days of the week
cal_days_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
cal_days_full_labels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// these are human-readable month name labels, in order
cal_months_labels = ['January', 'February', 'March', 'April',
                     'May', 'June', 'July', 'August', 'September',
                     'October', 'November', 'December'];
cal_month_short_label = ['Jan', 'Feb', 'Mar', 'Apr',
                     'May', 'Jun', 'Jul', 'Aug', 'Sept',
                     'Oct', 'Nov', 'Dec'];

// these are the days of the week for each month, in order
cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

// this is the current date
cal_current_date = new Date();

function Calendar(month, year) {
    this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month;
    this.year = (isNaN(year) || year == null) ? cal_current_date.getFullYear() : year;
    this.html = '';
}

Calendar.prototype.generateHTML = function () {

    // get first day of month
    var firstDay = new Date(this.year, this.month, 1);
    var startingDay = firstDay.getDay();

    // find number of days in month
    var monthLength = cal_days_in_month[this.month];

    // compensate for leap year
    if (this.month == 1) { // February only!
        if ((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0) {
            monthLength = 29;
        }
    }

    var html = '<table id="tblCalendar">';
    html += '<thead><tr>';
    for (var i = 0; i <= 6; i++) {
        html += '<td class="head">';
        html += cal_days_labels[i];
        html += '</td>';
    }
    html += '</tr></thead>';
    html += '<tbody><tr>';

    // fill in the days
    var day = 1;
    // this loop is for is weeks (rows)
    for (var i = 0; i < 9; i++) {
        // this loop is for weekdays (cells)
        for (var j = 0; j <= 6; j++) {
            if (day == cal_current_date.getDate() && this.month == cal_current_date.getMonth() && day <= monthLength && (i > 0 || j >= startingDay)) {
                if ($("#caldate").length > 0) { $("#caldate").html(cal_days_full_labels[j] + ', ' + cal_month_short_label[this.month] + '. ' + day); }
                if ($("#sbcaldate").length > 0) { $("#sbcaldate").html(cal_days_full_labels[j] + ', ' + cal_month_short_label[this.month] + '. ' + day); }
                html += '<td class="today" >';
            } else {
                html += '<td>';
            }

            if (day <= monthLength && (i > 0 || j >= startingDay)) {
                html += '<a class="clkDay" href="#">' + day + '</a>';
                day++;
            }
            html += '</td>';
        }
        // stop making rows if we've run out of days
        if (day > monthLength) {
            break;
        } else {
            html += '</tr><tr>';
        }
    }
    html += '</tr></tbody></table>';

    this.html = html;
}

Calendar.prototype.getHTML = function () {
    return this.html;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js