fanzherong
/
baozhangfang


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!DOCTYPE html>
<!--[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>11</title>
		<link rel="stylesheet" type="text/css" href="css/calendar.css" />
		<link rel="stylesheet" type="text/css" href="css/custom_2.css" />
		<script src="js/modernizr.custom.63321.js"></script>
		<style type="text/css">
		.custom-prev:before{
			width: 30px;
			height: 40px;
			cursor: pointer;
			margin: 0 1px;
			font-size: 20px;
			line-height: 40px;
			content: '\25c2';
			float:left;
			left: 5px;
			color: #1369d8;
			text-align: center;
		}
		
		.custom-next:before{
			width: 30px;
			height: 40px;
			cursor: pointer;
			margin: 0 1px;
			font-size: 20px;
			line-height: 40px;
			float:left;
			left: 5px;
			color: #1369d8;
			text-align: center;
			content: '\25b8';
		}
		</style>
	</head>
	<body>
		<div class="container">	
			<div style="width: 250px;">
				<div class="custom-calendar-wrap">
					<div id="custom-inner" class="custom-inner">
						<div style="width: 250px;height: 40px;overflow: hidden;text-align: center;">
							<div style="width:170px;height: 40px;line-height:40px; font-size:20px; font-weight:bold; margin-left:auto;margin-right:auto; text-align: center;color: #1369d8;">
								<div id="custom-prev" class="custom-prev"></div>
								<div id="custom-year" style="float:left;"></div>
								<div id="custom-month"style="float:left;"></div>
								<div id="custom-next" class="custom-next"></div>
							</div>
						</div>
						<div id="calendar" class="fc-calendar-container"></div>
					</div>
				</div>
			</div>
		</div><!-- /container -->
		<script src="js/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 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
					} ),
					$day = $( '#custom-day' ).html( cal.getDay()),
					$week = $( '#custom-week' ).html( cal.getWeek()),
					$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 ) {
					alert(11);
				}
			});
		</script>
	</body>
</html>