日历 利用js制作Html日历插件 可在日历里面根据需求插入数据

/*调用*/

<div id="calendar"></div>

/*js*/

//初始化数据
var jsonData;
function dataTime(Y,M){
    /*后台数据结构,可以根据自己的需求修改*/
    jsonData={
        "code": "1",
        "data": [
            {
                "liveList": [
                    {
                        "isShowPercent": "1",
                        "isScore": "1",
                        "endDate": 1646388000000,
                        "liveType": "aa",
                        "playbackUrl": "",
                        "aaLiveId": "12",
                        "title": "ceshi",
                        "type": "1",
                        "liveId": 25219,
                        "roomId": "asdasdasdasd",
                        "recordId": "asdasd",
                        "stageName": "测试阶段",
                        "liveDuration": 253,
                        "liveUrl": "asdasdasd",
                        "liveTime": 0,
                        "startTime": "2022-03-10 16:00:00",
                        "endTime": "2022-03-10 18:00:00",
                        "replayTime": 0,
                        "startDate": 1646380800000
                    },
                    {
                        "isShowPercent": "1",
                        "isScore": "1",
                        "endDate": 1646388000000,
                        "liveType": "aa",
                        "playbackUrl": "",
                        "aaLiveId": "12",
                        "title": "ceshi",
                        "type": "1",
                        "liveId": 25219,
                        "roomId": "asdasdasdasd",
                        "recordId": "asdasd",
                        "stageName": "测试阶段",
                        "liveDuration": 253,
                        "liveUrl": "asdasdasd",
                        "liveTime": 0,
                        "startTime": "2022-03-10 18:00:00",
                        "endTime": "2022-03-10 20:00:00",
                        "replayTime": 0,
                        "startDate": 1646380800000
                    }
                ],
                "stageNamePC": "测试阶段",
                "days": 1646323200000,
                "daysPC": "2022-03-10"
            },
        ],
        "message": "ok"
    };
    var str="<h2 id='dateTitle' year="+Y+" month="+M+"><span id='prevM'></span>"+Y+"年"+zero(M)+"月<span id='back_date'>回到今日</span><span id='nextM'></span></h2><table><thead><th>SUN 日</th><th>MON 一</th><th>TUE 二</th><th>WED 三</th><th>THU 四</th><th>FRI 五</th><th>SAT 六</th></thead>"+getPicker(Y,M)+"</table>";
    $("#calendar").html(str);
}

currentDate();
//初始加载当前月日历
function currentDate(){
    var Y=new Date().getFullYear(),//当前年
    mon=new Date().getMonth()+1;//当前月;
    dataTime(Y,mon);
}

/*小于10加0*/
function zero(num){
    if(num<10){
        return "0"+num
    }else{
        return num;
    }
}

//点击上一个月
$("#calendar").on("click","#prevM",function(){
    var y=$("#dateTitle").attr("year");//获取标题当前的年分
    var m=$("#dateTitle").attr("month");//获取标题当前的月份
    m=m-1;//每点击一下月份减一
    if(m<1){//如果月小于1让月等于12 年减一
        m=12;
        y=y-1;
    }
    dataTime(y,m);
})

//点击下一个月
$("#calendar").on("click","#nextM",function(){
    var y=$("#dateTitle").attr("year");//获取标题当前的年分
    var m=$("#dateTitle").attr("month");//获取标题当前的月份
    m=parseInt(m)+1;//每点击一下月份加一
    if(m>12){//如果月大于12让月等于1 年加一
        m=1;
        y=parseInt(y)+1;
    }
    dataTime(y,m);
})

//回到当前月
$("#calendar").on("click","#back_date",function(){
    var classId=$(".dateNavAct").attr("data-id");
    currentDate();
})

function getDays(y,m){
    if(m==1 || m==3 || m==5 || m==7 || m==8 || m==10 || m==12){
        return 31;
    }else if(m==4 || m==6 || m==9 || m==11){
        return 30;
    }else{
        if(y%400==0 || (y%4==0 && y%100!=0)){
            return 29;
        }else{
            return 28;
        }
    }
}

