jquery日历插件，可自定义日期内容

效果图：

使用：

<link href="static/css/raoCalendar.css" rel="stylesheet" type="text/css"><script src="static/js/jquery.min.js"></script>
<script src="static/js/raoCalendar.js"></script>
<script>var data = [{ data: "2022-05-18", content: "1"},{ data: "2022-05-20", content: "1"},{ data: "2022-05-26", content: "1"} // content内容可传入html字符串];var calendar = $(".calendar-container").raoCalendar({data: data,activeClass: "active-bg",todayClass: "today-bg",prevMonthClick: function(year,month){console.log("prev",year,month);},nextMonthClick: function(year,month){console.log("next",year,month);},dayClick: function(date,item){console.log(date,item);}});calendar.setDate("2020-05-31"); //设置日期calendar.setData(data);	// 设置日程数据</script>

raoCalendar.js

;(function($){$.fn.raoCalendar = function(options){var _this = $(this);var today = getToday();var defaults = {//各种参数，各种属性data: [],isActiveToday: true,activeClass: "",todayClass: "",prevMonthClick: function(year,month){},nextMonthClick: function(year,month){},dayClick: function(date){}}var options = $.extend(defaults,options);_this.setDate = function(date){if(date){var year = date.substr(0,4),month = date.substr(5,2);$("#years").val(year);$("#months").val(month);settopmonth(year,month);var days = getDaysInOneMonth(year,month);//某个时间的当月天数var week_time = new Date(year,month-1,1);var week = week_time.getDay(); //此月第一天星期几set_table(week,days,year,month);setTimeout(function(){setDayActive('day',date);options.dayClick(date);},0);}};_this.setData = function(data){options.data = data;$(".calendar .table .tbody .td").each(function(){var day = $(this).data("date");var item = data.find(function(it){ return it.date && it.date==day; });var itemIndex = data.findIndex(function(it){ return it.date && it.date==day; });if(item && item.content){$(this).attr("data-index",itemIndex);$(this).find(".td2").html(item.content);}});};initPage();$(".calendar .prev_month_btn").click(function(){ //上一月按钮var dates = prev_month();options.prevMonthClick(dates[0],dates[1]);});$(".calendar .next_month_btn").click(function(){ //下一月按钮var dates = next_month();options.nextMonthClick(dates[0],dates[1]);});$(".calendar .table .tbody").on("click",".td",function(){  //td点击事件var date = $(this).data("date");var dataIndex = Number($(this).attr("data-index"));if(date){setDayActive('day',date);if(dataIndex!=NaN && options.data[dataIndex]){options.dayClick(date,options.data[dataIndex]);}else{options.dayClick(date,null);}}});function initPage(){var html = '<div class="calendar">';html +=     '<input type="hidden" value="" id="years" /><input type="hidden" value="" id="months" />';html +=     '<div class="title"><a class="prev_month_btn"><i class="iconfont icon-left"></i></a><span id="month"></span><a class="next_month_btn"><i class="iconfont icon-right"></i></a></div>';html +=     '<div class="calendars">';html +=         '<div class="table">';html +=             '<div class="thead">';html +=                 '<div class="tr">';html +=                     '<div class="td">日</div>';html +=                     '<div class="td">一</div>';html +=                     '<div class="td">二</div>';html +=                     '<div class="td">三</div>';html +=                     '<div class="td">四</div>';html +=                     '<div class="td">五</div>';html +=                     '<div class="td">六</div>';html +=                 '</div>';html +=             '</div>';html +=             '<div class="tbody">';html +=                 '<div class="tr"></div>';html +=                 '<div class="tr"></div>';html +=                 '<div class="tr"></div>';html +=                 '<div class="tr"></div>';html +=                 '<div class="tr"></div>';html +=                 '<div class="tr"></div>';html +=                 '<div class="tr"></div>';html +=             '</div>';html +=         '</div>';html +=     '</div>';html += '</div>';_this.empty();_this.append(html);setTimeout(function(){start_calendar();if(options.data && options.data.length>0){_this.setData(options.data);}// 是否默认选中今天的日期if(options.isActiveToday){setTimeout(function(){$(".calendar .table .tbody .td").each(function(){var day = $(this).data("date");if(day==today){$(this).click();}});},0)}},0);}function start_calendar(){  //开始日历var date = new Date();var year = date.getFullYear();var month = date.getMonth()+1;  //本月是几月month = month<10?'0'+month:month;var day = date.getDate(); //今天是几号var curMonthDays = new Date(date.getFullYear(), (date.getMonth()+1), 0).getDate();  //本月有几天date.setDate(1); //设置当前日期为1号var week = date.getDay();  //一号星期几set_table(week,curMonthDays,year,month); //添加td,并且加上日期settopmonth(year,month); //设置日历的年月$("#years").val(year);$("#months").val(month);}function settopmonth(year,month){  //设置年月$(".calendar #month").html(year+"年 "+month+"月");}function set_table(week,curMonthDays,year,month){  //设置日期。添加td等var n=1;var dateStr = year + "-" +month + "-";$(".calendar .table .tbody .tr").html(null);for(i=0;i<42;i++){if(i/7<1){if(i<week){var html = "<div class='td'><div class='td1'></div><div class='td2'></div></div>";$(".calendar .table .tbody").children().eq(0).append(html);}else if(i>=week){if(n<10) var day = '0'+n;var date = dateStr + day;var html = "<div class='td' data-date='"+date+"'><div class='td1'>"+day+"</div><div class='td2'></div></div>";n++;$(".calendar .table .tbody").children().eq(0).append(html);}}else if(i/7<2 && i/7>=1){if(n<10){var day = '0'+n;var date = dateStr + day;var html = "<div class='td' data-date='"+date+"'><div class='td1'>"+day+"</div><div class='td2'></div></div>";}else{var date = dateStr + n;var html = "<div class='td' data-date='"+date+"'><div class='td1'>"+n+"</div><div class='td2'></div></div>";}n++;$(".calendar .table .tbody").children().eq(1).append(html);}else if(i/7<3 && i/7>=2){if(n<10){var day = '0'+n;var date = dateStr + day;var html = "<div class='td' data-date='"+date+"'><div class='td1'>"+day+"</div><div class='td2'></div></div>";}else{var date = dateStr + n;var html = "<div class='td' data-date='"+date+"'><div class='td1'>"+n+"</div><div class='td2'></div></div>";}n++;$(".calendar .table .tbody").children().eq(2).append(html);}else if(i/7<4 && i/7>=3){var date = dateStr + n;var html = "<div class='td' data-date='"+date+"'><div class='td1'>"+n+"</div><div class='td2'></div></div>";n++;$(".calendar .table .tbody").children().eq(3).append(html);}else if(i/7<5 && i/7>=4){if(n>curMonthDays){var html = "<div class='td'><div class='td1'></div><div class='td2'></div></div>";$(".calendar .table .tbody").children().eq(4).append(html);}else{var date = dateStr + n;var html = "<div class='td' data-date='"+date+"'><div class='td1'>"+n+"</div><div class='td2'></div></div>";n++;$(".calendar .table .tbody").children().eq(4).append(html);}}else if(i/7<6 && i/7>=5){if(n>curMonthDays){var html = "<div class='td'><div class='td1'></div><div class='td2'></div></div>";$(".calendar .table .tbody").children().eq(5).append(html);}else{var date = dateStr + n;var html = "<div class='td' data-date='"+date+"'><div class='td1'>"+n+"</div><div class='td2'></div></div>";n++;$(".calendar .table .tbody").children().eq(5).append(html);}}}setDayActive('today',today); //设置今天的背景颜色}function setDayActive(type,date){var className = options.activeClass?options.activeClass:'active';if(type=='today'){className = options.todayClass?options.todayClass:'today';}$(".calendar .table .tbody .td").each(function(){var day = $(this).data("date");if(day==date){$(this).addClass(className);}else{$(this).removeClass(className);}});}function next_month(){var year = parseInt($("#years").val());var month = parseInt($("#months").val());if(month==12){year = year+1;month = 1;}else{month = month+1;}month = month<10?'0'+month:month;$("#years").val(year);$("#months").val(month);settopmonth(year,month);var days = getDaysInOneMonth(year,month);//某个时间的当月天数var week_time = new Date(year,month-1,1);var week = week_time.getDay(); //此月第一天星期几set_table(week,days,year,month);return [year,month];}function getDaysInOneMonth(year, month){month = parseInt(month, 10);var d= new Date(year, month, 0);return d.getDate();}function prev_month(){var year = parseInt($("#years").val());var month = parseInt($("#months").val());if(month==1){year = year-1;month = 12;}else{month = month-1;}month = month<10?'0'+month:month;$("#years").val(year);$("#months").val(month);settopmonth(year,month);var days = getDaysInOneMonth(year,month);//某个时间的当月天数var week_time = new Date(year,month-1,1);var week = week_time.getDay(); //此月第一天星期几set_table(week,days,year,month);return [year,month];}function getToday(){var date = new Date();var year = date.getFullYear(),month = date.getMonth() + 1,day = date.getDate();month = month<10?'0'+month:month;day = day<10?'0'+day:day;return year + "-" + month + "-" +day;}return _this;}})(jQuery);

raoCalendar.css


.calendar{width: 100%;overflow: hidden;
}
.calendar .title{width: 100%;height: 40px;line-height: 40px;text-align: center;font-size: 20px;font-weight: bold;
}
.calendar .title .prev_month_btn{display: block;float: left;line-height: 40px;font-size: 15px;margin-left: 10px;text-decoration: none;cursor: pointer;
}
.calendar .title #month{color: #585858;font-weight: 200;
}
.calendar .title .next_month_btn{display: block;float: right;line-height: 40px;font-size: 15px;margin-right: 10px;text-decoration: none;cursor: pointer;
}
.calendar .calendars{width: 100%;margin: 0 auto;/*background: #FFCC99;*/
}
.calendar .calendars .table{border: 0;margin: 0;width: 100%;text-align: center;
}
.calendar .calendars .table .tr{display: flex;align-items: center;justify-content: space-between;
}
.calendar .calendars .table .thead{color: #888888;
}
.calendar .calendars .table .td{border: 0;text-align: center;width: 40px;height: 40px;padding: 0;padding-top: 5px;position: relative;cursor: pointer;border-radius: 50%;color: #333;
}
.calendar .calendars .table .td.today{background-color: rgba(0,0,0,0.2);color: #000;
}
.calendar .calendars .table .td.active{background-color: #999;color: #fff;
}
.calendar .calendars .table .td .td1{width: 100%;height: 20px;line-height: 20px;text-align: center;
}
.calendar .calendars .table .td .td2{width: 100%;height: 15px;line-height: 15px;text-align: center;font-size: 12px;
}