经验分享程序开发文档资料数据资源其它资源

国外网站抠下来的jquery日历js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 国外网站抠下来的jquery日历js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

国外网站抠下来的jquery日历js代码

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
	<head>
		<title>������վ��������jquery����</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<link rel="stylesheet" href="css/style.css" type="text/css">
		<!--<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>-->
		<!----Calender -------->
			<script src="js/jquery.js" type="text/javascript"></script>
			<script type="text/javascript" src="js/jquery.openCarousel.js"></script> 
		    <link rel="stylesheet" href="css/clndr.css" type="text/css" />
			<script src= "js/moment-2.2.1.js" type="text/javascript"></script>
		    <script src="js/clndr.js" type="text/javascript"></script>
		    <script src="js/site.js" type="text/javascript"></script>
  		<!----End Calender -------->
	</head>
	<body>
<div class="content">
	<div class="cal1">
	</div>
</div>
</body>
</html>

JS代码(clndr.js):

/* * ~ CLNDR v1.1.0 ~ * ============================================== * https://github.com/kylestetz/CLNDR * ============================================== * created by kyle stetz (github.com/kylestetz) * &available under the MIT license * http://opensource.org/licenses/mit-license.php * ============================================== * * This is the fully-commented development version of CLNDR. * For the production version,check out clndr.min.js * at https://github.com/kylestetz/CLNDR * * This work is based on the * jQuery lightweight plugin boilerplate * Original author:@ajpiano * Further changes,comments:@addyosmani * Licensed under the MIT license */
;
	(function ( $,window,document,undefined ){
	// This is the default calendar template. This can be overridden. var clndrTemplate = "<div class='clndr-controls'>" + "<div class='clndr-control-button'><p class='clndr-previous-button'>previous</p></div><div class='month'><%= month %> <%= year %></div><div class='clndr-control-button rightalign'><p class='clndr-next-button'>next</p></div>" + "</div>" + "<table class='clndr-table' border='0' cellspacing='0' cellpadding='2'>" + "<thead>" + "<tr class='header-days'>" + "<% for(var i = 0;
	i < daysOfTheWeek.length;
	i++){
	%>" + "<td class='header-day'><%= daysOfTheWeek[i] %></td>" + "<%}
%>" + "</tr>" + "</thead>" + "<tbody>" + "<% for(var i = 0;
	i < numberOfRows;
	i++){
	%>" + "<tr>" + "<% for(var j = 0;
	j < 7;
	j++){
	%>" + "<% var d = j + i * 7;
	%>" + "<td class='<%= days[d].classes %>'><div class='day-contents'><%= days[d].day %>" + "</div></td>" + "<%}
%>" + "</tr>" + "<%}
%>" + "</tbody>" + "</table>";
	var pluginName = 'clndr';
	var defaults ={
	template:clndrTemplate,weekOffset:0,startWithMonth:null,clickEvents:{
	click:null,nextMonth:null,previousMonth:null,nextYear:null,previousYear:null,today:null,onMonthChange:null,onYearChange:null}
,targets:{
	nextButton:'clndr-next-button',previousButton:'clndr-previous-button',nextYearButton:'clndr-next-year-button',previousYearButton:'clndr-previous-year-button',todayButton:'clndr-today-button',day:'day',empty:'empty'}
,events:[],extras:null,dateParameter:'date',multiDayEvents:null,doneRendering:null,render:null,daysOfTheWeek:['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],showAdjacentMonths:true,adjacentDaysChangeMonth:false,ready:null,constraints:null}
;
	// The actual plugin constructor function Clndr( element,options ){
	this.element = element;
	// merge the default options with user-provided options this.options = $.extend(true,{
}
,defaults,options);
	// if there are events,we should run them through our addMomentObjectToEvents function // which will add a date object that we can use to make life easier. This is only necessary // when events are provided on instantiation,since our setEvents function uses addMomentObjectToEvents. if(this.options.events.length){
	if(this.options.multiDayEvents){
	this.options.events = this.addMultiDayMomentObjectsToEvents(this.options.events);
}
else{
	this.options.events = this.addMomentObjectToEvents(this.options.events);
}
}
// this object will store a reference to the current month. // it's a moment object,which allows us to poke at it a little if we need to. // this will serve as the basis for switching between months & is the go-to // internally if we want to know which month we're currently at. if(this.options.startWithMonth){
	this.month = moment(this.options.startWithMonth).startOf('month');
}
else{
	this.month = moment().startOf('month');
}
// if we've got constraints set,make sure the month is within them. if(this.options.constraints){
	// first check if the start date exists & is later than now. if(this.options.constraints.startDate){
	var startMoment = moment(this.options.constraints.startDate);
	if(this.month.isBefore(startMoment,'month')){
	this.month.set('month',startMoment.month());
	this.month.set('year',startMoment.year());
}
}
// make sure the month (whether modified or not) is before the endDate if(this.options.constraints.endDate){
	var endMoment = moment(this.options.constraints.endDate);
	if(this.month.isAfter(endMoment,'month')){
	this.month.set('month',endMoment.month()).set('year',endMoment.year());
}
}
}
this._defaults = defaults;
	this._name = pluginName;
	// Some first-time initialization -> day of the week offset,// template compiling,making and storing some elements we'll need later,// & event handling for the controller. this.init();
}
Clndr.prototype.init = function (){
	// create the days of the week using moment's current language setting this.daysOfTheWeek = this.options.daysOfTheWeek || [];
	if(!this.options.daysOfTheWeek){
	this.daysOfTheWeek = [];
	for(var i = 0;
	i < 7;
	i++){
	this.daysOfTheWeek.push( moment().weekday(i).format('dd').charAt(0) );
}
}
// shuffle the week if there's an offset if(this.options.weekOffset){
	this.daysOfTheWeek = this.shiftWeekdayLabels(this.options.weekOffset);
}
// quick & dirty test to make sure rendering is possible. if( !$.isFunction(this.options.render) ){
	this.options.render = null;
	if (typeof _ === 'undefined'){
	throw new Error("Underscore was not found. Please include underscore.js OR provide a custom render function.");
}
else{
	// we're just going ahead and using underscore here if no render method has been supplied. this.compiledClndrTemplate = _.template(this.options.template);
}
}
// create the parent element that will hold the plugin & save it for later $(this.element).html("<div class='clndr'></div>");
	this.calendarContainer = $('.clndr',this.element);
	// attach event handlers for clicks on buttons/cells this.bindEvents();
	// do a normal render of the calendar template this.render();
	// if a ready callback has been provided,call it. if(this.options.ready){
	this.options.ready.apply(this,[]);
}
}
;
	Clndr.prototype.shiftWeekdayLabels = function(offset){
	var days = this.daysOfTheWeek;
	for(var i = 0;
	i < offset;
	i++){
	days.push( days.shift() );
}
return days;
}
;
	// This is where the magic happens. Given a moment object representing the current month,// an array of calendarDay objects is constructed that contains appropriate events and // classes depending on the circumstance. Clndr.prototype.createDaysObject = function(currentMonth){
	// this array will hold numbers for the entire grid (even the blank spaces) daysArray = [];
	var date = currentMonth.startOf('month');
	// filter the events list (if it exists) to events that are happening last month,this month and next month (within the current grid view) this.eventsLastMonth = [];
	this.eventsThisMonth = [];
	this.eventsNextMonth = [];
	if(this.options.events.length){
	// MULTI-DAY EVENT PARSING // if we're using multi-day events,the start or end must be in the current month if(this.options.multiDayEvents){
	this.eventsThisMonth = $(this.options.events).filter( function(){
	return this._clndrStartDateObject.format("YYYY-MM") == currentMonth.format("YYYY-MM") || this._clndrEndDateObject.format("YYYY-MM") == currentMonth.format("YYYY-MM");
}
).toArray();
	if(this.options.showAdjacentMonths){
	var lastMonth = currentMonth.clone().subtract('months',1);
	var nextMonth = currentMonth.clone().add('months',1);
	this.eventsLastMonth = $(this.options.events).filter( function(){
	return this._clndrStartDateObject.format("YYYY-MM") == lastMonth.format("YYYY-MM") || this._clndrEndDateObject.format("YYYY-MM") == lastMonth.format("YYYY-MM");
}
).toArray();
	this.eventsNextMonth = $(this.options.events).filter( function(){
	return this._clndrStartDateObject.format("YYYY-MM") == nextMonth.format("YYYY-MM") || this._clndrEndDateObject.format("YYYY-MM") == nextMonth.format("YYYY-MM");
}
).toArray();
}
}
// SINGLE-DAY EVENT PARSING // if we're using single-day events,use _clndrDateObject else{
	this.eventsThisMonth = $(this.options.events).filter( function(){
	return this._clndrDateObject.format("YYYY-MM") == currentMonth.format("YYYY-MM");
}
).toArray();
	// filter the adjacent months as well,if the option is true if(this.options.showAdjacentMonths){
	var lastMonth = currentMonth.clone().subtract('months',1);
	var nextMonth = currentMonth.clone().add('months',1);
	this.eventsLastMonth = $(this.options.events).filter( function(){
	return this._clndrDateObject.format("YYYY-MM") == lastMonth.format("YYYY-MM");
}
).toArray();
	this.eventsNextMonth = $(this.options.events).filter( function(){
	return this._clndrDateObject.format("YYYY-MM") == nextMonth.format("YYYY-MM");
}
).toArray();
}
}
}
// if diff is greater than 0,we'll have to fill in last days of the previous month // to account for the empty boxes in the grid. // we also need to take into account the weekOffset parameter var diff = date.weekday() - this.options.weekOffset;
	if(diff < 0) diff += 7;
	if(this.options.showAdjacentMonths){
	for(var i = 0;
	i < diff;
	i++){
	var day = moment([currentMonth.year(),currentMonth.month(),i - diff + 1]);
	daysArray.push( this.createDayObject(day,this.eventsLastMonth) );
}
}
else{
	for(var i = 0;
	i < diff;
	i++){
	daysArray.push( this.calendarDay({
	classes:this.options.targets.empty + " last-month"}
) );
}
}
// now we push all of the days in a month var numOfDays = date.daysInMonth();
	for(var i = 1;
	i <= numOfDays;
	i++){
	var day = moment([currentMonth.year(),currentMonth.month(),i]);
	daysArray.push(this.createDayObject(day,this.eventsThisMonth) )}
