123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!--[if IE 9]><html class="no-js ie9"><![endif]-->
<!--[if gt IE 9]><!--><html class="no-js"><!--<![endif]-->
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>Flexible Calendar</title>
		<meta name="description" content="Flexible Calendar with jQuery and CSS3" />
		<meta name="keywords" content="responsive, calendar, jquery, plugin, full page, flexible, javascript, css3, media queries" />
		<meta name="author" content="Codrops" />
	<body>
		<div class="container">	
			<!-- Codrops top bar -->
		  <!--/ Codrops top bar -->
<div class="custom-calendar-wrap custom-calendar-full">
				
				</div>
				<div id="calendar" class="fc-calendar-container"></div>
			</div>
		</div><!-- /container -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.calendario.js"></script>
		<script type="text/javascript" src="js/data.js"></script>
		<script type="text/javascript">	
			$(function() {
			
				var cal = $( '#calendar' ).calendario( {
						onDayClick : function( $el, $contentEl, dateProperties ) {

							for( var key in dateProperties ) {
								console.log( key + ' = ' + dateProperties[ key ] );
							}

						},
						caldata : codropsEvents
					} ),
					$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 );
				} );
				$( '#custom-current' ).on( 'click', function() {
					cal.gotoNow( updateMonthYear );
				} );

				function updateMonthYear() {				
					$month.html( cal.getMonthName() );
					$year.html( cal.getYear() );
				}

				// you can also add more data later on. As an example:
				/*
				someElement.on( 'click', function() {
					
					cal.setData( {
						'03-01-2013' : '<a href="#">testing</a>',
						'03-10-2013' : '<a href="#">testing</a>',
						'03-12-2013' : '<a href="#">testing</a>'
					} );
					// goes to a specific month/year
					cal.goto( 3, 2013, updateMonthYear );

				} );
				*/
			
			});
		</script>
	</body>
</html>

            
          
!
            
              @font-face {
  font-family: 'http://studiomp4.hol.es/mob/mac/font/fontawesome-selected';
  src: url("http://studiomp4.hol.es/mob/mac/font//fontawesome-selected.eot");
  src: url("http://studiomp4.hol.es/mob/mac/font//fontawesome-selected.eot?#iefix") format('embedded-opentype'), url("http://studiomp4.hol.es/mob/mac/font//fontawesome-selected.woff") format('woff'), url("http://studiomp4.hol.es/mob/mac/font/fontawesome-selected.ttf") format('truetype'), url("http://studiomp4.hol.es/mob/mac/font//fontawesome-selected.svg#fontawesome-selected") format('svg');
  font-weight: normal;
  font-style: normal;
}

.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;
}

