cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              	<header class="clearfix">
				<h1>Calendario <span>A Flexible Calendar Plugin</span></h1>
			</header>	
			<section>
  <div class="main">
				    <div class="custom-calendar-wrap">
					      <div id="custom-inner" class="custom-inner">
						        <div class="custom-header clearfix">
							          <nav>
								            <span id="custom-prev" class="custom-prev"></span>
								            <span id="custom-next" class="custom-next"></span>
							          </nav>
							          <h2 id="custom-month" class="custom-month"></h2>
							          <h3 id="custom-year" class="custom-year"></h3>
						        </div>
						        <div id="calendar" class="fc-calendar-container"></div>
					      </div>
				    </div>
  </div>
			</section>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

html { height: 100%; }
*,*:after,*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.clearfix:before,.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.clearfix:after { clear: both;}
.clearfix {    *zoom: 1;}
body {
  font-family: 'Lato', Calibri, Arial, sans-serif;
  background-image: url(https://goo.gl/XZ7Kr7);
  background-position: center;
  background-size: cover;
  font-weight: 400;
  font-size: 15px;
  color: #333;
}
a {
	color: #555;
	text-decoration: none;
}
header {
  	padding: 30px;
  text-align: center;
}
header h1 {
	font-size: 34px;
	line-height: 38px;
	margin: 0;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
header h1 span {
	font-size: 18px;
	font-weight: 300;
	display: block;
}
section {
	width: 100%;
	height: 100%;
	position: relative;
}
section, .main {
  border-radius: 8px;
	padding: 0 5px 50px 5px;
	width: 100%;
	margin: 0 auto;
  max-width: 660px;
}
.fc-calendar-container {
	position: relative;
	height: 400px;
	width: 400px;
}
.fc-calendar {
	width: 100%;
	height: 100%;
}
.fc-calendar .fc-head {
	height: 30px;
	line-height: 30px;
	background: #ccc;
	color: #fff;
}
.fc-calendar .fc-body {
	position: relative;
	width: 100%;
	height: 100%;
	height: -moz-calc(100% - 30px);
	height: -webkit-calc(100% - 30px);
	height: calc(100% - 30px);
	border: 1px solid #ddd;
}
.fc-calendar .fc-row {
	width: 100%;
	border-bottom: 1px solid #ddd;
}
.fc-four-rows .fc-row  {
	height: 25%;
}
.fc-five-rows .fc-row  {
	height: 20%;
}
.fc-six-rows .fc-row {
	height: 16.66%;
	height: -moz-calc(100%/6);
	height: -webkit-calc(100%/6);
	height: calc(100%/6);
}
.fc-calendar .fc-row > div, .fc-calendar .fc-head > div {
	float: left;
	height: 100%;
	width:  14.28%; /* 100% / 7 */
	width: -moz-calc(100%/7);
	width: -webkit-calc(100%/7);
	width: calc(100%/7);
	position: relative;
}
.ie9 .fc-calendar .fc-row > div, .ie9 .fc-calendar .fc-head > div {
	width:  14.2%;
}
.fc-calendar .fc-row > div {
	border-right: 1px solid #ddd;
	padding: 4px;
	overflow: hidden;
	position: relative;
}
.fc-calendar .fc-head > div {
	text-align: center;
}
.fc-calendar .fc-row > div > span.fc-date {
	position: absolute;
	width: 30px;
	height: 20px;
	font-size: 20px;
	line-height: 20px;
	font-weight: 700;
	color: #ddd;
	text-shadow: 0 -1px 0 rgba(255,255,255,0.8);
	bottom: 5px;
	right: 5px;
	text-align: right;
}
.fc-calendar .fc-row > div > span.fc-weekday {
	padding-left: 5px;
	display: none;
}
.fc-calendar .fc-row > div.fc-today {
	background: #fff4c3;
}
.fc-calendar .fc-row > div.fc-out {
	opacity: 0.6;
}
.fc-calendar .fc-row > div:last-child,.fc-calendar .fc-head > div:last-child {
	border-right: none;
}
.fc-calendar .fc-row:last-child {
	border-bottom: none;
}
.custom-calendar-wrap {
	margin: 10px auto;
	position: relative;
	overflow: hidden;
}
.custom-inner {
	background: #fff;
  border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  overflow: hidden;
}
.custom-inner:before,.custom-inner:after  {
	content: '';
	width: 99%;
	height: 50%;
	position: absolute;
	background: #f6f6f6;
	bottom: -4px;
	left: 0.5%;
	z-index: -1;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.custom-inner:after {
	content: '';
	width: 98%;
	bottom: -7px;
	left: 1%;
	z-index: -2;
}
.custom-header {
	background: #ef4f69;
	padding: 5px 10px 10px 20px;
	height: 70px;
	position: relative;
	border-top: 5px solid #ef4f69;
	border-bottom: 1px solid #ddd;
}
.custom-header h2,.custom-header h3 {
	text-align: center;
	text-transform: uppercase;
}
.custom-header h2 {
	color: #FFF;
	font-weight: 700;
	font-size: 18px;
	margin-top: 10px;
}
.custom-header h3 {
	font-size: 10px;
	font-weight: 700;
	color: #FFF;
}
.custom-header nav span {
	position: absolute;
	top: 17px;
	width: 30px;
	height: 30px;
	color: transparent;
	cursor: pointer;
	margin: 0 1px;
	font-size: 20px;
	line-height: 30px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.custom-header nav span:first-child {	left: 5px;}
.custom-header nav span:last-child {	right: 5px;}
.custom-header nav span:before {
	font-family: 'fontawesome-selected';
	color: #FFF;
	position: absolute;
	text-align: center;
	width: 100%;
}
.custom-header nav span.custom-prev:before {	content: '\25c2';}
.custom-header nav span.custom-next:before {	content: '\25b8';}
.custom-header nav span:hover:before {	color: #495468;}
.custom-content-reveal {
	background: #f6f6f6;
	background: rgba(246, 246, 246, 0.9);
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 100;
	top: 100%;
	left: 0px;
	text-align: center;
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}
.custom-content-reveal span.custom-content-close {
	position: absolute;
	top: 15px;
	right: 10px;
	width: 20px;
	height: 20px;
	text-align: center;
	background: #ef4f69;
	box-shadow: 0 1px 1px rgba(0,0,0,0.1);
	cursor: pointer;
	line-height: 13px;
	padding: 0;
}
.custom-content-reveal span.custom-content-close:after {
	content: 'x';
	font-size: 18px;
	color: #fff;
}
.custom-content-reveal a, .custom-content-reveal span {
	font-size: 22px;
	padding: 10px 30px;
	display: block;
}
.custom-content-reveal h4 {
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 3px;
	color: #777;
	padding: 20px;
	background: #fff;
	border-bottom: 1px solid #ddd;
	border-top: 5px solid #ef4f69;
	box-shadow: 0 1px rgba(255,255,255,0.9);
	margin-bottom: 30px;
}
.custom-content-reveal span {	color: #888;}
.custom-content-reveal a {	color: #ef4f69;}
.custom-content-reveal a:hover {	color: #333;}

/* Modifications */
.fc-calendar-container {
	height: 400px;
	width: auto;
	padding: 30px;
	background: #f6f6f6;
	box-shadow: inset 0 1px rgba(255,255,255,0.8);
}
.fc-calendar .fc-head {
	background: transparent;
	color: #ef4f69;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 12px;
}
.fc-calendar .fc-row > div {
	background: #fff;
	cursor: pointer;
}
.fc-calendar .fc-row > div:empty {
	background: transparent;
}
.fc-calendar .fc-row > div > span.fc-date {
	top: 50%;
	left: 50%;
	text-align: center;
	margin: -10px 0 0 -15px;
	color: #686a6e;
	font-weight: 400;
	pointer-events: none;
}
.fc-calendar .fc-row > div.fc-today {
	background: #ef4f69;
	box-shadow: inset 0 -1px 1px rgba(0,0,0,0.1);
}
.fc-calendar .fc-row > div.fc-today > span.fc-date {
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.fc-calendar .fc-row > div.fc-content:after {
	content: '\00B7';
	text-align: center;
	width: 20px;
	margin-left: -10px;
	position: absolute;
	color: #DDD;
	font-size: 70px;
	line-height: 20px;
	left: 50%;
	bottom: 3px;
}
.fc-calendar .fc-row > div.fc-today.fc-content:after {	color: #b02c42;}
.fc-calendar .fc-row > div.fc-content:hover:after{	color: #ef4f69;}
.fc-calendar .fc-row > div.fc-today.fc-content:hover:after{	color: #fff;}
.fc-calendar .fc-row > div > div a, .fc-calendar .fc-row > div > div span {
	display: none;
	font-size: 22px;
}
@media screen and (max-width: 400px) {
	.fc-calendar-container {		height: 300px;	}
	.fc-calendar .fc-row > div > span.fc-date {		font-size: 15px;	}
}


            
          
!
            
              ;( function( $, window, undefined ) {	
	'use strict';
	$.Calendario = function( options, element ) {		
		this.$el = $( element );
		this._init( options );
		
	};

	// the options
	$.Calendario.defaults = {
		weeks : [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
		weekabbrs : [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
		months : [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
		monthabbrs : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
		displayWeekAbbr : false,
		displayMonthAbbr : false,
		startIn : 1,
		onDayClick : function( $el, $content, dateProperties ) { return false; }
	};
	$.Calendario.prototype = {
		_init : function( options ) {			
			// options
			this.options = $.extend( true, {}, $.Calendario.defaults, options );
			this.today = new Date();
			this.month = ( isNaN( this.options.month ) || this.options.month == null) ? this.today.getMonth() : this.options.month - 1;
			this.year = ( isNaN( this.options.year ) || this.options.year == null) ? this.today.getFullYear() : this.options.year;
			this.caldata = this.options.caldata || {};
			this._generateTemplate();
			this._initEvents();

		},
		_initEvents : function() {
      var self = this;
			this.$el.on( 'click.calendario', 'div.fc-row > div', function() {
				var $cell = $( this ),
					idx = $cell.index(),
					$content = $cell.children( 'div' ),
					dateProp = {
						day : $cell.children( 'span.fc-date' ).text(),
						month : self.month + 1,
						monthname : self.options.displayMonthAbbr ? self.options.monthabbrs[ self.month ] : self.options.months[ self.month ],
						year : self.year,
						weekday : idx + self.options.startIn,
						weekdayname : self.options.weeks[ idx + self.options.startIn ]
					};
				if( dateProp.day ) {self.options.onDayClick( $cell, $content, dateProp );}
			} );
		},
		_generateTemplate : function( callback ) {

			var head = this._getHead(),	body = this._getBody(),	rowClass;
			switch( this.rowTotal ) {
				case 4 : rowClass = 'fc-four-rows'; break;
				case 5 : rowClass = 'fc-five-rows'; break;
				case 6 : rowClass = 'fc-six-rows'; break;
			}
			this.$cal = $('<div class="fc-calendar '+rowClass+'">').append( head,body );
			this.$el.find( 'div.fc-calendar' ).remove().end().append( this.$cal );
			if( callback ) { callback.call(); }
		},
		_getHead : function() {

			var html = '<div class="fc-head">';		
			for ( var i = 0; i <= 6; i++ ) {
				var pos = i + this.options.startIn,
					j = pos > 6 ? pos - 6 - 1 : pos;
				html += '<div>';
				html += this.options.displayWeekAbbr ? this.options.weekabbrs[ j ] : this.options.weeks[ j ];
				html += '</div>';
			}
			html += '</div>';
			return html;
		},
		_getBody : function() {

			var d = new Date(this.year, this.month+1,0),	monthLength = d.getDate(),firstDay = new Date(this.year,this.month,1);
			this.startingDay = firstDay.getDay();
			var html = '<div class="fc-body"><div class="fc-row">',	day = 1;
			for ( var i = 0; i < 7; i++ ) {
				for ( var j = 0; j <= 6; j++ ) {
					var pos = this.startingDay - this.options.startIn,
						p = pos < 0 ? 6 + pos + 1 : pos,
						inner = '',
						today = this.month === this.today.getMonth() && this.year === this.today.getFullYear() && day === this.today.getDate(),
						content = '';					
					if ( day <= monthLength && ( i > 0 || j >= p ) ) {
						inner += '<span class="fc-date">'+day+'</span><span class="fc-weekday">'+this.options.weekabbrs[j+this.options.startIn>6?j+this.options.startIn-6-1: j+this.options.startIn]+'</span>';
						var strdate = (this.month+1<10?'0'+(this.month+1): this.month+1)+'-'+(day<10?'0'+day: day)+'-'+this.year,dayData = this.caldata[ strdate ];
						if( dayData ) {content = dayData;}
						if( content !== '' ) {inner += '<div>' + content + '</div>';}
						++day;
					}
					var cellClasses = today ? 'fc-today ' : '';
					if( content !== '' ) {cellClasses += 'fc-content';}
					html += cellClasses !== '' ? '<div class="' + cellClasses + '">' : '<div>';
					html += inner;
					html += '</div>';
				}

				// stop making rows if we've run out of days
				if (day > monthLength) {
					this.rowTotal = i + 1;
					break;
				} 
				else {html += '</div><div class="fc-row">';}
			}
			html += '</div></div>';
			return html;
		},
		// based on http://stackoverflow.com/a/8390325/989439
		_isValidDate : function( date ) {

			date = date.replace(/-/gi,'');
			var month = parseInt( date.substring( 0, 2 ), 10 ),
				day = parseInt( date.substring( 2, 4 ), 10 ),
				year = parseInt( date.substring( 4, 8 ), 10 );
			if( ( month < 1 ) || ( month > 12 ) ) {return false;}
			else if( ( day < 1 ) || ( day > 31 ) )  {
				return false;
			}
			else if((( month == 4) || (month == 6) || (month == 9) || (month == 11)) && (day > 30))  {
				return false;
			}
			else if((month == 2) && (((year % 400) == 0) || ((year % 4) == 0)) && ((year % 100) != 0) && (day > 29)) {
				return false;
			}
			else if((month == 2) && ((year % 100) == 0) && (day > 29) )  {return false;}
			return {day : day,month : month,year : year};
		},
		_move : function( period, dir, callback ) {

			if( dir === 'previous' ) {				
				if( period === 'month' ) {
					this.year = this.month > 0 ? this.year : --this.year;
					this.month = this.month > 0 ? --this.month : 11;
				}
				else if( period === 'year' ) {this.year = --this.year;}
			}
			else if( dir === 'next' ) {
				if( period === 'month' ) {
					this.year = this.month < 11 ? this.year : ++this.year;
					this.month = this.month < 11 ? ++this.month : 0;
				}
				else if( period === 'year' ) {this.year = ++this.year;}
			}
			this._generateTemplate( callback );
		},
    getYear : function() {return this.year;},
    getMonth : function() {return this.month + 1;},
		getMonthName : function() {
			return this.options.displayMonthAbbr ? this.options.monthabbrs[ this.month ] : this.options.months[ this.month ];
		},
		getCell : function( day ) {

			var row = Math.floor( ( day + this.startingDay - this.options.startIn ) / 7 ),
				pos = day + this.startingDay - this.options.startIn - ( row * 7 ) - 1;
			return this.$cal.find( 'div.fc-body' ).children( 'div.fc-row' ).eq( row ).children( 'div' ).eq( pos ).children( 'div' );

		},
		setData : function( caldata ) {
			caldata = caldata || {};
			$.extend( this.caldata, caldata );
			this._generateTemplate();

		},
		// goes to today's month/year
		gotoNow : function( callback ) {
			this.month = this.today.getMonth();
			this.year = this.today.getFullYear();
			this._generateTemplate( callback );

		},
		// goes to month/year
		goto : function( month, year, callback ) {
			this.month = month;
			this.year = year;
			this._generateTemplate( callback );
		},
		gotoPreviousMonth : function( callback ) {
			this._move( 'month', 'previous', callback );
		},
		gotoPreviousYear : function( callback ) {
			this._move( 'year', 'previous', callback );
		},
		gotoNextMonth : function( callback ) {
			this._move( 'month', 'next', callback );
		},
		gotoNextYear : function( callback ) {
			this._move( 'year', 'next', callback );
		}
	};
		var logError = function( message ) {
		if ( window.console ) {window.console.error( message );}
	};
		$.fn.calendario = function( options ) {
		var instance = $.data( this, 'calendario' );		
		if ( typeof options === 'string' ) {			
			var args = Array.prototype.slice.call( arguments, 1 );			
			this.each(function() {			
				if ( !instance ) {
					logError( "cannot call methods on calendario prior to initialization; " +
					"attempted to call method '" + options + "'" );
					return;				
				}
				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
					logError( "no such method '" + options + "' for calendario instance" );
					return;				
				}
				instance[ options ].apply( instance, args );			
			});		
		} 
		else {		
			this.each(function() {				
				if ( instance ) {instance._init();}
				else {instance = $.data( this, 'calendario', new $.Calendario( options, this ) );}
			});
		}
		return instance;
	};
})(jQuery,window);

var codropsEvents = {
	'01-01-2013' : '<span>New Year\'s day</span>',
	'11-23-2012' : '<a href="https://tympanus.net/codrops/2012/11/23/three-script-updates/">Three Script Updates</a>',
	'11-21-2012' : '<a href="https://tympanus.net/codrops/2012/11/21/adaptive-thumbnail-pile-effect-with-automatic-grouping/">Adaptive Thumbnail Pile Effect with Automatic Grouping</a>',
	'11-20-2012' : '<a href="https://tympanus.net/codrops/2012/11/20/learning-principles-for-improving-your-css/">Learning Principles for Improving Your CSS</a>',
	'11-19-2012' : '<a href="https://tympanus.net/codrops/2012/11/19/responsive-css-timeline-with-3d-effect/">Responsive CSS Timeline with 3D Effect</a>',
	'11-14-2012' : '<a href="https://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/">Creative CSS Loading Animations</a>',
	'11-13-2012' : '<a href="https://tympanus.net/codrops/2012/11/13/baraja-a-plugin-for-spreading-items-in-a-card-like-fashion/">Baraja: A Plugin for Spreading Items in a Card-Like Fashion</a>',
	'11-12-2012' : '<a href="https://tympanus.net/codrops/2012/11/12/mobile-design-typography-is-vitally-important-and-challenging/">Mobile Design Typography is Vitally Important … and Challenging</a>',
	'11-09-2012' : '<a href="https://tympanus.net/codrops/2012/11/09/responsive-wordpress-theme-giveaway/">Responsive WordPress Theme Giveaway</a>',
	'11-06-2012' : '<a href="https://tympanus.net/codrops/2012/11/06/gamma-gallery-a-responsive-image-gallery-experiment/">Gamma Gallery: A Responsive Image Gallery Experiment</a>',
	'11-02-2012' : '<a href="https://tympanus.net/codrops/2012/11/02/heading-set-styling-with-css/">Heading Set Styling with CSS</a>',			
	'10-30-2012' : '<a href="https://tympanus.net/codrops/2012/10/30/becoming-device-agnostic/">Becoming Device-Agnostic</a>',
	'10-29-2012' : '<a href="https://tympanus.net/codrops/2012/10/29/elastislide-revised/">Elastislide Revised</a>',
	'10-25-2012' : '<a href="https://tympanus.net/codrops/2012/10/25/kick-start-your-project-a-collection-of-handy-css-snippets/">Kick-Start Your Project: A Collection of Handy CSS Snippets</a>',
	'10-24-2012' : '<a href="https://tympanus.net/codrops/2012/10/24/slit-slider-revised/">Slit Slider Revised</a>',
	'10-23-2012' : '<a href="https://tympanus.net/codrops/2012/10/23/basic-ready-to-use-css-styles/">Basic Ready-to-Use CSS Styles</a>',
	'10-22-2012' : '<a href="https://tympanus.net/codrops/2012/10/22/slicebox-revised/">Slicebox Revised</a><a href="https://tympanus.net/codrops/2012/10/22/managewp-giveaway/">ManageWP Giveaway</a>',
	'10-28-2012' : '<a href="https://tympanus.net/codrops/2012/10/18/creating-off-center-balance-using-asymmetry-in-web-design/">Creating Off-Center Balance: Using Asymmetry in Web Design</a>',
	'10-18-2012' : '<a href="https://tympanus.net/codrops/2012/10/18/snackwebsites-giveaway/">SnackWebsites Giveaway</a>',
	'10-17-2012' : '<a href="https://tympanus.net/codrops/2012/10/17/pfold-paper-like-unfolding-effect/">PFold: Paper-Like Unfolding Effect</a>',
	'10-16-2012' : '<a href="https://tympanus.net/codrops/2012/10/16/custom-login-form-styling/">Custom Login Form Styling</a>',
	'10-15-2012' : '<a href="https://tympanus.net/codrops/2012/10/15/the-unwritten-rules-of-a-great-design-critique/">The Unwritten Rules of a Great Design Critique</a>',
	'10-11-2012' : '<a href="https://tympanus.net/codrops/2012/10/11/foobox-wordpress-plugin-giveaway/">FooBox WordPress Plugin Giveaway</a><a href="https://tympanus.net/codrops/2012/10/11/real-time-geolocation-service-with-node-js/">Real-Time Geolocation Service with Node.js</a><a href="https://tympanus.net/codrops/2012/10/11/busting-that-creative-slump-youre-in/">Busting that Creative Slump You&#8217;re In</a>',
	'10-09-2012' : '<a href="https://tympanus.net/codrops/2012/10/09/windy-a-plugin-for-swift-content-navigation/">Windy: A Plugin for Swift Content Navigation</a>',
	'10-04-2012' : '<a href="https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/">Custom Drop-Down List Styling</a>',
	'10-02-2012' : '<a href="https://tympanus.net/codrops/2012/10/02/freebie-application-icon-set-png-psd-csh/">Freebie: Application Icon Set (PNG, PSD, CSH)</a>',
	'10-01-2012' : '<a href="https://tympanus.net/codrops/2012/10/01/vertical-showcase-slider-with-jquery-and-css-transitions/">Vertical Showcase Slider with jQuery and CSS Transitions</a>',
	'09-28-2012' : '<a href="https://tympanus.net/codrops/2012/09/28/stop-look-click-attention-grabbing-elements-in-web-design/">Stop, Look, Click: Attention-Grabbing Elements in Web Design</a>',
	'09-26-2012' : '<a href="https://tympanus.net/codrops/2012/09/26/make-a-statement-with-type/">Make a Statement with Type</a>',
	'09-25-2012' : '<a href="https://tympanus.net/codrops/2012/09/25/3d-restaurant-menu-concept/">3D Restaurant Menu Concept</a>',
	'09-20-2012' : '<a href="https://tympanus.net/codrops/2012/09/20/dashboard-design-elements-for-the-win/">Dashboard Design Elements for the Win</a>',
	'09-19-2012' : '<a href="https://tympanus.net/codrops/2012/09/19/fullscreen-video-slideshow-with-bigvideo-js/">Fullscreen Video Slideshow with BigVideo.js</a>',
	'09-17-2012' : '<a href="https://tympanus.net/codrops/2012/09/17/build-a-color-scheme-the-fundamentals/">Build a Color Scheme: The Fundamentals</a>',
	'09-13-2012' : '<a href="https://tympanus.net/codrops/2012/09/13/button-switches-with-checkboxes-and-css3-fanciness/">Button Switches with Checkboxes and CSS3 Fanciness</a><a href="https://tympanus.net/codrops/2012/09/13/compare-ninja-premium-subscription-giveaway/">Compare Ninja Premium Subscription Giveaway</a>',
	'09-12-2012' : '<a href="https://tympanus.net/codrops/2012/09/12/creative-web-typography-styles/">Creative Web Typography Styles</a>',
	'09-11-2012' : '<a href="https://tympanus.net/codrops/2012/09/11/psd2html-professional-coding-services-giveaway/">PSD2HTML Professional Coding Services Giveaway</a>',
	'09-06-2012' : '<a href="https://tympanus.net/codrops/2012/09/06/do-i-really-need-a-style-guide/">Do I Really Need A Style Guide?</a>',
	'09-04-2012' : '<a href="https://tympanus.net/codrops/2012/09/04/perfectly-paired-using-symmetry-in-web-design/">Perfectly Paired: Using Symmetry in Web Design</a>',
	'09-03-2012' : '<a href="https://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/">BookBlock: A Content Flip Plugin</a>',			
	'08-29-2012' : '<a href="https://tympanus.net/codrops/2012/08/29/multiple-area-charts-with-d3-js/">Multiple Area Charts with D3.js</a>',
	'08-27-2012' : '<a href="https://tympanus.net/codrops/2012/08/27/im-creator-lifetime-subscriptions-giveaway/">IM Creator Lifetime Subscriptions Giveaway</a>',
	'08-26-2012' : '<a href="https://tympanus.net/codrops/2012/08/26/happy-birthday-3-years-of-codrops/">Happy Birthday! 3 Years of Codrops</a>',
	'08-23-2012' : '<a href="https://tympanus.net/codrops/2012/08/23/we-are-architects/">We Are Architects</a><a href="https://tympanus.net/codrops/2012/08/23/unfolding-3d-thumbnails-concept/">Unfolding 3D Thumbnails Concept</a>',
	'08-17-2012' : '<a href="https://tympanus.net/codrops/2012/08/17/creative-background-styles-and-trends-in-web-design/">Creative Background Styles and Trends in Web Design</a>',
	'08-16-2012' : '<a href="https://tympanus.net/codrops/2012/08/16/triple-panel-image-slider/">Triple Panel Image Slider</a>',
	'08-15-2012' : '<a href="https://tympanus.net/codrops/2012/08/15/inject-energy-into-your-mobile-design-with-light-effects/">Inject Energy Into Your Mobile Design with Light Effects</a>',
	'08-08-2012' : '<a href="https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/">Circle Hover Effects with CSS Transitions</a>',
	'08-07-2012' : '<a href="https://tympanus.net/codrops/2012/08/07/mythemeshop-responsive-wordpress-themes-giveaway/">MyThemeShop Responsive WordPress Themes Giveaway</a>',
	'08-04-2012' : '<a href="https://tympanus.net/codrops/2012/08/04/the-designers-web-handbook-giveaway/">The Designer&#8217;s Web Handbook Giveaway</a><a href="https://tympanus.net/codrops/2012/08/04/freebie-soft-ui-kit-psd/">Freebie: Soft UI Kit (PSD)</a>',
	'08-02-2012' : '<a href="https://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/">Animated Responsive Image Grid</a>',
	'08-01-2012' : '<a href="https://tympanus.net/codrops/2012/08/01/photo-booth-strips-with-lightbox/">Photo Booth Strips with Lightbox</a>',				
	'07-27-2012' : '<a href="https://tympanus.net/codrops/2012/07/27/examples-of-creative-and-modern-effects-in-web-design/">Examples of Creative and Modern Effects in Web Design</a>',
	'07-25-2012' : '<a href="https://tympanus.net/codrops/2012/07/25/modern-block-quote-styles/">Modern Block Quote Styles</a>',
	'07-24-2012' : '<a href="https://tympanus.net/codrops/2012/07/24/i-love-script-fonts-heres-why/">I Love Script Fonts (Here’s Why)</a>',
	'07-23-2012' : '<a href="https://tympanus.net/codrops/2012/07/23/designing-the-dreaded-form-getting-creative/">Designing the Dreaded Form: Getting Creative</a>',
	'07-20-2012' : '<a href="https://tympanus.net/codrops/2012/07/20/3d-flipping-circle-with-css3-and-jquery/">3D Flipping Circle with CSS3 and jQuery</a>',
	'07-12-2012' : '<a href="https://tympanus.net/codrops/2012/07/12/old-school-cassette-player-with-html5-audio/">Old School Cassette Player with HTML5 Audio</a>',
	'07-10-2012' : '<a href="https://tympanus.net/codrops/2012/07/10/tips-tools-for-grid-based-layouts/">Tips &#038; Tools for Grid-based Layouts</a>',
	'07-09-2012' : '<a href="https://tympanus.net/codrops/2012/07/09/themefuse-premium-wordpress-themes-giveaway/">ThemeFuse Premium WordPress Themes Giveaway</a>',
	'07-07-2012' : '<a href="https://tympanus.net/codrops/2012/07/07/freebie-baby-blue-ui-kit-psd/">Freebie: Baby Blue UI Kit (PSD)</a>',
	'07-05-2012' : '<a href="https://tympanus.net/codrops/2012/07/05/designing-the-dreaded-form/">Designing the Dreaded Form</a>',
	'07-02-2012' : '<a href="https://tympanus.net/codrops/2012/07/02/swatch-book-with-css3-and-jquery/">Swatch Book with CSS3 and jQuery</a>',				
	'07-27-2012' : '<a href="https://tympanus.net/codrops/2012/06/27/responsive-3d-panel-layout/">Responsive 3D Panel Layout</a>',
	'06-25-2012' : '<a href="https://tympanus.net/codrops/2012/06/25/timed-notifications-with-css-animations/">Timed Notifications with CSS Animations</a><a href="https://tympanus.net/codrops/2012/06/25/theadstock-giveaway-free-4th-of-july-themed-images/">TheAdStock Giveaway + Free 4th of July Themed Images</a>',
	'06-19-2012' : '<a href="https://tympanus.net/codrops/2012/06/19/themefurnace-premium-wordpress-themes-giveaway/">ThemeFurnace Premium WordPress Themes Giveaway</a><a href="https://tympanus.net/codrops/2012/06/19/line-that-up-proper-alignment-in-web-design/">Line That Up: Proper Alignment in Web Design</a>',
	'06-18-2012' : '<a href="https://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/">3D Thumbnail Hover Effects</a>',
	'06-13-2012' : '<a href="https://tympanus.net/codrops/2012/06/13/how-web-design-has-changed-print/">How Web Design Has Changed Print</a>',
	'06-12-2012' : '<a href="https://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/">CSS-Only Responsive Layout with Smooth Transitions</a>',
	'06-11-2012' : '<a href="https://tympanus.net/codrops/2012/06/11/tokokoo-e-commerce-wordpress-themes-giveaway/">Tokokoo E-Commerce WordPress Themes Giveaway</a><a href="https://tympanus.net/codrops/2012/06/11/visual-hierarchy-in-mobile-design/">Visual Hierarchy in Mobile Design</a>',
	'06-07-2012' : '<a href="https://tympanus.net/codrops/2012/06/07/7-elements-of-a-well-converting-subscription-page/">7 Elements of a Well Converting Subscription Page</a><a href="https://tympanus.net/codrops/2012/06/07/book-review-the-designers-web-handbook/">Book Review: “The Designer’s Web Handbook”</a>',
	'06-06-2012' : '<a href="https://tympanus.net/codrops/2012/06/06/image-accordion-with-css3/">Image Accordion with CSS3</a>',
	'06-05-2012' : '<a href="https://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/">Fullscreen Slit Slider with jQuery and CSS3</a>',			
	'05-23-2012' : '<a href="https://tympanus.net/codrops/2012/05/23/understanding-the-rule-of-thirds-in-web-design/">Understanding the Rule of Thirds in Web Design</a>',
	'05-22-2012' : '<a href="https://tympanus.net/codrops/2012/05/22/creating-an-animated-3d-bouncing-ball-with-css3/">Creating an Animated 3D Bouncing Ball with CSS3</a>',
	'05-21-2012' : '<a href="https://tympanus.net/codrops/2012/05/21/elegant-themes-giveaway/">Elegant Themes Giveaway</a><a href="https://tympanus.net/codrops/2012/05/21/animated-3d-bar-chart-with-css3/">Animated 3D Bar Chart with CSS3</a>',
	'05-15-2012' : '<a href="https://tympanus.net/codrops/2012/05/15/making-room-to-breathe-wrapping-text-around-elements/">Making Room to Breathe: Wrapping Text Around Elements</a>',
	'05-14-2012' : '<a href="https://tympanus.net/codrops/2012/05/14/annotation-overlay-effect-with-css3/">Annotation Overlay Effect with CSS3</a>',
	'05-09-2012' : '<a href="https://tympanus.net/codrops/2012/05/09/how-to-create-a-fast-hover-slideshow-with-css3/">How to Create a Fast Hover Slideshow with CSS3</a><a href="https://tympanus.net/codrops/2012/05/09/understanding-the-lingo-typography-glossary/">Understanding the Lingo: Typography Glossary</a>',
	'05-07-2012' : '<a href="https://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/">Experimental Page Layout Inspired by Flipboard</a><a href="https://tympanus.net/codrops/2012/05/07/impressionist-ui-pack-giveaway/">Impressionist UI Pack Giveaway</a>',
	'05-03-2012' : '<a href="https://tympanus.net/codrops/2012/05/03/thrivesolo-giveaway/">ThriveSolo Giveaway</a>',
	'05-02-2012' : '<a href="https://tympanus.net/codrops/2012/05/02/enhance-required-form-fields-with-css3/">Enhance Required Form Fields with CSS3</a>',
	'05-01-2012' : '<a href="https://tympanus.net/codrops/2012/05/01/effective-typography-driven-web-design/">Effective Typography-Driven Web Design</a>',			
	'04-30-2012' : '<a href="https://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/">Fluid CSS3 Slideshow with Parallax Effect</a><a href="https://tympanus.net/codrops/2012/04/30/im-creator-giveaway/">IM Creator Giveaway</a>',
	'04-25-2012' : '<a href="https://tympanus.net/codrops/2012/04/25/flarethemes-giveaway/">FlareThemes Giveaway</a><a href="https://tympanus.net/codrops/2012/04/25/type-effects-in-web-design-its-all-about-moderation/">Type Effects in Web Design: It&#8217;s All About Moderation</a>',
	'04-24-2012' : '<a href="https://tympanus.net/codrops/2012/04/24/audio-slideshow-with-jplayer/">Audio Slideshow with jPlayer</a>',
	'04-28-2012' : '<a href="https://tympanus.net/codrops/2012/04/18/awwwards-the-best-365-websites-around-the-world-2011-book-giveaway/">Awwwards: The Best 365 Websites Around the World 2011 Book Giveaway</a>',
	'04-17-2012' : '<a href="https://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/">Rotating Words with CSS Animations</a><a href="https://tympanus.net/codrops/2012/04/17/web-icon-set-giveaway/">Web Icon Set Giveaway</a><a href="https://tympanus.net/codrops/2012/04/17/the-divine-proportion-and-web-design/">The Divine Proportion and Web Design</a>',
	'04-12-2012' : '<a href="https://tympanus.net/codrops/2012/04/12/animated-content-tabs-with-css3/">Animated Content Tabs with CSS3</a>',
	'04-10-2012' : '<a href="https://tympanus.net/codrops/2012/04/10/successful-web-design-its-all-about-the-details/">Successful Web Design: It&#8217;s All About The Details</a><a href="https://tympanus.net/codrops/2012/04/10/tn3gallery-giveaway/">TN3Gallery Giveaway</a>',
	'04-09-2012' : '<a href="https://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/">Direction-Aware Hover Effect with CSS3 and jQuery</a>',
	'04-05-2012' : '<a href="https://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/">Slideshow with jmpress.js</a>',
	'04-03-2012' : '<a href="https://tympanus.net/codrops/2012/04/03/color-and-emotion-what-does-each-hue-mean/">Color and Emotion: What Does Each Hue Mean?</a>',
	'04-02-2012' : '<a href="https://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/">Responsive Horizontal Layout</a>',			
	'03-28-2012' : '<a href="https://tympanus.net/codrops/2012/03/28/mightydeals-giveaway/">MightyDeals Giveaway</a><a href="https://tympanus.net/codrops/2012/03/28/add-impact-to-type-driven-projects/">Add Impact to Type-driven Projects</a>',
	'03-27-2012' : '<a href="https://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/">Login and Registration Form with HTML5 and CSS3</a>',
	'03-24-2012' : '<a href="https://tympanus.net/codrops/2012/03/24/more-examples-of-fresh-effects-in-web-design/">More Examples of Fresh Effects in Web Design</a>',
	'03-23-2012' : '<a href="https://tympanus.net/codrops/2012/03/23/responsive-content-navigator-with-css3/">Responsive Content Navigator with CSS3</a>',
	'03-21-2012' : '<a href="https://tympanus.net/codrops/2012/03/21/psd2html-giveaway/">PSD2HTML Giveaway</a>',
	'03-20-2012' : '<a href="https://tympanus.net/codrops/2012/03/20/condensed-fonts-the-good-the-bad-the-ugly/">Condensed fonts: The good, the bad, the ugly</a>',
	'03-15-2012' : '<a href="https://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/">Parallax Content Slider with CSS3 and jQuery</a>',
	'03-12-2012' : '<a href="https://tympanus.net/codrops/2012/03/12/wordpressthemeshock-giveaway/">WordPressThemeShock Giveaway</a>',
	'03-07-2012' : '<a href="https://tympanus.net/codrops/2012/03/07/understanding-and-using-type-categories-in-web-design/">Understanding and Using Type Categories in Web Design</a>',				
	'02-28-2012' : '<a href="https://tympanus.net/codrops/2012/02/28/principles-of-color-and-the-color-wheel/">Principles of Color and the Color Wheel</a>',
	'02-21-2012' : '<a href="https://tympanus.net/codrops/2012/02/21/accordion-with-css3/">Accordion with CSS3</a>',
	'02-19-2012' : '<a href="https://tympanus.net/codrops/2012/02/19/establish-a-mood-with-typography/">Establish a Mood with Typography</a>',
	'02-16-2012' : '<a href="https://tympanus.net/codrops/2012/02/16/overcoming-the-user-designer-disease/">Overcoming the &#8220;User Designer&#8221; Disease</a><a href="https://tympanus.net/codrops/2012/02/16/conceptboard-giveaway/">Conceptboard Giveaway</a>',
	'02-09-2012' : '<a href="https://tympanus.net/codrops/2012/02/09/type-effects-and-modification/">Type Effects and Modification</a>',
	'02-06-2012' : '<a href="https://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/">3D Gallery with CSS3 and jQuery</a>',
	'02-04-2012' : '<a href="https://tympanus.net/codrops/2012/02/04/keys-to-email-creative-success-marketing-and-design/">Keys to Email Creative Success: Marketing and Design</a>',
	'02-01-2012' : '<a href="https://tympanus.net/codrops/2012/02/01/original-wordpress-themes-giveaway-by-themefuse/">Original WordPress Themes Giveaway by ThemeFuse</a><a href="https://tympanus.net/codrops/2012/02/01/how-to-create-animated-tooltips-with-css3/">How to create animated tooltips with CSS3</a>',
	'01-30-2012' : '<a href="https://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/">Page Transitions with CSS3</a>',
	'01-27-2012' : '<a href="https://tympanus.net/codrops/2012/01/27/modular-front-end-development-with-less/">Modular front-end development with LESS</a>',
	'01-26-2012' : '<a href="https://tympanus.net/codrops/2012/01/26/be-less-annoying-reduce-bounce-rates-through-better-web-design/">Be Less Annoying: Reduce Bounce Rates through Better Web Design</a>',
	'01-24-2012' : '<a href="https://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/">Arctext.js &#8211; Curving Text with CSS3 and jQuery</a>',
	'01-22-2012' : '<a href="https://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/">How to spice up your menu with CSS3</a><a href="https://tympanus.net/codrops/2012/01/22/codrops-giveaway-from-moo-com/">Codrops Giveaway From MOO.com</a>',
	'01-17-2012' : '<a href="https://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/">Sliding Image Panels with CSS3</a>',
	'01-12-2012' : '<a href="https://tympanus.net/codrops/2012/01/12/5-things-every-mobile-design-should-have/">5 Things Every Mobile Design Should Have</a>',
	'01-11-2012' : '<a href="https://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/">CSS Buttons with Pseudo-elements</a>',
	'01-10-2012' : '<a href="https://tympanus.net/codrops/2012/01/10/animated-web-banners-with-css3/">Animated Web Banners With CSS3</a>',
	'01-09-2012' : '<a href="https://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/">Filter Functionality with CSS3</a>',
	'01-05-2012' : '<a href="https://tympanus.net/codrops/2012/01/05/jumping-the-hurdles-of-brainstorming/">Jumping the Hurdles of Brainstorming</a><a href="https://tympanus.net/codrops/2012/01/05/examples-of-fresh-effects-in-web-design/">Examples of Fresh Effects in Web Design</a>',
	'01-04-2012' : '<a href="https://tympanus.net/codrops/2012/01/04/thumbnail-proximity-effect/">Thumbnail Proximity Effect with jQuery and CSS3</a>',
	'01-02-2012' : '<a href="https://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/">Fullscreen Background Image Slideshow with CSS3</a>',
	'12-25-2012' : '<span>Christmas Day</span>',
	'12-31-2012' : '<span>New Year\'s Eve</span>'
};
	
			$(function() {
			
				var transEndEventNames = {
						'WebkitTransition' : 'webkitTransitionEnd',
						'MozTransition' : 'transitionend',
						'OTransition' : 'oTransitionEnd',
						'msTransition' : 'MSTransitionEnd',
						'transition' : 'transitionend'
					},
					transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
					$wrapper = $( '#custom-inner' ),
					$calendar = $( '#calendar' ),
					cal = $calendar.calendario( {
						onDayClick : function( $el, $contentEl, dateProperties ) {

							if( $contentEl.length > 0 ) {
								showEvents( $contentEl, dateProperties );
							}

						},
						caldata : codropsEvents,
						displayWeekAbbr : true
					} ),
					$month = $( '#custom-month' ).html( cal.getMonthName() ),
					$year = $( '#custom-year' ).html( cal.getYear() );
				$( '#custom-next' ).on( 'click', function() {
					cal.gotoNextMonth( updateMonthYear );
				} );
				$( '#custom-prev' ).on( 'click', function() {
					cal.gotoPreviousMonth( updateMonthYear );
				} );
				function updateMonthYear() {				
					$month.html( cal.getMonthName() );
					$year.html( cal.getYear() );
				}
				// just an example..
				function showEvents( $contentEl, dateProperties ) {

					hideEvents();					
					var $events = $( '<div id="custom-content-reveal" class="custom-content-reveal"><h4>Events for ' + dateProperties.monthname + ' ' + dateProperties.day + ', ' + dateProperties.year + '</h4></div>' ),
						$close = $( '<span class="custom-content-close"></span>' ).on( 'click', hideEvents );
					$events.append( $contentEl.html() , $close ).insertAfter( $wrapper );					
					setTimeout( function() {
						$events.css( 'top', '0%' );
					}, 25 );
				}
				function hideEvents() {
					var $events = $( '#custom-content-reveal' );
					if( $events.length > 0 ) {						
						$events.css( 'top', '100%' );
						Modernizr.csstransitions ? $events.on( transEndEventName, function() { $( this ).remove(); } ) : $events.remove();
					}
				}			
			});
		
            
          
!
999px
Loading ..................

Console