zoukankan      html  css  js  c++  java
  • 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 + " 类型:" + 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));

    转载http://www.cnblogs.com/liaoshiqi/p/6050074.html
  • 相关阅读:
    Docker部署nginx
    解决网页在手机端适配问题
    记一次Jenkins+Docker+gitlab自动化部署vue
    Docker部署jenkins
    备案
    Jenkins插件使用--Publish Over SSH
    打开root用户ssh登陆
    gitlab配置git
    Dokcer容器内无法域名解析
    vue开发环境搭建
  • 原文地址:https://www.cnblogs.com/wang1593840378/p/6075451.html
Copyright © 2011-2022 走看看