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

最新推荐文章于 2024-03-17 00:10:12 发布
最新推荐文章于 2024-03-17 00:10:12 发布
阅读量1.9k 收藏 5
点赞数 1
分类专栏： jquery插件 文章标签： jquery javascript 前端 日历插件 日程插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41756580/article/details/125069368
版权

效果图：

 使用：

<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;
}

专业前端小白
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
double-date双日历选择插件jQuery代码.zip
09-23
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
jQueryUI中Datepicker(日历)插件的介绍和使用（10级学员 郞志课堂笔记）
热门推荐
redarmychen的专栏
03-27 2万+
jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性： 属性 数据类型 默认值 说明 altField String "" 使用备用的输出字段，即将选择的日期 以另一种格式，输出到另一个控件中， 值为选择符，即要输出的控件 alt
jQuery日历插件FullCalendar使用方法
SuperCookies的博客
05-28 3005
jQuery日历插件FullCalendar使用方法 FullCalendar 是一个jQuery插件，它提供一个全尺寸，像事例中的拖拽日历。它使用 AJAX 来为每个月提取事件并轻松地配置为使用您自己资料的格式 （扩展名为谷歌日历提供）。它是以可视方式自定义并公开为用户触发事件 （如单击或拖动事件） html代码片段 &amp;lt;head&amp;gt; &amp;lt;meta char...
jQuery UI -- 日历选择器，高端web前端开发
最新发布
03-17 994
2、关于JS的部分，将我们引入的js和。的大小是223KB，而和的大小一起是84KB。jQuery UI为了让日期选择器与我们的网站整体格调相似，我们先来看一下 datepicker() 样式的修改。核心手段就是定位要修改部位的class，然后在自己的css中修改样式即可覆盖。下面列举几个例子:更改jQuery UI主题的对话框header的背景按钮正常状态的背景日历UI的今天单元格样式color:#f60;日历UI的选定单元格样式color:#06f;
自定义jquery ui日历
黑天的猩猩
07-19 1293
自定义的jquery ui组件开发的日历控件，和系统配置支持变更语言，变更时间格式，切换时区 $(function() { jQuery.widget("xway.Calendar", { _div : null, hide : function() { jQuery(document).off("mouseup"); this._div.fadeOut();
jQuery插件之——简单日历
weixin_30687587的博客
10-25 179
最近在研究js插件的开发，以前看大神们，对插件都是信手拈来，随便玩弄，感觉自己要是达到那种水平就好了，就开始自己研究插件开发了。研究了一段时间之后，就开始写了自己的第一个日历插件，由于是初学插件开发，代码的可读性可能有点差，希望各位大神可以多提点意见，以后维护代码，让这个插件更加的完整。下面就贴出代码。 首先，给插件来个整体的div容器 <div class="y-total"&gt...
jQuery实现移动端手机选择日期日历插件
小天空的博客
09-05 3616
2、new Date(2022,0,1)　　: 可以把"2022-01-01"分割成年 月 日。1、new Date("2022/01/01") ：这种写法在safari、chrome上都支持。new Date("2022-01-01")在。项目需要引入jquery框架。和苹果版微信上面竟然不支持，项目开发中遇到的问题。
25个有用的jQuery日历和日期选取插件
huidaoli
02-14 1399
jQuery被认为是最好的JavaScript库，因为它简单易用、灵活，并有大量的插件。本文介绍25个非常不错的jQuery日历和日期选取插件，希望对各位有用。 1. Simple JQuery Date Picker 2. Jquery Week Calendar 3. FullCalendar 4. jCalendar 5. iCal-like calendar 6. wdCa...
精挑细选的10个jQuery日历插件
BTfan123的专栏
03-06 7013
在本文中，小编为大家整理了10个非常有用的jQuery日历插件，为你的网站添加非常t适用的日历功能。 CLNDR.js CLNDR.js是一个可创建日历的jQuery插件，支持自定义。该插件不会生成任何标记，而是使用Underscore.js HTML模板填充数据。 jQuery Verbose Calendar jQuery Verbose Calendar日历插件可同时展示一年的月
jquery日历控件
哦嘛咪嘛咪哄~~~
07-21 234
Jquery日历控件合集 FullCalendar FullCalendar是很出名的jQuery日历插件，它支持拖拽等功能，整合了Google Calendar，而且可以通过JSON来绑定事件，设计师可以轻松地自定义日历样式，工程师则利用它提供的接口来处理用户触发事件。 2. Astonishing iCal-like Calendar 这里是一篇教程，教你如何利用j...
jQuery日期日历选择器插件自定义多种日期选择
02-28
jQuery日期日历选择器插件自定义多种日期选择. 演示地址：http://www.xwcms.net/js/rqsj/16789.html
为开发者准备的10款最好的jQuery日历插件
01-19
这篇文章介绍的是 10 款最棒而且又很有用的 jQuery 日历插件，允许开发者们把这些漂亮的日历插件结合到自己的网站中。这些日历插件易用性都很强，轻轻松松的就可以把漂亮的日历插件装饰到你的网站了。希望下面的插件...
基于jquery日历价格、库存等设置插件
10-19
主要介绍了基于jquery日历价格、库存等设置插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery日历插件RendezVous.js特效代码
03-20
jQuery日历插件RendezVous.js，能自由选择月份，年份，能自定义日期控件语言，能自定义日期输出格式，支持全屏弹出日期选择器。
Calendar-price-jquery日历价格插件
06-30
基于Jquery的日历价格、库存等设置插件，也可以作为前台显示日期、价格用。需要设置的参数(字段)需自定义，详见(demo)使用方法
jquery弹出层遮罩层点击事件，点击遮罩隐藏弹框
qq_41756580的博客
03-08 3098
html: &lt;div class="submit_page"&gt; &lt;div class="submit_box"&gt; &lt;div class="submit_title"&gt; &lt;span id="title"&gt;&lt;i class="glyphicon glyphicon-envelope&
使用swiper+jquery制作移动端日期选择器插件
qq_41756580的博客
02-26 1228
自己编写一个jquery工具，因为项目需要，编写了这么一个可以选择某天，某月，某年的移动端日期选择控件： 直接上代码html: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device
纯js实现loading覆盖层
qq_41756580的博客
09-27 889
纯js实现loading覆盖层，可在任意div内添加覆盖层，调用很方便
jQuery如何实现日历自定义日期不可选
03-28
要实现日历自定义日期不可选，可以使用jQuery的datepicker插件。以下是实现步骤： 1. 在HTML中添加一个input元素，用于显示日期选择器。 ``` ``` 2. 在JavaScript代码中初始化datepicker插件，并设置不可选日期...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

专业前端小白

写了这么久文章，1分钱都没收到

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值