// ...and if there are any trailing blank boxes,fill those in // with the next month first days if(this.options.showAdjacentMonths){
	i = 1;
	while(daysArray.length % 7 !== 0){
	var day = moment([currentMonth.year(),currentMonth.month(),numOfDays + i]);
	daysArray.push( this.createDayObject(day,this.eventsNextMonth) );
	i++;
}
}
else{
	i = 1;
	while(daysArray.length % 7 !== 0){
	daysArray.push( this.calendarDay({
	classes:this.options.targets.empty + " next-month"}
) );
	i++;
}
}
return daysArray;
}
;
	Clndr.prototype.createDayObject = function(day,monthEvents){
	var eventsToday = [];
	var now = moment();
	var self = this;
	var j = 0,l = monthEvents.length;
	for(j;
	j < l;
	j++){
	// keep in mind that the events here already passed the month/year test. // now all we have to compare is the moment.date(),which returns the day of the month. if(self.options.multiDayEvents){
	var start = monthEvents[j]._clndrStartDateObject;
	var end = monthEvents[j]._clndrEndDateObject;
	// if today is the same day as start or is after the start,and // if today is the same day as the end or before the end ... // woohoo semantics! if( ( day.isSame(start,'day') || day.isAfter(start,'day') ) && ( day.isSame(end,'day') || day.isBefore(end,'day') ) ){
	eventsToday.push( monthEvents[j] );
}
}
else{
	if( monthEvents[j]._clndrDateObject.date() == day.date() ){
	eventsToday.push( monthEvents[j] );
}
}
}
var extraClasses = "";
	if(now.format("YYYY-MM-DD") == day.format("YYYY-MM-DD")){
	extraClasses += " today";
}
if(day.isBefore(now,'day')){
	extraClasses += " past";
}
if(eventsToday.length){
	extraClasses += " event";
}
if(this.month.month() > day.month()){
	extraClasses += " adjacent-month";
	this.month.year() === day.year() ? extraClasses += " last-month":extraClasses += " next-month";
}
else if(this.month.month() < day.month()){
	extraClasses += " adjacent-month";
	this.month.year() === day.year() ? extraClasses += " next-month":extraClasses += " last-month";
}
// if there are constraints,we need to add the inactive class to the days outside of them if(this.options.constraints){
	if(this.options.constraints.startDate && day.isBefore(moment( this.options.constraints.startDate ))){
	extraClasses += " inactive";
}
if(this.options.constraints.endDate && day.isAfter(moment( this.options.constraints.endDate ))){
	extraClasses += " inactive";
}
}
// validate moment date if (!day.isValid() && day.hasOwnProperty('_d') && day._d != undefined){
	day = moment(day._d);
}
// we're moving away from using IDs in favor of classes,since when // using multiple calendars on a page we are technically violating the // uniqueness of IDs. extraClasses += " calendar-day-" + day.format("YYYY-MM-DD");
	return this.calendarDay({
	day:day.date(),classes:this.options.targets.day + extraClasses,events:eventsToday,date:day}
);
}
;
	Clndr.prototype.render = function(){
	// get rid of the previous set of calendar parts. // TODO:figure out if this is the right way to ensure proper garbage collection? this.calendarContainer.children().remove();
	// get an array of days and blank spaces var days = this.createDaysObject(this.month);
	// this is to prevent a scope/naming issue between this.month and data.month var currentMonth = this.month;
	var data ={
	daysOfTheWeek:this.daysOfTheWeek,numberOfRows:Math.ceil(days.length / 7),days:days,month:this.month.format('MMMM'),year:this.month.year(),eventsThisMonth:this.eventsThisMonth,eventsLastMonth:this.eventsLastMonth,eventsNextMonth:this.eventsNextMonth,extras:this.options.extras}
;
	// render the calendar with the data above & bind events to its elements if(!this.options.render){
	this.calendarContainer.html(this.compiledClndrTemplate(data));
}
else{
	this.calendarContainer.html(this.options.render.apply(this,[data]));
}
// if there are constraints,we need to add the 'inactive' class to the controls if(this.options.constraints){
	// in the interest of clarity we're just going to remove all inactive classes and re-apply them each render. for(target in this.options.targets){
	if(target != this.options.targets.day){
	this.element.find('.' + this.options.targets[target]).toggleClass('inactive',false);
}
}
var start = null;
	var end = null;
	if(this.options.constraints.startDate){
	start = moment(this.options.constraints.startDate);
}
if(this.options.constraints.endDate){
	end = moment(this.options.constraints.endDate);
}
// deal with the month controls first. // are we at the start month? if(start && this.month.isSame( start,'month' )){
	this.element.find('.' + this.options.targets.previousButton).toggleClass('inactive',true);
}
// are we at the end month? if(end && this.month.isSame( end,'month' )){
	this.element.find('.' + this.options.targets.nextButton).toggleClass('inactive',true);
}
// what's last year looking like? if(start && moment(start).subtract('years',1).isBefore(moment(this.month).subtract('years',1)) ){
	this.element.find('.' + this.options.targets.previousYearButton).toggleClass('inactive',true);
}
// how about next year? if(end && moment(end).add('years',1).isAfter(moment(this.month).add('years',1)) ){
	this.element.find('.' + this.options.targets.nextYearButton).toggleClass('inactive',true);
}
// today? we could put this in init(),but we want to support the user changing the constraints on a living instance. if(( start && start.isAfter( moment(),'month' ) ) || ( end && end.isBefore( moment(),'month' ) )){
	this.element.find('.' + this.options.targets.today).toggleClass('inactive',true);
}
}
if(this.options.doneRendering){
	this.options.doneRendering.apply(this,[]);
}
}
;
	Clndr.prototype.bindEvents = function(){
	var $container = $(this.element);
	var self = this;
	// target the day elements and give them click events $container.on('click','.'+this.options.targets.day,function(event){
	if(self.options.clickEvents.click){
	var target = self.buildTargetObject(event.currentTarget,true);
	self.options.clickEvents.click.apply(self,[target]);
}
// if adjacentDaysChangeMonth is on,we need to change the month here. if(self.options.adjacentDaysChangeMonth){
	if($(event.currentTarget).is(".last-month")){
	self.backActionWithContext(self);
}
else if($(event.currentTarget).is(".next-month")){
	self.forwardActionWithContext(self);
}
}
}
);
	// target the empty calendar boxes as well $container.on('click','.'+this.options.targets.empty,function(event){
	if(self.options.clickEvents.click){
	var target = self.buildTargetObject(event.currentTarget,false);
	self.options.clickEvents.click.apply(self,[target]);
}
if(self.options.adjacentDaysChangeMonth){
	if($(event.currentTarget).is(".last-month")){
	self.backActionWithContext(self);
}
else if($(event.currentTarget).is(".next-month")){
	self.forwardActionWithContext(self);
}
}
}
);
	// bind the previous,next and today buttons $container .on('click','.'+this.options.targets.previousButton,{
	context:this}
