自定义日历样式 返回列表 默认说明 左码右览 上码下览 全屏代码 全屏预览 作者：曹え 5811 发布时间：2022-05-23 08:09:18 浏览次数：166 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <meta name="renderer" content="webkit" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <meta name="format-detection" content="telephone=no" /> <title>树+列表</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="css/cui.css" /> <style> body { padding: 10px;} .tits { overflow: hidden;} .tits div { float: left;} .ul-news-kx{overflow: hidden;padding-left:28px;} .ul-news-kx li{float: left;height:53px;margin-right:20px;line-height:53px;} .ul-news-kx .s1{float: left;margin-top:2px;margin-right:7px} .ul-news-kx li em,#idCalendar p a{width:14px;height:14px;border-radius: 50%;display:inline-block;} .ul-news-kx li span{font-size:14px;color: #607c8a;line-height:1;} .ul-news-kx .c1,#idCalendar .c1{background-color:#ffb34a;} .ul-news-kx .c2,#idCalendar .c2{background-color:#ff6765;} .ul-news-kx .c3,#idCalendar .c3{background-color:#ffe44e;} .ul-news-kx .c4,#idCalendar .c4{background-color:#00bf96;} .ul-news-kx .c5,#idCalendar .c5{background-color:#d676fb;} .ul-news-kx .c6,#idCalendar .c6{background-color:#1f8dfa;} .ul-news-kx .c7,#idCalendar .c7{background-color:#acacaf;} .ul-news-kx .c8,#idCalendar .c8{background-color:#0a276e;} #idCalendar p a{margin-left:5px;} #idCalendar .p1 a{margin-left:-4px;} .Calendar{background-color:#ffffff;margin-bottom:20px;border-radius:10px; border: 1px solid #eee;} .Calendar table{width:100%;} .Calendar thead tr{height:70px;border-bottom:1px solid #e9ebf0;} .Calendar thead td{text-align: center;font-size:19px;color:#25485c;border-right:1px solid #e9ebf0; font-weight:600;} #idCalendar td{width:14.2%;border-right:1px solid #e9ebf0; font-size:15px;color:#25485c;position: relative;} .Calendar table td em{position: absolute;top:5px;right:7px;} .Calendar table td:last-child{border-right: none;} #idCalendar tr{height:82px;border-bottom:1px solid #e9ebf0;} #idCalendar p{position: absolute;bottom:5px;right:15px;} </style> <script src="js/jquery.js"></script> <script type="text/javascript"> </script> </head> <body> <h3 class="tits"> <div id="idCalendarPre">上月</div> <div class="data-kx"><span id="idCalendarYear"></span>年 <span id="idCalendarMonth"></span>月</div> <div id="idCalendarNext">下月</div> </h3> <ul class="ul-news-kx"> <li> <div class="s1"><em class="c1"></em></div> <span>考试答辩</span> </li> <li> <div class="s1"><em class="c2"></em></div> <span>会议</span> </li> <li> <div class="s1"><em class="c3"></em></div> <span>个人日程</span> </li> <li> <div class="s1"><em class="c4"></em></div> <span>考竞赛</span> </li> <li> <div class="s1"><em class="c5"></em></div> <span>考试答辩</span> </li> <li> <div class="s1"><em class="c6"></em></div> <span>个人日程</span> </li> <li> <div class="s1"><em class="c7"></em></div> <span>OA会议安排</span> </li> <li> <div class="s1"><em class="c8"></em></div> <span>校历</span> </li> </ul> <div class="Calendar"> <table cellspacing="0"> <thead> <tr> <td>周日</td> <td>周一</td> <td>周二</td> <td>周三</td> <td>周四</td> <td>周五</td> <td>周六</td> </tr> </thead> <tbody id="idCalendar"> </tbody> </table> </div> </body> <script language="JavaScript"> var $dte = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var Calendar = Class.create(); Calendar.prototype = { initialize: function(container, options) { this.Container = $dte(container);//容器(table结构) this.Days = [];//日期对象列表 this.SetOptions(options); this.Year = this.options.Year || new Date().getFullYear(); this.Month = this.options.Month || new Date().getMonth() + 1; this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null; this.onSelectDay = this.options.onSelectDay; this.onToday = this.options.onToday; this.onFinish = this.options.onFinish; this.Draw(); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Year: 0,//显示年 Month: 0,//显示月 SelectDay: null,//选择日期 onSelectDay: function(){},//在选择日期触发 onToday: function(){},//在当天日期触发 onFinish: function(){}//日历画完后触发 }; Extend(this.options, options || {}); }, //当前月 NowMonth: function() { this.PreDraw(new Date()); }, //上一月 PreMonth: function() { this.PreDraw(new Date(this.Year, this.Month - 2, 1)); }, //下一月 NextMonth: function() { this.PreDraw(new Date(this.Year, this.Month, 1)); }, //上一年 PreYear: function() { this.PreDraw(new Date(this.Year - 1, this.Month - 1, 1)); }, //下一年 NextYear: function() { this.PreDraw(new Date(this.Year + 1, this.Month - 1, 1)); }, //根据日期画日历 PreDraw: function(date) { //再设置属性 this.Year = date.getFullYear(); this.Month = date.getMonth() + 1; //重新画日历 this.Draw(); }, //画日历 Draw: function() { //用来保存日期列表 var arr = []; //用当月第一天在一周中的日期值作为当月离第一天的天数 for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(0); } //用当月最后一天在一个月中的日期值作为当月的天数 for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); } //清空原来的日期对象列表 this.Days = []; //插入日期 var frag = document.createDocumentFragment(); while(arr.length){ //每个星期插入一个tr var row = document.createElement("tr"); //每个星期有7天 for(var i = 1; i <= 7; i++){ var cell = document.createElement("td"); cell.innerHTML = " "; if(arr.length){ var d = arr.shift(); if(d){ cell.innerHTML = "<em>" + d +"</em>"; this.Days[d] = cell; var on = new Date(this.Year, this.Month - 1, d); //判断是否今日 this.IsSame(on, new Date()) && this.onToday(cell); //判断是否选择日期 this.SelectDay && this.IsSame(on, this.SelectDay) && this.onSelectDay(cell); } } row.appendChild(cell); } frag.appendChild(row); } //先清空内容再插入(ie的table不能用innerHTML) while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); } this.Container.appendChild(frag); //附加程序 this.onFinish(); }, //判断是否同一日 IsSame: function(d1, d2) { return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate()); } } var cale = new Calendar("idCalendar", { SelectDay: new Date().setDate(10), onSelectDay: function(o){ o.className = "onSelect"; }, onToday: function(o){ o.className = "onToday"; }, onFinish: function(){ $dte("idCalendarYear").innerHTML = this.Year; var mm=this.Month; if(mm.lenth==1) mm='0'+ mm; $dte("idCalendarMonth").innerHTML = mm; aja(this.Year+''+ mm,this); } }); $dte("idCalendarPre").onclick = function(){ cale.PreMonth(); } $dte("idCalendarNext").onclick = function(){ cale.NextMonth(); } // $dte("idCalendarPreYear").onclick = function(){ cale.PreYear(); } // $dte("idCalendarNextYear").onclick = function(){ cale.NextYear(); } // $dte("idCalendarNow").onclick = function(){ cale.NowMonth(); } // aja($('#idCalendarYear').text()+''+$('#idCalendarMonth').text()); function aja(da,obj){ console.log(da,obj) //获得当日背景数据 data = [ {day:'2022-5-10',list:'1,2,3,4,5,6,7,8'}, {day:'2022-5-11',list:'1,3,4,6,7,8'}, {day:'2022-8-16',list:'1,2,3'}, {day:'2022-5-17',list:'1,2,3,5'}, {day:'2022-8-18',list:'1,2,3,5,7'} ] for(var i = 0, len =data.length ; i < len; i++){ list = '' p = '' arrlist = data[i].list.split(",") arrlist.forEach(rs => { list = list + "<a class='c"+ rs +"'></a>"; }); if(arrlist.length>5){ p = 'p1' } dates = data[i].day.split("-") console.log(dates) if(obj.Month == dates[1] && obj.Year == dates[0]){ obj.Days[dates[2]].innerHTML = obj.Days[dates[2]].innerHTML+"<p class='"+ p +"'>"+list+"</p>" } } // 可以为ajax动态获取 /* $.ajax({ type:"POST", url:'/ajax.php?cc=yue', //提交数据：202010 返回数据 0,11,25,18,31,0 data:{ da:da }, cache:false, dataType:"html", success:function(data){ var flag= new Array(); flag = data.split(","); for(var i = 1, len = flag.length - 1; i < len; i++){ cale.Days[flag[i]].innerHTML = "<a href='javascript:void(0);'>" + flag[i] + "</a>"; } } }); */ } /* 鼠标经过时候是否需要弹出当日新闻（不需要可以删除） $("td a").live('mouseover',function(e){ var xx=$(this).offset().left - 12; var yy=$(this).offset().top - 160; $("#datebox").show(); $("#datebox").css({top:yy+'px',left:xx+'px'}); das = cale.Year+"-"+cale.Month+"-"+$(this).text(); das2 = cale.Year+""+cale.Month+""+$(this).text(); $("#datebox h3").html(das); $("#datecon").html('载入中...'); $.ajax({ type:"POST", url:'/ajax.php', data:{ da:das2 }, cache:false, dataType:"html", success:function(data){ $("#datecon").html(data); } }); }); $("#datebox .pa").live("click",function(){ $("#datebox").hide(300); }); */ </script> </html> 预览[刷新] 320 360 460 768 960 1024 1280 1366 1460 1680 75% 全屏