function getPicker(y,m){
    //获取天数
    var days=getDays(y,m),//当前日历的天数
        front=getDays(y,m-1),//前一个月的天数
        pdays=new Date(y,m-1,1).getDay(),//当前月第一天的星期几
        today=new Date().getDate(),//系统几号
        toMon=new Date().getMonth()+1,//系统月
        html = "<tbody><tr>";
    if(pdays < 7 && pdays >= 1){
        for(var i=1;i<=pdays;i++){
            html += "<td><span>"+(front+(i-pdays))+"</span></td>";
        }
    }
    var formatMon = String(m);//格式化月份小于10，则追加0，例：9 =》09
    if(m < 10){
        formatMon = String("0"+m);
    }
    for(var j=1;j<=days;j++){
        var day = String(j);//格式化天小于10，则追加0
        if(j<10){
            var day = String("0"+j);
        }
        var returnData = isExist(jsonData,String(y)+'-'+formatMon+'-'+day);//拼接成和数据返回时间一直的时间格式
        if(returnData.liveList.length==0){
            if(m+"-"+day==toMon+"-"+today){
                html += "<td class='free_day'><i class='iconToday'></i><span>"+j+"</span></td>";//如果没有就是普通的显示日期（今天）
            }else{
                html += "<td class='free_day'><span>"+j+"</span></td>";//如果没有就是普通的显示日期
            }
        }else{
            html +="<td class='course_day'>"
            if(m+"-"+day==toMon+"-"+today){
                html += "<i class='iconToday'></i>";//今天
            }
            html +="<span class='phaseName'><em>共有"+returnData.liveList.length+"个讲座</em></span>"
            html +="<span class='freeData'>"+j+"</span>"
            html +="<p class='teacherNum'>"+returnData.stageName+"</p>"
            html +="<div class='dataNone'>"
            /*html +="<i></i>"*/
            html +="<div><time>"+returnData.days+"</time></div>"
            for(var i=0;i<returnData.liveList.length;i++){
                html +="<p>"+returnData.liveList[i].title+"</p>"
                html +="<p>开始时间："+returnData.liveList[i].startTime+"</p>"
                html +="<p>结束时间："+returnData.liveList[i].endTime+"</p>"
                html+="<p class='dateBtn'>"
                        +"<a href='javascript:;' class='unlook'>查看直播</a>"
                        +"<a href='javascript:;' class='unlook'>查看回播</a>"
                    +"</p>"
            }
            html +="</div>"
            html +="</td>";//如果有就显示数据信息
        }
        if(new Date(y,m-1,j).getDay() == 6){
            html += "</tr><tr>";//如果到了周六那么换行加上一个</tr><tr>
        }
    }

    html += "</tr></tbody>";

    return html;
}

function isExist(data,date){
    var isExist = {
        "liveNum":"",
        "days":"",
        "stageName":"",
        "liveList":[]
    };
    $.each(data.data, function(i){
        var dateStr=data.data[i].daysPC.substring(0,10);
        if(date == dateStr){//循环判断传递过来的日期是不是与数组中的任何一个日期相同
            isExist.liveNum = data.data[i].liveNum;//直播数量
            isExist.days = data.data[i].daysPC;//日期
            isExist.stageName=data.data[i].stageNamePC;//标题
            isExist.liveList = data.data[i].liveList;
        }

    });
    return isExist;
}

//划过日期
$("#calendar").on("mouseover",".course_day",function(){
    var h=$(this).children(".dataNone").height()/2;
    $(this).children(".dataNone").show();
    $(this).children(".dataNone").css({"margin-top":-h})
})
$("#calendar").on("mouseout",".course_day",function(){
    $(this).children(".dataNone").hide();
})