,this.backAction) .on('click','.'+this.options.targets.nextButton,{
	context:this}
,this.forwardAction) .on('click','.'+this.options.targets.todayButton,{
	context:this}
,this.todayAction) .on('click','.'+this.options.targets.nextYearButton,{
	context:this}
,this.nextYearAction) .on('click','.'+this.options.targets.previousYearButton,{
	context:this}
,this.previousYearAction);
}
// If the user provided a click callback we'd like to give them something nice to work with. // buildTargetObject takes the DOM element that was clicked and returns an object with // the DOM element,events,and the date (if the latter two exist). Currently it is based on the id,// however it'd be nice to use a data- attribute in the future. Clndr.prototype.buildTargetObject = function(currentTarget,targetWasDay){
	// This is our default target object,assuming we hit an empty day with no events. var target ={
	element:currentTarget,events:[],date:null}
;
	// did we click on a day or just an empty box? if(targetWasDay){
	var dateString;
	// Our identifier is in the list of classNames. Find it! var classNameIndex = currentTarget.className.indexOf('calendar-day-');
	if(classNameIndex !== 0){
	// our unique identifier is always 23 characters long. // If this feels a little wonky,that's probably because it is. // Open to suggestions on how to improve this guy. dateString = currentTarget.className.substring(classNameIndex + 13,classNameIndex + 23);
	target.date = moment(dateString);
}
else{
	target.date = null;
}
// do we have events? if(this.options.events){
	// are any of the events happening today? if(this.options.multiDayEvents){
	target.events = $.makeArray( $(this.options.events).filter( function(){
	// filter the dates down to the ones that match. return ( ( target.date.isSame(this._clndrStartDateObject,'day') || target.date.isAfter(this._clndrStartDateObject,'day') ) && ( target.date.isSame(this._clndrEndDateObject,'day') || target.date.isBefore(this._clndrEndDateObject,'day') ) );
}
) );
}
else{
	target.events = $.makeArray( $(this.options.events).filter( function(){
	// filter the dates down to the ones that match. return this._clndrDateObject.format('YYYY-MM-DD') == dateString;
}
) );
}
}
}
return target;
}
// the click handlers in bindEvents need a context,so these are wrappers // to the actual functions. Todo:better way to handle this? Clndr.prototype.forwardAction = function(event){
	var self = event.data.context;
	self.forwardActionWithContext(self);
}
;
	Clndr.prototype.backAction = function(event){
	var self = event.data.context;
	self.backActionWithContext(self);
}
;
	// These are called directly,except for in the bindEvent click handlers,// where forwardAction and backAction proxy to these guys. Clndr.prototype.backActionWithContext = function(self){
	// before we do anything,check if there is an inactive class on the month control. // if it does,we want to return and take no action. if(self.element.find('.' + self.options.targets.previousButton).hasClass('inactive')){
	return;
}
// is subtracting one month going to switch the year? var yearChanged = !self.month.isSame( moment(self.month).subtract('months',1),'year');
	self.month.subtract('months',1);
	self.render();
	if(self.options.clickEvents.previousMonth){
	self.options.clickEvents.previousMonth.apply( self,[moment(self.month)] );
}
if(self.options.clickEvents.onMonthChange){
	self.options.clickEvents.onMonthChange.apply( self,[moment(self.month)] );
}
if(yearChanged){
	if(self.options.clickEvents.onYearChange){
	self.options.clickEvents.onYearChange.apply( self,[moment(self.month)] );
}
}
}
;
	Clndr.prototype.forwardActionWithContext = function(self){
	// before we do anything,check if there is an inactive class on the month control. // if it does,we want to return and take no action. if(self.element.find('.' + self.options.targets.nextButton).hasClass('inactive')){
	return;
}
// is adding one month going to switch the year? var yearChanged = !self.month.isSame( moment(self.month).add('months',1),'year');
	self.month.add('months',1);
	self.render();
	if(self.options.clickEvents.nextMonth){
	self.options.clickEvents.nextMonth.apply(self,[moment(self.month)]);
}
if(self.options.clickEvents.onMonthChange){
	self.options.clickEvents.onMonthChange.apply(self,[moment(self.month)]);
}
if(yearChanged){
	if(self.options.clickEvents.onYearChange){
	self.options.clickEvents.onYearChange.apply( self,[moment(self.month)] );
}
}
}
;
	Clndr.prototype.todayAction = function(event){
	var self = event.data.context;
	// did we switch months when the today button was hit? var monthChanged = !self.month.isSame(moment(),'month');
	var yearChanged = !self.month.isSame(moment(),'year');
	self.month = moment().startOf('month');
	// fire the today event handler regardless of whether the month changed. if(self.options.clickEvents.today){
	self.options.clickEvents.today.apply( self,[moment(self.month)] );
}
if(monthChanged){
	// no need to re-render if we didn't change months. self.render();
	self.month = moment();
	// fire the onMonthChange callback if(self.options.clickEvents.onMonthChange){
	self.options.clickEvents.onMonthChange.apply( self,[moment(self.month)] );
}
// maybe fire the onYearChange callback? if(yearChanged){
	if(self.options.clickEvents.onYearChange){
	self.options.clickEvents.onYearChange.apply( self,[moment(self.month)] );
}
}
}
}
;
	Clndr.prototype.nextYearAction = function(event){
	var self = event.data.context;
	// before we do anything,check if there is an inactive class on the month control. // if it does,we want to return and take no action. if(self.element.find('.' + self.options.targets.nextYearButton).hasClass('inactive')){
	return;
}
self.month.add('years',1);
	self.render();
	if(self.options.clickEvents.nextYear){
	self.options.clickEvents.nextYear.apply( self,[moment(self.month)] );
}
if(self.options.clickEvents.onMonthChange){
	self.options.clickEvents.onMonthChange.apply( self,[moment(self.month)] );
}
if(self.options.clickEvents.onYearChange){
	self.options.clickEvents.onYearChange.apply( self,[moment(self.month)] );
}
}
;
	Clndr.prototype.previousYearAction = function(event){
	var self = event.data.context;
	// before we do anything,check if there is an inactive class on the month control. // if it does,we want to return and take no action. if(self.element.find('.' + self.options.targets.previousYear).hasClass('inactive')){
	return;
}
self.month.subtract('years',1);
	self.render();
	if(self.options.clickEvents.previousYear){
	self.options.clickEvents.previousYear.apply( self,[moment(self.month)] );
}
if(self.options.clickEvents.onMonthChange){
	self.options.clickEvents.onMonthChange.apply( self,[moment(self.month)] );
}
if(self.options.clickEvents.onYearChange){
	self.options.clickEvents.onYearChange.apply( self,[moment(self.month)] );
}
}
;
	Clndr.prototype.forward = function(options){
	this.month.add('months',1);
	this.render();
	if(options && options.withCallbacks){
	if(this.options.clickEvents.onMonthChange){
	this.options.clickEvents.onMonthChange.apply( this,[moment(this.month)] );
}
// We entered a new year if (this.month.month() === 0 && this.options.clickEvents.onYearChange){
	this.options.clickEvents.onYearChange.apply( this,[moment(this.month)] );
}
}
return this;
}
Clndr.prototype.back = function(options){
	this.month.subtract('months',1);
	this.render();
	if(options && options.withCallbacks){
	if(this.options.clickEvents.onMonthChange){
	this.options.clickEvents.onMonthChange.apply( this,[moment(this.month)] );
}
// We went all the way back to previous year if (this.month.month() === 11 && this.options.clickEvents.onYearChange){
	this.options.clickEvents.onYearChange.apply( this,[moment(this.month)] );
}
}
return this;
}
// alternate names for convenience Clndr.prototype.next = function(options){
	this.forward(options);
	return this;
}
Clndr.prototype.previous = function(options){
	this.back(options);
	return this;
}
Clndr.prototype.setMonth = function(newMonth,options){
	// accepts 0 - 11 or a full/partial month name e.g. "Jan","February","Mar" this.month.month(newMonth);
	this.render();
	if(options && options.withCallbacks){
	if(this.options.clickEvents.onMonthChange){
	this.options.clickEvents.onMonthChange.apply( this,[moment(this.month)] );
}
}
return this;
}
Clndr.prototype.nextYear = function(options){
	this.month.add('year',1);
	this.render();
	if(options && options.withCallbacks){
	if(this.options.clickEvents.onYearChange){
	this.options.clickEvents.onYearChange.apply( this,[moment(this.month)] );
}
}
return this;
}
Clndr.prototype.previousYear = function(options){
	this.month.subtract('year',1);
	this.render();
	if(options && options.withCallbacks){
	if(this.options.clickEvents.onYearChange){
	this.options.clickEvents.onYearChange.apply( this,[moment(this.month)] );
}
}
return this;
}
Clndr.prototype.setYear = function(newYear,options){
	this.month.year(newYear);
	this.render();
	if(options && options.withCallbacks){
	if(this.options.clickEvents.onYearChange){
	this.options.clickEvents.onYearChange.apply( this,[moment(this.month)] );
}
}
return this;
}
Clndr.prototype.setEvents = function(events){
	// go through each event and add a moment object if(this.options.multiDayEvents){
	this.options.events = this.addMultiDayMomentObjectsToEvents(events);
}
else{
	this.options.events = this.addMomentObjectToEvents(events);
}
this.render();
	return this;
}
;
	Clndr.prototype.addEvents = function(events){
	// go through each event and add a moment object if(this.options.multiDayEvents){
	this.options.events = $.merge(this.options.events,this.addMultiDayMomentObjectsToEvents(events));
}
else{
	this.options.events = $.merge(this.options.events,this.addMomentObjectToEvents(events));
}
this.render();
	return this;
}
;
	Clndr.prototype.addMomentObjectToEvents = function(events){
	var self = this;
	var i = 0,l = events.length;
	for(i;
	i < l;
	i++){
	// stuff a _clndrDateObject in each event,which really,REALLY should not be // overriding any existing object... Man that would be weird. events[i]._clndrDateObject = moment( events[i][self.options.dateParameter] );
}
return events;
}
Clndr.prototype.addMultiDayMomentObjectsToEvents = function(events){
	var self = this;
	var i = 0,l = events.length;
	for(i;
	i < l;
	i++){
	events[i]._clndrStartDateObject = moment( events[i][self.options.multiDayEvents.startDate] );
	events[i]._clndrEndDateObject = moment( events[i][self.options.multiDayEvents.endDate] );
}
return events;
}
Clndr.prototype.calendarDay = function(options){
	var defaults ={
	day:"",classes:this.options.targets.empty,events:[],date:null}
;
	return $.extend({
}
,defaults,options);
}
$.fn.clndr = function(options){
	if( !$.data( this,'plugin_clndr') ){
	var clndr_instance = new Clndr(this,options);
	$.data(this,'plugin_clndr',clndr_instance);
	return clndr_instance;
}
}
}
)( jQuery,window,document );

