效果图:
使用:
<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;
}