/* IE 9 is rounding up the calc it seems */
.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;
}
body {
	background: #cebe29;
	background: -moz-linear-gradient(-45deg, #cebe29 0%, #9b1f50 33%, #2989d8 71%, #89b4ff 91%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#cebe29), color-stop(33%,#9b1f50), color-stop(71%,#2989d8), color-stop(91%,#89b4ff));
	background: -webkit-linear-gradient(-45deg, #cebe29 0%,#9b1f50 33%,#2989d8 71%,#89b4ff 91%);
	background: -o-linear-gradient(-45deg, #cebe29 0%,#9b1f50 33%,#2989d8 71%,#89b4ff 91%);
	background: -ms-linear-gradient(-45deg, #cebe29 0%,#9b1f50 33%,#2989d8 71%,#89b4ff 91%);
	background: linear-gradient(135deg, #cebe29 0%,#9b1f50 33%,#2989d8 71%,#89b4ff 91%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebe29', endColorstr='#89b4ff',GradientType=1 );
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
}

.custom-calendar-full {
	position: absolute;
	top: 24px;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: auto;
}

.fc-calendar-container {
	height: auto;
	bottom: 0px;
	width: 100%;
	top: 50px;
	position: absolute;
}

.custom-header {
	padding: 20px 20px 10px 30px;
	height: 50px;
	position: relative;
}

.custom-header h2,
.custom-header h3 {
	float: left;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 4px;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}

.custom-header h2 {
	color: #fff;
	width: 60%;
}

.custom-header h2 a, 
.custom-header h2 span {
	color: rgba(255,255,255,0.3);
	font-size: 18px;
	letter-spacing: 3px;
	white-space: nowrap;
}

.custom-header h2 a {
	color: rgba(255,255,255,0.5);
}

.no-touch .custom-header h2 a:hover {
	color: rgba(255,255,255,0.9);
}

.custom-header h3 {
	width: 40%;
	color: #ddd;
	color: rgba(255,255,255,0.6);
	font-weight: 300;
	line-height: 30px;
	text-align: right;
	padding-right: 125px;
}

.custom-header nav {
	position: absolute;
	right: 20px;
	top: 20px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.custom-header nav span {
	float: left;
	width: 30px;
	height: 30px;
	position: relative;
	color: transparent;
	cursor: pointer;
	background: rgba(255,255,255,0.3);
	margin: 0 1px;
	font-size: 20px;
	border-radius: 0 3px 3px 0;
	box-shadow: inset 0 1px rgba(255,255,255,0.2);
}

.custom-header nav span:first-child {
	border-radius: 3px 0 0 3px;
}

.custom-header nav span:hover {
	background: rgba(255,255,255,0.5);
}

.custom-header span:before {
	font-family: 'fontawesome-selected';
	color: #fff;
	display: inline-block;
	text-align: center;
	width: 100%;
	text-indent: 4px;
}

.custom-header nav span.custom-prev:before {
	content: '\25c2';
}

.custom-header nav span.custom-next:before {
	content: '\25b8';
}

.custom-header nav span:last-child {
	margin-left: 20px;
	border-radius: 3px;
}

.custom-header nav span.custom-current:before {
	content: '\27a6';
}


.fc-calendar {
	background: rgba(255,255,255,0.1);
	width: auto;
	top: 10px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	height: auto;
	border-radius: 20px;
	position: absolute;
}

.fc-calendar .fc-head { 
	background: rgba(255,255,255,0.2);
	color: rgba(255,255,255,0.9);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
	border-radius: 20px 20px 0 0;
	height: 40px;
	line-height: 40px;
	padding: 0 20px;
}

.fc-calendar .fc-head > div {
	font-weight: 300;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 3px;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

.fc-calendar .fc-row > div > span.fc-date {
	color: rgba(255,255,255,0.9);
	text-shadow: none;
	font-size: 26px;
	font-weight: 300;
	bottom: auto;
	right: auto;
	top: 10px;
	left: 10px;
	text-align: left;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.fc-calendar .fc-body {
	border: none;
	padding: 20px;
}

.fc-calendar .fc-row {
	box-shadow: inset 0 -1px 0 rgba(255,255,255,0.2);
	border: none;
}

.fc-calendar .fc-row:last-child {
	box-shadow: none;
}

.fc-calendar .fc-row:first-child > div:first-child {
	border-radius: 10px 0 0 0;
}

.fc-calendar .fc-row:first-child > div:last-child {
	border-radius: 0 10px 0 0;
}

.fc-calendar .fc-row:last-child > div:first-child {
	border-radius: 0 0 0 10px;
}

.fc-calendar .fc-row:last-child > div:last-child {
	border-radius: 0 0 10px 0;
}

.fc-calendar .fc-row > div {
	box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
	border: none;
	padding: 10px;
	cursor: pointer;
}

.fc-calendar .fc-row > div:first-child{
	box-shadow: none;
}

.fc-calendar .fc-row > div.fc-today {
	background: transparent;
	box-shadow: inset 0 0 100px rgba(255,255,255,0.1);
}

.fc-calendar .fc-row > div.fc-today:after { 
	content: ''; 
	display: block;
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.2;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .15)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
	background: -o-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -o-llinear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
	background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -ms-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
	background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}

.fc-calendar .fc-row > div > div {
	margin-top: 35px;
}

.fc-calendar .fc-row > div > div a,
.fc-calendar .fc-row > div > div span {
	color: rgba(255,255,255,0.7);
	font-size: 12px;
	text-transform: uppercase;
	display: inline-block;
	padding: 3px 5px;
	border-radius: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	margin-bottom: 1px;
	background: rgba(255,255,255,0.1);
}

.no-touch .fc-calendar .fc-row > div > div a:hover {
	background: rgba(255,255,255,0.3);
}

@media screen and (max-width: 880px) , screen and (max-height: 450px) {
	html, body, .container {
		height: auto;
	}

	.custom-header,
	.custom-header nav,
	.custom-calendar-full,
	.fc-calendar-container, 
	.fc-calendar,
	.fc-calendar .fc-head,
	.fc-calendar .fc-row > div > span.fc-date {
		position: relative;
		top: auto;
		left: auto;
		bottom: auto;
		right: auto;
		height: auto;
		width: auto;
	}

	.fc-calendar {
		margin: 0 20px 20px;
	}

	.custom-header h2,
	.custom-header h3 {
		float: none;
		width: auto;
		text-align: left;
		padding-right: 100px;
	}

	.fc-calendar .fc-row,
	.ie9 .fc-calendar .fc-row > div,
	.fc-calendar .fc-row > div {
		height: auto;
		width: 100%;
		border: none;
	}

	.fc-calendar .fc-row > div {
		float: none;
		min-height: 50px;
		box-shadow: inset 0 -1px rgba(255,255,255,0.2) !important;
		border-radius: 0px !important;
	}

	.fc-calendar .fc-row > div:empty{
		min-height: 0;
		height: 0;
		box-shadow: none !important;
		padding: 0;
	}

	.fc-calendar .fc-row {
		box-shadow: none;
	}

	.fc-calendar .fc-head {
		display: none;
	}

	.fc-calendar .fc-row > div > div {
		margin-top: 0px;
		padding-left: 10px;
		max-width: 70%;
		display: inline-block;
	}

	.fc-calendar .fc-row > div.fc-today {
		background: rgba(255, 255, 255, 0.2);
	}

	.fc-calendar .fc-row > div.fc-today:after { 
		display: none;
	}

	.fc-calendar .fc-row > div > span.fc-date {
		width: 30px;
		display: inline-block;
		text-align: right;
	}

	.fc-calendar .fc-row > div > span.fc-weekday {
		display: inline-block;
		width: 40px;
		color: #fff;
		color: rgba(255,255,255,0.7);
		font-size: 10px;
		text-transform: uppercase;
	}
}
            
          
!
            
              var codropsEvents = {
	'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>'
};
/**
 * jquery.calendario.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * https://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2012, Codrops
 * http://www.codrops.com
 */
;( function( $, window, undefined ) {
	
	'use strict';

	$.Calendario = function( options, element ) {
		
		this.$el = $( element );
		this._init( options );
		
	};

	// the options
	$.Calendario.defaults = {
		/*
		you can also pass:
		month : initialize calendar with this month (1-12). Default is today.
		year : initialize calendar with this year. Default is today.
		caldata : initial data/content for the calendar.
		caldata format:
		{
			'MM-DD-YYYY' : 'HTML Content',
			'MM-DD-YYYY' : 'HTML Content',
			'MM-DD-YYYY' : 'HTML Content'
			...
		}
		*/
		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' ],
		// choose between values in options.weeks or options.weekabbrs
		displayWeekAbbr : false,
		// choose between values in options.months or options.monthabbrs
		displayMonthAbbr : false,
		// left most day in the calendar
		// 0 - Sunday, 1 - Monday, ... , 6 - Saturday
		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 );
				}

			} );

		},
		// Calendar logic based on http://jszen.blogspot.pt/2007/03/how-to-build-simple-calendar-with.html
		_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 ),
				// number of days in the month
				monthLength = d.getDate(),
				firstDay = new Date( this.year, this.month, 1 );

			// day of the week
			this.startingDay = firstDay.getDay();

			var html = '<div class="fc-body"><div class="fc-row">',
				// fill in the days
				day = 1;

			// this loop is for weeks (rows)
			for ( var i = 0; i < 7; i++ ) {

				// this loop is for weekdays (cells)
				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>';

						// this day is:
						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;

					}
					else {
						today = false;
					}

					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 );

		},
		/************************* 
		******PUBLIC METHODS *****
		**************************/
		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 ];
		},
		// gets the cell's content div associated to a day of the current displayed month
		// day : 1 - [28||29||30||31]
		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 );
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
 * Build: https://modernizr.com/download/#-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load
 */
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["&#173;",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:w(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console