/* css样式 */
#calendar{
    width:900px;
    background:#fff;
    margin:0 auto;
}
#calendar table{
    width:100%;
    text-align: center;
    border-collapse:collapse;
}
#calendar th{
    width:14.2%;
    height:60px;
}
#calendar th:first-child,#calendar th:last-child,#calendar tr td:nth-child(7),#calendar tr td:first-child{
    color:red;
}
#calendar tbody{
    font-size: 14px;
    color: #029bff;
}
#calendar td{
    margin:10px 0 0 0;
    position: relative;
}
#calendar .free_day{
    background: url(free_boxbg.png)no-repeat center center;
    width:109px;
    height:100px;
}
#calendar .course_day{
    background: url(free_boxbg_a.png)no-repeat center center;
    width:114px;
    height:100px;
    position: relative;
    cursor:pointer;
}
#calendar .later_day{
    background: url(free_boxbg_n.png)no-repeat center center;
    width:114px;
    height:100px;
    position: relative;
    cursor:pointer;
}
.course_day em,.later_day em{
    font-style: normal;
    float: left;
    margin-left: 15px;
    color: #adadad;
    width: 93px;
    height: 17px;
    overflow: hidden;
}
.course_day span,.later_day span{
    float: left;
}
#calendar .freeData,#calendar .freeData{
    position: absolute;
    right: 13px;
    top: 25px;
}
#calendar .phaseName{
    margin-bottom: 33px;
    width: 117px;
}
#calendar .teacherNum{
    color: #fff;
    width: 102px;
    overflow: hidden;
    height: 20px;
    margin: 0px auto;
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
}
#calendar h2{
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #ebedf7;
    color: #485c5a;
    font-size: 20px;
    text-align: center;
}
#calendar h2 span{
    cursor:pointer;
}
#calendar h3{
    color:#e20800;
    font-size:17px;
    font-weight: normal;
    text-align: center;
    margin-top: 10px; 
}
#prevM{
    position: absolute;
    left:0px;
    top:0px;
    width: 60px;
    height: 60px;
    background: url(free_arrow_r.png)no-repeat center center;
    transform:rotate(180deg);
}
#nextM{
    position: absolute;
    right:0px;
    top:0px;
    width: 60px;
    height: 60px;
    background: url(free_arrow_r.png)no-repeat center center;
}
#back_date{
    background: #029bff;
    color: #ffffff;
    padding: 5px 15px;
    margin-left: 10px;
    font-size: 14px;
    font-weight: normal;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
/* 日历隐藏的div  可根据自己需求修改 */
.dataNone{
    border: 2px solid #35afff;
    background: #fff;
    border-radius: 8px;
    color: #029bff;
    min-height: 120px;
    left: -260px;
    padding: 10px 15px 10px 22px;
    position: absolute;
    text-align: left;
    top: 50%;
    width: 230px;
    z-index: 9;
    display: none;
    max-height:500px;
    overflow-y:auto;
}
#calendar .dataNone p{
    color:#5a5a5a;
    padding:5px 0 0 0px;
    width: auto;
    height:auto;
}
#calendar .dataNone div{
    border-bottom: 1px dotted #ccc;
}
#calendar .dataNone time{
    line-height: 30px;
}
.dateBtn a,.await a{
    border: 1px solid #029bff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    color: #029bff;
    display: inline-block;
    margin: 10px 0 10px 60px;
    padding:2px 10px;
}
#calendar .await a{
    border-color:#999;
    color:#999;
}
.dateBtn .unlook{
    border-color:#999;
    color:#999;
}
.dataNone i{
    background: url(free_dialog_arrowr.png) no-repeat;
    width:16px;
    height:29px;
    position: absolute;
    right:-16px;
    top:50%;
    margin-top:-15px;
}
.iconToday{
    background: url(icon_today.png)no-repeat;
    width:33px;
    height:32px;
    position:absolute;
    right: 12px;
    top: 10px;
}

/*最终展示结果*/