JS代码(site.js):

// call this from the developer console and you can control both instancesvar calendars ={
}
;
	$(document).ready( function(){
	// assuming you've got the appropriate language files,// clndr will respect whatever moment's language is set to. // moment.lang('ru');
	// here's some magic to make sure the dates are happening this month. var thisMonth = moment().format('YYYY-MM');
	var eventArray = [{
	startDate:thisMonth + '-10',endDate:thisMonth + '-14',title:'Multi-Day Event'}
,{
	startDate:thisMonth + '-21',endDate:thisMonth + '-23',title:'Another Multi-Day Event'}
];
	// the order of the click handlers is predictable. // direct click action callbacks come first:click,nextMonth,previousMonth,nextYear,previousYear,or today. // then onMonthChange (if the month changed). // finally onYearChange (if the year changed). calendars.clndr1 = $('.cal1').clndr({
	events:eventArray,// constraints:{
	// startDate:'2013-11-01',// endDate:'2013-11-15' //}
,clickEvents:{
	click:function(target){
	console.log(target);
	if($(target.element).hasClass('inactive')){
	console.log('not a valid datepicker date.');
}
else{
	console.log('VALID datepicker date.');
}
}
,nextMonth:function(){
	console.log('next month.');
}
,previousMonth:function(){
	console.log('previous month.');
}
,onMonthChange:function(){
	console.log('month changed.');
}
,nextYear:function(){
	console.log('next year.');
}
,previousYear:function(){
	console.log('previous year.');
}
,onYearChange:function(){
	console.log('year changed.');
}
}
,multiDayEvents:{
	startDate:'startDate',endDate:'endDate'}
,showAdjacentMonths:true,adjacentDaysChangeMonth:false}
);
	// calendars.clndr2 = $('.cal2').clndr({
	// template:$('#template-calendar').html(),// events:eventArray,// startWithMonth:moment().add('month',1),// clickEvents:{
	// click:function(target){
	// console.log(target);
	//}
