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

     

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

  • 相关阅读:
    入门菜鸟
    FZU 1202
    XMU 1246
    Codeforces 294E Shaass the Great 树形dp
    Codeforces 773D Perishable Roads 最短路 (看题解)
    Codeforces 814E An unavoidable detour for home dp
    Codeforces 567E President and Roads 最短路 + tarjan求桥
    Codeforces 567F Mausoleum dp
    Codeforces 908G New Year and Original Order 数位dp
    Codeforces 813D Two Melodies dp
  • 原文地址:https://www.cnblogs.com/liaoshiqi/p/6050074.html
Copyright © 2011-2022 走看看