<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()) + " " + _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()) + " " + _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()) + " " + _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;
}
This Pen doesn't use any external CSS resources.