Jquery日历插件e-calendar升级版

Posted 齐大大齐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery日历插件e-calendar升级版相关的知识,希望对你有一定的参考价值。

jQuery事件日历插件e-calendar,支持针对指定日期自定义日程安排(无条数限制),设置过日程的日期会高亮显示,兼容IE7+主流浏览器。

原版使用方法及演示地址:e-calendar原版 (鼠标移动到天显示当天的日程安排)

 

升级版介绍:

1.同一天可存在多个事件交集
2.点击天在日历下方出现日程列表
3.点击日程列表可添加其事件 。
4.添加item-grid的显示和隐藏
5.Events中数组集合可添加id,type等元素(区分日程类型:任务类型或日程类型)

6.增加年份选择,月份选择
7.样式调整
8.将ajax加载事件,item点击事件等写在calendar配置中

运行效果图:

 

主要代码:

index.html

<!DOCTYPE html>

<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/jquery.e-calendar.css" />
    <script src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.e-calendar.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(\'#calendar\').eCalendar({
                yearRange:[\'2015\',\'2016\',\'2017\',\'2018\',\'2019\',\'2020\',\'2021\'],   //年的下拉框
                weekDays: [\'日\', \'一\', \'二\', \'三\', \'四\', \'五\', \'六\'],
                months: [\'一月\', \'二月\', \'三月\', \'四月\', \'五月\', \'六月\', \'七月\', \'八月\', \'九月\', \'十月\', \'十一月\', \'十二月\'],//月的下拉框
                // textArrows: { previous: \'<\', next: \'>\' },    //改为图片< >
                eventTitle: \'日程列表\',
                initData: function (settings, month) {
                    //日历加载的数据格式要求:
                    // settings.events = [
                    //     { id: "a1", type: "calendar", title: \'222\', description: \'日程\', datetime: new Date(2016, new Date().getMonth(), 15, 17) }
                    // ];
                    settings.events = [];
                    if (month) {
                        var sourse = [];
                        $.ajax({
                            type: "POST",
                            data: { month: month },
                            async: false,
                            url: "/Calendar/GetHomeCalendar?t=" + new Date().getMilliseconds(),
                            success: function (data) {
                                var result = JSON.parse(data);
                                for (var i = 0; i < result.length; i++) {
                                    var item = {
                                        id: result[i].Id,
                                        type: result[i].Type,
                                        title: result[i].Title,
                                        description: result[i].Description,
                                        datetime: new Date(result[i].Datetime)
                                    }
                                    sourse.push(item);
                                }
                                settings.events = sourse;
                            },
                            error: function () {}
                        });
                    }
                },
                //下面详情Item的点击事件
                clickItem: function () {
                    var id = $(this).attr("cid");
                    var type = $(this).attr("ctype");
                    alert("点击id:" + id + "\\r\\n 类型:" + type);
                }
            });
        });
    </script>
</head>

<body>
    <h1 style="text-align:center;">e-calendar</h1>
    <div id="calendar"></div>