//}
//}
);
	// bind both clndrs to the left and right arrow keys $(document).keydown( function(e){
	if(e.keyCode == 37){
	// left arrow calendars.clndr1.back();
	calendars.clndr2.back();
}
if(e.keyCode == 39){
	// right arrow calendars.clndr1.forward();
	calendars.clndr2.forward();
}
}
);
}
);

CSS代码(clndr.css):

.cal1{background:#E3E3E3;}
/****/
thead{background:#49BD58;}
tbody{background:#DEDEDE;border-top:1px solid #ADADAD;border-left:1px solid #ADADAD;}
tbody a{color:#474747;}
/****/
.clndr{padding:0em 0;}
.noselect{-webkit-user-select:none;/* Chrome/Safari */
 -moz-user-select:none;/* Firefox */
 -ms-user-select:none;/* IE10+ */
}
.cal1 .clndr .clndr-controls{position:relative;color:#FFF;font-size:1em;font-weight:400;text-transform:uppercase;text-align:center;background:rgb(28,130,64);/* Old browsers */
background:-moz-linear-gradient(top,rgba(28,130,64,1) 0%,rgba(28,130,64,1) 1%,rgba(34,134,69,1) 3%,rgba(34,134,69,1) 4%,rgba(32,133,64,1) 6%,rgba(32,131,68,1) 13%,rgba(32,130,63,1) 15%,rgba(32,131,66,1) 21%,rgba(29,128,64,1) 32%,rgba(30,129,61,1) 34%,rgba(28,127,63,1) 39%,rgba(28,127,62,1) 49%,rgba(26,125,60,1) 51%,rgba(26,125,60,1) 66%,rgba(25,124,59,1) 71%,rgba(23,122,55,1) 73%,rgba(23,121,55,1) 92%,rgba(19,121,53,1) 95%,rgba(21,123,55,1) 97%,rgba(19,117,53,1) 99%,rgba(19,117,53,1) 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(28,130,64,1)),color-stop(1%,rgba(28,130,64,1)),color-stop(3%,rgba(34,134,69,1)),color-stop(4%,rgba(34,134,69,1)),color-stop(6%,rgba(32,133,64,1)),color-stop(13%,rgba(32,131,68,1)),color-stop(15%,rgba(32,130,63,1)),color-stop(21%,rgba(32,131,66,1)),color-stop(32%,rgba(29,128,64,1)),color-stop(34%,rgba(30,129,61,1)),color-stop(39%,rgba(28,127,63,1)),color-stop(49%,rgba(28,127,62,1)),color-stop(51%,rgba(26,125,60,1)),color-stop(66%,rgba(26,125,60,1)),color-stop(71%,rgba(25,124,59,1)),color-stop(73%,rgba(23,122,55,1)),color-stop(92%,rgba(23,121,55,1)),color-stop(95%,rgba(19,121,53,1)),color-stop(97%,rgba(21,123,55,1)),color-stop(99%,rgba(19,117,53,1)),color-stop(100%,rgba(19,117,53,1)));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,rgba(28,130,64,1) 0%,rgba(28,130,64,1) 1%,rgba(34,134,69,1) 3%,rgba(34,134,69,1) 4%,rgba(32,133,64,1) 6%,rgba(32,131,68,1) 13%,rgba(32,130,63,1) 15%,rgba(32,131,66,1) 21%,rgba(29,128,64,1) 32%,rgba(30,129,61,1) 34%,rgba(28,127,63,1) 39%,rgba(28,127,62,1) 49%,rgba(26,125,60,1) 51%,rgba(26,125,60,1) 66%,rgba(25,124,59,1) 71%,rgba(23,122,55,1) 73%,rgba(23,121,55,1) 92%,rgba(19,121,53,1) 95%,rgba(21,123,55,1) 97%,rgba(19,117,53,1) 99%,rgba(19,117,53,1) 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,rgba(28,130,64,1) 0%,rgba(28,130,64,1) 1%,rgba(34,134,69,1) 3%,rgba(34,134,69,1) 4%,rgba(32,133,64,1) 6%,rgba(32,131,68,1) 13%,rgba(32,130,63,1) 15%,rgba(32,131,66,1) 21%,rgba(29,128,64,1) 32%,rgba(30,129,61,1) 34%,rgba(28,127,63,1) 39%,rgba(28,127,62,1) 49%,rgba(26,125,60,1) 51%,rgba(26,125,60,1) 66%,rgba(25,124,59,1) 71%,rgba(23,122,55,1) 73%,rgba(23,121,55,1) 92%,rgba(19,121,53,1) 95%,rgba(21,123,55,1) 97%,rgba(19,117,53,1) 99%,rgba(19,117,53,1) 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,rgba(28,130,64,1) 0%,rgba(28,130,64,1) 1%,rgba(34,134,69,1) 3%,rgba(34,134,69,1) 4%,rgba(32,133,64,1) 6%,rgba(32,131,68,1) 13%,rgba(32,130,63,1) 15%,rgba(32,131,66,1) 21%,rgba(29,128,64,1) 32%,rgba(30,129,61,1) 34%,rgba(28,127,63,1) 39%,rgba(28,127,62,1) 49%,rgba(26,125,60,1) 51%,rgba(26,125,60,1) 66%,rgba(25,124,59,1) 71%,rgba(23,122,55,1) 73%,rgba(23,121,55,1) 92%,rgba(19,121,53,1) 95%,rgba(21,123,55,1) 97%,rgba(19,117,53,1) 99%,rgba(19,117,53,1) 100%);/* IE10+ */
background:linear-gradient(to bottom,rgba(28,130,64,1) 0%,rgba(28,130,64,1) 1%,rgba(34,134,69,1) 3%,rgba(34,134,69,1) 4%,rgba(32,133,64,1) 6%,rgba(32,131,68,1) 13%,rgba(32,130,63,1) 15%,rgba(32,131,66,1) 21%,rgba(29,128,64,1) 32%,rgba(30,129,61,1) 34%,rgba(28,127,63,1) 39%,rgba(28,127,62,1) 49%,rgba(26,125,60,1) 51%,rgba(26,125,60,1) 66%,rgba(25,124,59,1) 71%,rgba(23,122,55,1) 73%,rgba(23,121,55,1) 92%,rgba(19,121,53,1) 95%,rgba(21,123,55,1) 97%,rgba(19,117,53,1) 99%,rgba(19,117,53,1) 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c8240',endColorstr='#137535',GradientType=0 );/* IE6-9 */
}
.cal1 .clndr .clndr-controls .month{text-align:center;font-size:1.1em;padding:1.1em;}
.cal1 .clndr .clndr-controls .clndr-control-button .clndr-previous-button{position:absolute;left:0px;top:0px;width:35px;height:30px;text-indent:-4000px;background:url(../images/left-arrow.png) no-repeat 50%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}
.cal1 .clndr .clndr-controls .clndr-control-button .clndr-previous-button{float:left;border-right:1px ridge #0A6127;transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;padding:0.99em 0.85em;display:inline-block;}
.cal1 .clndr .clndr-controls .clndr-control-button .clndr-next-button{position:absolute;right:0px;top:0px;width:35px;height:30px;text-indent:-4000px;background:url(../images/right-arrow.png) no-repeat 50%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}
.cal1 .clndr .clndr-controls .clndr-control-button .clndr-next-button{float:right;border-left:1px ridge #0A6127;transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;display:inline-block;padding:1em;}
.cal1 .clndr:hover .clndr-controls:hover .clndr-control-button:hover .clndr-next-button:hover{background:url(../images/right-arrow.png) no-repeat 50% #187B38;}
.cal1 .clndr:hover .clndr-controls:hover .clndr-control-button:hover .clndr-previous-button:hover{background:url(../images/left-arrow.png) no-repeat 50% #187B38;}
.cal1 .clndr .clndr-table{table-layout:fixed;width:100%;margin:0 auto;}
.cal1 .clndr .clndr-table .header-days{font-size:1em;font-weight:500;}
.cal1 .clndr .clndr-table .header-days .header-day{vertical-align:middle;text-align:center;color:#FFF;border:none;text-shadow:0.5px 1px 0.8px #C5C5C5;}
.cal1 .clndr .clndr-table tr{height:45px;}
.cal1.clndr-table theade{border:none;}
.cal1 .clndr .clndr-table td{vertical-align:top;border-top:1px solid #ADADAD;border-left:1px solid #ADADAD;text-transform:uppercase;}
.cal1 .clndr .clndr-table tr .day{width:100%;height:inherit;color:#2C2C2C;vertical-align:middle;cursor:pointer;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.cal1 .clndr .clndr-table tr .day:hover{color:#177A38;}
.cal1 .clndr .clndr-table tr .day .day-contents{box-sizing:border-box;font-size:1.1em;text-align:center;cursor:pointer;font-weight:900;}
.cal1 .clndr .clndr-table tr .empty,.cal1 .clndr .clndr-table tr .adjacent-month{width:100%;height:inherit;color:#177A38;}

CSS代码(style.css):

/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}
/* text align right */
.txt-lt{text-align:left;}
/* text align left */
.txt-center{text-align:center;}
/* text align center */
.float-rt{float:right;}
/* float right */
.float-lt{float:left;}
/* float left */
.clear{clear:both;}
/* clear float */
.pos-relative{position:relative;}
/* Position Relative */
.pos-absolute{position:absolute;}
/* Position Absolute */
.vertical-base{vertical-align:baseline;}
/* vertical align baseline */
.vertical-top{vertical-align:top;}
/* vertical align top */
nav.vertical ul li{display:block;}
/* vertical menu */
nav.horizontal ul li{display:inline-block;}
/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body{font-family:'Open Sans',sans-serif;background:url(../images/bg02.png) no-repeat #222222;}
/*----start-content-----*/
.content{width:370px;min-height:385px;margin:14% auto 0 auto;}
.call{margin:0 auto;width:30%;}
/*----//end-content-----*/
/*----start-copy-right-----*/
.copy-right{text-align:center;}
.copy-right p{color:#FFF;font-size:0.9em;margin-top:7em;}
.copy-right p a{color:#49BD58;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}
.copy-right p a:hover{color:#fff;}
/*----//end-copy-right-----*/
/*----start-responsive design-----*/
@media only screen and (max-width:1440px) and (min-width:1366px){.content{width:370px;min-height:385px;margin:14% auto 0 auto;}
}
@media only screen and (max-width:1366px) and (min-width:1280px){.content{width:370px;min-height:385px;margin:14% auto 0 auto;}
}
@media only screen and (max-width:1280px) and (min-width:1024px){.content{width:370px;min-height:385px;margin:14% auto 0 auto;}
}
@media only screen and (max-width:1024px) and (min-width:768px){.content{width:370px;min-height:385px;margin:14% auto 0 auto;}
}
@media only screen and (max-width:768px) and (min-width:640px){.content{width:370px;min-height:385px;margin:14% auto 0 auto;}
}
@media only screen and (max-width:640px) and (min-width:480px){.content{width:370px;min-height:385px;margin:14% auto 0 auto;}
}
@media only screen and (max-width:320px) and (min-width:240px){.content{width:320px;}
.cal1 .clndr .clndr-table .header-days .header-day{font-size:0.95em;}
}
/*----//end-responsive design-----*/
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
113.82 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
113.82 KB
立即下载
薛慧
了解
打赏作者 鼓励作者
jquery特效9
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章