</body>
</html>

     通过$(\'#calendar\').eCalendar()来配置日历加载

  参数

    yearRange:年下拉框范围

    months:月下拉框

    initData:数据初始化调用的函数

    clickItem:日历列表点击事件

 

jquery.e-calendar.js

/**
 * @license e-Calendar v2.0.0
 * (c) 2016- 11
 * License: CHN
 */

(function ($) {

    var dMonth = new Date().getMonth();
    var dYear = new Date().getFullYear();
    var eCalendar = function (options, object) {
        // Initializing global variables
        var adDay = new Date().getDate();
        var adMonth = new Date().getMonth();
        var adYear = new Date().getFullYear();
        var dDay = adDay;
        //var dMonth = adMonth;
        //var dYear = adYear;
        var instance = object;

        var settings = $.extend({}, $.fn.eCalendar.defaults, options);

        function lpad(value, length, pad) {
            if (typeof pad == \'undefined\') {
                pad = \'0\';
            }
            var p;
            for (var i = 0; i < length; i++) {
                p += pad;
            }
            return (p + value).slice(-length);
        }

        var mouseOver = function () {
            $(this).addClass(\'c-nav-btn-over\');
        };
        var mouseLeave = function () {
            $(this).removeClass(\'c-nav-btn-over\');
        };

        var testFunction=function(){
            alert(\'function active\');
        }

        var onItemGridClose = function () {
            $(".c-event-grid").css("display", "none");
        };

        //日历天事件
        var mouseOverEvent = function () {
            $(this).addClass(\'c-event-over\');
            var d = $(this).attr(\'data-event-day\');
            $(\'div.c-event-item[data-event-day="\' + d + \'"]\').addClass(\'c-event-over\');
        };
        var mouseClickEvent = function () {
            $(".c-event-grid").css("display", "");
            $(\'div.c-day\').removeClass(\'c-event-over\')
            $(\'div.c-event-item\').removeClass(\'c-event-over\');
            $(this).addClass(\'c-event-over\');
            var d = $(this).attr(\'data-event-day\');
            $(\'div.c-event-item[data-event-day="\' + d + \'"]\').addClass(\'c-event-over\');
        };
        var mouseLeaveEvent = function () {
        };
        var mouseClickItem = settings.clickItem;
        var mouseOverItem = function () {
            $(this).addClass(\'c-event-over-item\');
        };
        var mouseLeaveItem = function () {
            $(this).removeClass(\'c-event-over-item\')
        };
        var nextMonth = function () {
            if (dMonth < 11) {
                dMonth++;
            } else {
                dMonth = 0;
                dYear++;
            }
            init_eCalendar();

            var ajaxMonth = dYear + "-" + (dMonth - (-1));
            loadeCalendarByAjax(settings, ajaxMonth);
        };
        var previousMonth = function () {
            if (dMonth > 0) {
                dMonth--;
            } else {
                dMonth = 11;
                dYear--;
            }
            init_eCalendar();
            var ajaxMonth = dYear + "-" + (dMonth - (-1));
            loadeCalendarByAjax(settings, ajaxMonth);
        };
         var selectYear=function(){
            dYear=$("#selYears").val();
            init_eCalendar();
            var ajaxMonth = dYear + "-" + (dMonth - (-1));
            loadeCalendarByAjax(settings, ajaxMonth);
        }
        var selectMonth=function(){
            dMonth=$("#selMonths").val();

             init_eCalendar();
            var ajaxMonth = dYear + "-" + (dMonth - (-1));
            loadeCalendarByAjax(settings, ajaxMonth);
        }
        function loadEvents() {
            if (typeof settings.initData != \'undefined\' && settings.initData) {
                var ajaxMonth = dYear + "-" + (dMonth - (-1));
                loadeCalendarByAjax(settings, ajaxMonth);//调前台的方法请求
            }
        }

        //初始化加载事件
        function loadeCalendarByAjax(settings, ajaxMonth) {
            if (typeof settings.initData != \'undefined\') {
                settings.initData(settings, ajaxMonth);
            }
        }

        function init_eCalendar() {
            loadEvents();
            var dWeekDayOfMonthStart = new Date(dYear, dMonth, 1).getDay();
            var dLastDayOfMonth = new Date(dYear, dMonth + 1, 0).getDate();
            var dLastDayOfPreviousMonth = new Date(dYear, dMonth + 1, 0).getDate() - dWeekDayOfMonthStart + 1;

            var cBody = $(\'<div/>\').addClass(\'c-grid\');
            var cEvents = $(\'<div/>\').addClass(\'c-event-grid\');

            cEvents.css("display", "none"); //默认隐藏

            var cEventsBody = $(\'<div/>\').addClass(\'c-event-body\');
            cEvents.append($(\'<div/>\').addClass(\'c_title_sj\').html(settings.eventTitle));  //标题
            //关闭按钮
            var itemClose = $(\'<div/>\').on(\'click\', onItemGridClose).attr("href", "javascipt:void(0)");
            var itemClose_a = $(\'<a/>\').on(\'click\', onItemGridClose).attr("href", "javascipt:void(0)")
                            .html(\'<img src="img/calendar_delete_icon.png">\');
            itemClose.addClass(\'c-close-top\').html(itemClose_a);

            //itemClose.attr(\'onclick\', "onItemGridClose()");
            cEvents.append(itemClose);

            cEvents.append(cEventsBody);    //主体
            var cTitle = $(\'<div/>\').addClass(\'top_calendar_div\');

            var cYear=$(\'<div/>\').addClass(\'c_years\');
            var cMonth = $(\'<div/>\').addClass(\'c_months\');
             var cPage= $(\'<div/>\').addClass(\'c_pages\');

            //年份选择事件,初始化
            var year_sel=document.createElement("select");    
            year_sel.setAttribute("id","selYears");
            //year_sel.options.add(new Option("2016","2016"));
            var yearRanges=settings.yearRange||new Array().push(dYear); //年份的区间,无值时默认当前年份
            for(var i=0;i<yearRanges.length;i++){
                year_sel.options.add(new Option(yearRanges[i],yearRanges[i]));
            }
           
            year_sel.onchange=function(){
                selectYear();
            }
            for(var i=0; i<year_sel.options.length; i++){  
                if(year_sel.options[i].innerHTML == dYear){  
                    year_sel.options[i].selected = true;  
                    break;  
                }  
            } 
            //end

            //月份选择事件,初始化
            var month_sel=document.createElement("select");    
            month_sel.setAttribute("id","selMonths");

             var monthRanges=settings.months||[]; //月份
            for(var i=0;i<monthRanges.length;i++){
                month_sel.options.add(new Option(monthRanges[i],i));
            }
            month_sel.onchange=function(){
                selectMonth();
            }
             for(var i=0; i<month_sel.options.length; i++){  
                if(month_sel.options[i].innerHTML ==monthRanges[dMonth]){  
                    month_sel.options[i].selected = true;  
                    break;  
                }  
            } 
            //end

             var cPrevious=$(\'<a/>\').on(\'click\', previousMonth).attr("href","javascipt:void(0)")
                            .html(\'<img src="img/page_left.png">\');
             var cNext=$(\'<a/>\').on(\'click\', nextMonth).attr("href","javascipt:void(0)")
                            .html(\'<img src="img/page_right.png">\');
              
            //cMonth.html(settings.months[dMonth] + \' \' + dYear);
            cYear.html(year_sel);
            cMonth.html(month_sel);
            cPage.append(cPrevious);
            cPage.append(cNext);

            cTitle.append(cYear);
            cTitle.append(cMonth);
            cTitle.append(cPage);
            cBody.append(cTitle);
            
            for (var i = 0; i < settings.weekDays.length; i++) {
                var cWeekDay = $(\'<div/>\').addClass(\'c-week-day c-pad-top\');
                cWeekDay.html(settings.weekDays[i]);
                cBody.append(cWeekDay);
            }
            var day = 1;
            var dayOfNextMonth = 1;
            for (var i = 0; i < 42; i++) {
                var cDay = $(\'<div/>\');
                if (i < dWeekDayOfMonthStart) {
                    cDay.addClass(\'c-day-previous-month c-pad-top\');
                    cDay.html(dLastDayOfPreviousMonth++);
                } else if (day <= dLastDayOfMonth) {
                    cDay.addClass(\'c-day c-pad-top\');
                    if (day == dDay && adMonth == dMonth && adYear == dYear) {
                        cDay.addClass(\'c-today\');
                    }
                    for (var j = 0; j < settings.events.length; j++) {
                        var d = settings.events[j].datetime;
                        if (d.getDate() == day && d.getMonth() == dMonth && d.getFullYear() == dYear) {
                            cDay.addClass(\'c-event\').attr(\'data-event-day\', d.getDate());
                            cDay.on(\'click\', mouseClickEvent).on(\'mouseleave\', mouseLeaveEvent);
                        }
                    }
                    cDay.html(day++);
                } else {
                    cDay.addClass(\'c-day-next-month c-pad-top\');
                    cDay.html(dayOfNextMonth++);
                }
                cBody.append(cDay);
            }
            var eventList = $(\'<div/>\').addClass(\'c-event-list\');
            for (var i = 0; i < settings.events.length; i++) {
                var d = settings.events[i].datetime;
                if (d.getMonth() == dMonth && d.getFullYear() == dYear) {
                    var date = lpad(d.getDate(), 2) + \'/\' + lpad(d.getMonth() + 1, 2) + \' \' + lpad(d.getHours(), 2) + \':\' + lpad(d.getMinutes(), 2);

                    //cid赋给div,查看日程是传递;ctype:任务或日程
                    var item = $(\'<div/>\').addClass(\'c-event-item\').attr("cid", settings.events[i].id).attr("ctype", settings.events[i].type);
                    item.attr("title", settings.events[i].description); //鼠标移动显示提示文字
                    //var title = $(\'<div/>\').addClass(\'title\').html(date + \'  \' + settings.events[i].title + \'<br/>\');
                    var title = $(\'<div/>\').addClass(\'title\').html(settings.events[i].title + \'<br/>\');
                    var description = $(\'<div/>\').addClass(\'description\').html(settings.events[i].description + \'<br/>\');
                    item.attr(\'data-event-day\', d.getDate());
                    item.on(\'mouseover\', mouseOverItem).on(\'mouseleave\', mouseLeaveItem);
                    item.append(title).append(description);

                    //c-event-item的点击事件
                    item.on(\'click\', mouseClickItem);

                    eventList.append(item);
                }
            }
            $(instance).addClass(\'calendar\');
            cEventsBody.append(eventList);
            $(instance).html(cBody).append(cEvents);
        }

        return init_eCalendar();
    }

    $.fn.eCalendar = function (oInit) {
        return this.each(function () {
            return eCalendar(oInit, $(this));
        });
    };

    // plugin defaults
    $.fn.eCalendar.defaults = {
        weekDays: [\'Dom\', \'Seg\', \'Ter\', \'Qua\', \'Qui\', \'Sex\', \'Sab\'],
        months: [\'Janeiro\', \'Fevereiro\', \'Março\', \'Abril\', \'Maio\', \'Junho\', \'Julho\', \'Agosto\', \'Setembro\', \'Outubro\', \'Novembro\', \'Dezembro\'],
        textArrows: { previous: \'<\', next: \'>\' },
        eventTitle: \'Eventos\',
        url: \'\',
        events: [

        ]
    };
}(jQuery));

 

下载地址:齐大大.eCalendar-v2

 

以上是关于Jquery日历插件e-calendar升级版的主要内容,如果未能解决你的问题,请参考以下文章

jquery 日历插件如何安装

jquery日历插件有没有可以标记某一天的,推荐一下

jquery日历控件

基于jQuery的日历插件

每天学一个jquery插件-日历的效果

jquery 日历控件在php中怎么使用