美文网首页
周历FlexoCalendar应用

周历FlexoCalendar应用

作者: 岁月神偷___ | 来源:发表于2019-12-25 15:06 被阅读0次

    1.首先引入jquery和FlexoCalendar.js,和FlexoCalendar.css

    <link href="/css/FlexoCalendar.css" type="text/css" rel="stylesheet">
    
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/js/FlexoCalendar.js"></script>
    

    2.初始化周历

     $("#calendar-weekly").flexoCalendar({type: 'weekly', today: false, allowDate: ["2019-12","2020-02"]});
    

    以上是初始化周历,taype是指定日历、周历或月历,allowDate是允许选择的日期范围;
    具体介绍请参考文档
    说明一下,这里的allowDate文档上说的不是很容易懂。

    文档截图
    最后一句话不是很容易懂,这里我举个栗子,假设我们需求是要求可选时间范围是2019年12月到2020年2月份;那我们应该传入
     $("#calendar-weekly").flexoCalendar({type: 'weekly', today: false, allowDate: ["2019-11","2020-03"]});
    //以我的理解是allowDate数组的第一项到第二项之间的月份是可选的,并且不包括这两个月份(即开区间);
    

    3.原js中有个小bug,这里我已经修复

    具体问题可以参考bug原因及修复

    4.原项目中显示本月第几周,我改成了显示为本年度第几周。

    原来如下图示:


    image.png

    现在改为下图所示:

    image.png

    同是去掉了所在月份,修改的代码中已经注释掉了,如果这里需要改回来显示月份的话,只需取消注释然后注释掉下一行即可。

    5.下面直接上代码

    /*FlexoCalendar.css*/
    @charset "utf-8";
    blockquote,body,button,caption,dd,div,dl,dt,fieldset,figure,form,h1,h2,h3,h4,h5,h6,html,input,legend,li,menu,ol,p,pre,.flexoCalendar,td,textarea,th,ul{margin:0;padding:0}
    *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;font-family:'微软雅黑',"Microsoft YaHei",'宋体',Arial,Microsoft YaHei,Helvetica,sans-serif;}
    .calendar-wrapper{position: relative;margin-bottom: 20px;width: 230px;margin:15px auto;background: #fff;min-height:155px;}
    .calendar-wrapper .flexoCalendar{margin:0 auto;border-collapse:separate;width: 100%;position: relative;z-index: 1}
    .flexoCalendar td,.flexoCalendar th{border:0 none;height:27px;text-align:center;width:32px;font-size:12px;cursor:pointer}
    .flexoCalendar tr th .icon-arrow-left{display:inline-block;height:16px;line-height:16px;margin-top:4px;vertical-align:text-top;width:12px;cursor:pointer}
    .flexoCalendar tr th .icon-arrow-right{display:inline-block;height:16px;line-height:16px;margin-top:4px;vertical-align:text-top;width:12px;cursor:pointer}
    .icon-arrow-left:before{content: '<';font-style: normal;}
    .icon-arrow-right:before{content: '>';font-style: normal;}
    .flexoCalendar thead tr{height:25px;color: #fff;}
    .flexoCalendar thead tr:first-child th{cursor:pointer}
    .flexoCalendar thead tr:first-child th:hover{background:#3dbaf0}
    .flexoCalendar tr td.other-month{color:#aaa}
    .flexoCalendar thead,.flexoCalendar th{background-color: #3dbaf0;font-weight: normal;color: #fff;}
    .flexoCalendar tr th.current-year{width: 60%;}
    .flexoCalendar td.selected-day span{color:  #3dbaf0;}
    .flexoCalendar tr td .day{display: block;width: 30px;height: 25px;line-height: 22px;text-align: center;margin:1px;border:1px solid transparent;}
    .flexoCalendar tr td.current-day>div,.flexoCalendar td.current-day>span{border:1px solid #3dbaf0!important;border-radius: 4px;color:#3dbaf0;background: #fff;}
    .flexoCalendar tr td.selected>div,.flexoCalendar tr td.selected>span,.flexoCalendar tr td.selected>div span{border:1px solid #3dbaf0;border-radius: 4px;background-color:#3dbaf0;color: #fff!important}
    #calendar-weekly .calendar-hd,#calendar-monthly .calendar-hd,#calendar-weekly tbody td{height: 30px;}
    #calendar-weekly tr td div{margin-bottom: 2px;}
    #calendar-weekly tr td .week{width: 100%;height: 100%;line-height: 30px;color:#565656;text-align: center;}
    #calendar-weekly tr td .process{color:#999;margin-left: 20px;display: inline-block;width: 57px;text-align: left;}
    #calendar-monthly td.tmonth .month{display: block;width: 55px;height: 30px;line-height:30px;margin:1px;text-align: center;border-radius: 4px;color: #565656;border:1px solid transparent;}
    #calendar-monthly td.current-month .month{border:1px solid #3dbaf0;}
    #calendar-weekly tr td.week1 div,.tmonth.month1 span,.tmonth.month2 span,.tmonth.month3 span,.tmonth.month4 span{margin-top: 10px!important;}
    
    
    /*
    //FlexoCalendar.js
    AUTHOR : ELEANOR MAO
    EMAIL : danningmao@outlook.com
    2016-02-5
    */
    +(function ($) {
        'use strict';
    
        //↓可选参数
        var CALENDAR_OPTION = {
            type: 'normal',//'normal','weekly','monthly'
            id: '',//日历的id
            className: '',//日历的样式
            dayNames: ['日', '一', '二', '三', '四', '五', '六'],//周名
            numbers: ['一', '二', '三', '四', '五', '六'],//数字标示
            today: true,//是否标志今天
            select: true,//是否单击选中
            multi: false,//是否单击可多选
            disOtherMonth: false,//其他月日期是否可选
            setMonth: null,//设定月
            setYear: null,//设定年
            selectDate: null, //format 'yyyy-mm-dd' or 'yyyy-mm-weekn' every element can be set to 'each';
            allowDate: null, //format [yyyy-mm-dd,yyyy-mm-dd]
            prev: 'icon-arrow-left',//向前的按钮
            next: 'icon-arrow-right',//向后的按钮
            onselect: function () {
            },//当选中的回调函数
            ongoprev: function () {
            },//当往前翻的回调函数
            ongonext: function () {
            } //当往后翻的回调函数
        }
    
        var Calendar = function (element, options) {
            this.el = $(element);
            this.opt = null;
            this.date = null;
            this.type = null;
            this.calendar = '';
    
            this.init(element, options);
        }
    
        Calendar.prototype.init = function (element, options) {
            this.date = this.getDate();
            var options = this.opt = this.getOptions(options, this.date);
            this.type = options.type;
            options.target = $(element);
            this.calendar = '<table class="flexoCalendar ' + options.className + '"  id="' + options.id + '" cellspacing="0">';
            this.calendar += this.bulidCH(options);
            if (this.type == 'normal') {
                this.calendar += this.bulidWeekBar(options);
                this.calendar += '</thead>';
                this.calendar += '<tbody>';
                this.calendar += this.bulidFull(options);
            } else if (this.type == 'weekly') {
                this.calendar += '</thead><tbody>';
                this.calendar += this.bulidWeekly(options);
            } else if (this.type == 'monthly') {
                this.calendar += '</thead><tbody>';
                this.calendar += this.bulidMonthly(options);
            }
            this.calendar += '</tbody></table>';
            $(element).append(this.calendar).trigger('click');
    
            $(element).on('click', ".prev, .next", options, function () {
                var month = $(this).data('month').split('-')[1];
                var year = $(this).data('month').split('-')[0];
                var allowDate = options.allowDate;
                var calendar = '';
                if ($.isArray(allowDate) && ((year == allowDate[0].split('-')[0] && month == allowDate[0].split('-')[1]) || (year == allowDate[1].split('-')[0] && month == allowDate[1].split('-')[1]))) return;
                if (options.type == 'normal') {
                    calendar = Calendar.prototype.bulidFull(options, year, month);
                } else if (options.type == 'monthly') {
                    calendar = Calendar.prototype.bulidMonthly(options, year, month);
                } else if (options.type == 'weekly') {
                    calendar = Calendar.prototype.bulidWeekly(options, year, month);
                }
                $(options.target).find('table.flexoCalendar tbody').empty().append(calendar).trigger('el.create');
                Calendar.prototype.changeCH(this, options);
    
                if (this.className == 'prev' && options.ongoprev) {
                    options.ongoprev.call(options.target, $(this).next('.current-year').data('year'), $(this).data('month'));
                }
                if (this.className == 'next' && options.ongonext) {
                    options.ongonext.call(options.target, $(this).next('.current-year').data('year'), $(this).data('month'));
                }
    
            })
    
            if (options.select) {
                $(element).on('click', 'table>tbody>tr>td', options, function () {
                    if (!options.multi) {
                        $(this).parents("tbody").find("td.selected").removeClass('selected');
                    }
    
                    if (options.disOtherMonth) {
                        if (this.className.split(' ')[0] != 'other-month') {
                            $(this).addClass('selected');
                        }
                        ;
                    } else {
                        $(this).addClass('selected');
                    }
    
                    if (options.onselect) {
                        options.onselect.call(options.target, $(this).data('time'));
                    }
                })
            }
    
        }
    
        Calendar.prototype.bulidCH = function (options) {
            var calendar = '';
            var year = options.setYear;
            var month = options.setMonth;
            var prevdate = this.getPrev(year, month, this.type);
            var nextdate = this.getNext(year, month, this.type);
            var prev = options.prev;
            var next = options.next;
            if (this.type == 'normal') {
                calendar += '<thead><tr class="calendar-hd"><th class="prev" data-month="' + prevdate + '"><i class="' + prev + '"></i></th><th class="current-year" data-year="' + year + '-' + this.dispose(month) + '" colspan="5">' + year + '年' + this.dispose(month) + '月</th><th class="next" data-month="' + nextdate + '"><i class="' + next + '"></i></th></tr>';
            } else if (this.type == 'weekly') {
                var prevMonth = prevdate.split('-')[1];
                var prevYear = prevdate.split('-')[0];
                var nextMonth = nextdate.split('-')[1];
                var nextYear = nextdate.split('-')[0];
                var prevWeek = this.forWeek(prevYear, prevMonth);
                var nextWeek = this.forWeek(nextYear, nextMonth);
                //calendar +='<thead><tr class="calendar-hd"><th class="prev" data-month="'+prevdate+'" data-week="'+prevWeek+'"><i class="'+prev+'"></i></th><th class="current-year" data-year="'+year+'-'+this.dispose(month)+'" colspan="5">'+year+'年'+this.dispose(month)+'月</th><th class="next" data-month="'+nextdate+'" data-week="'+nextWeek+'"><i class="'+next+'"></i></th></tr></thead>';
                calendar += '<thead><tr class="calendar-hd"><th class="prev" data-month="' + prevdate + '" data-week="' + prevWeek + '"><i class="' + prev + '"></i></th><th class="current-year" data-year="' + year + '-' + this.dispose(month) + '" colspan="5">' + year + '年</th><th class="next" data-month="' + nextdate + '" data-week="' + nextWeek + '"><i class="' + next + '"></i></th></tr></thead>';
            } else if (this.type == 'monthly') {
                calendar += '<thead><tr class="calendar-hd"><th class="prev" data-month="' + prevdate + '" colspan="2"><i class="' + prev + '"></i></th><th class="current-year" data-year="' + year + '-' + this.dispose(month) + '" colspan="4">' + year + '年</th><th class="next" data-month="' + nextdate + '" colspan="2"><i class="' + next + '"></i></th></tr></thead>';
            }
    
            return calendar;
        }
    
        Calendar.prototype.changeCH = function (element, options) {
            var month = $(element).data('month').split('-')[1];
            var year = $(element).data('month').split('-')[0];
            month = parseInt(month);
            year = parseInt(year);
            var type = options.type;
            var prevdate = this.getPrev(year, month, type);
            var nextdate = this.getNext(year, month, type);
            var crtdate = year + '-' + this.dispose(month);
            var header = $(options.target).find(".current-year");
            if (type == 'weekly') {
                var prevMonth = prevdate.split('-')[1];
                var prevYear = prevdate.split('-')[0];
                var nextMonth = nextdate.split('-')[1];
                var nextYear = nextdate.split('-')[0];
                var prevWeek = this.forWeek(prevYear, prevMonth);
                var nextWeek = this.forWeek(nextYear, nextMonth);
                $(options.target).find(".prev").data('month', prevdate).attr('data-month', prevdate).data('week', prevWeek).attr('data-week', prevWeek);
                $(options.target).find(".next").data('month', nextdate).attr('data-month', nextdate).data('week', nextWeek).attr('data-week', nextWeek);
            } else {
                $(options.target).find(".prev").data('month', prevdate).attr('data-month', prevdate);
                $(options.target).find(".next").data('month', nextdate).attr('data-month', nextdate);
            }
    
            $(options.target).find(".current-year").data('year', crtdate).attr('data-year', crtdate);
    
           //如需在周历中显示月份,去掉|| type == 'weekly'即可
            if (type == 'monthly' || type == 'weekly') {
                header.text(year + '年');
            } else {
                header.text(year + '年' + this.dispose(month) + '月');
            }
        }
    
        Calendar.prototype.bulidWeekBar = function (options) {
            var calendar = '<tr class="weekday">';
            for (var i = 0; i < 7; i++) {
                calendar += '<th data-day=day' + i + '>' + options.dayNames[i] + '</th>';
            }
            calendar += '</tr></thead>';
            return calendar;
        }
    
        Calendar.prototype.bulidFull = function (options, year, month) {
            var calendar = '';
            var month = month ? parseInt(month) : parseInt(options.setMonth);
            var year = year ? parseInt(year) : parseInt(options.setYear);
            var prevdate = this.getPrev(year, month, 'normal');
            var nextdate = this.getNext(year, month, 'normal');
            var monthLen = eli.getMonthLen(year, month);
            var prevMonthLen = eli.getMonthLen(prevdate.split('-')[0], prevdate.split('-')[1]);
            var firDay = new Date(year, month - 1, 1).getDay();
            var selectDate = options.selectDate;
            selectDate = typeof selectDate == 'string' ? selectDate.indexOf('-') != -1 ? selectDate.split('-') : null : null;
            if (selectDate) {
                selectDate[0] = selectDate[0] == 'each' ? year : parseInt(selectDate[0]);
                selectDate[1] = selectDate[1] == 'each' ? month : parseInt(selectDate[1]);
                selectDate[2] = selectDate[2] == 'each' ? 1 : parseInt(selectDate[2]);
            }
            for (var j = 0; j < 42; j++) {
                if (j % 7 == 0 && j != 41) {
                    if (j != 0) {
                        calendar += "</tr><tr>";
                    } else {
                        calendar += "<tr>";
                    }
                }
                //当前月
                if (j >= firDay && (j < (firDay + monthLen))) {
                    if (options.today) {
                        if (j == parseInt(options.crtdate) + firDay - 1 && options.realyear == year && parseInt(options.realmonth) == month) {
                            if (selectDate && selectDate[0] == year && selectDate[1] == month && selectDate[2] == parseInt(options.crtdate)) {
                                calendar += '<td class="current-month current-day selected-day tdday day' + (j % 7) + '" data-time="' + year + '-' + this.dispose(month) + '-' + this.dispose((j - firDay + 1)) + '"><span class="day">' + (j - firDay + 1) + '</span></td>';
                            } else {
                                calendar += '<td class="current-month current-day tdday day' + (j % 7) + '" data-time="' + year + '-' + this.dispose(month) + '-' + this.dispose((j - firDay + 1)) + '"><span class="day">' + (j - firDay + 1) + '</span></td>';
                            }
                        } else {
                            if (selectDate && selectDate[0] == year && selectDate[1] == month && selectDate[2] == (j - firDay + 1)) {
                                calendar += '<td class="current-month selected-day tdday day' + (j % 7) + '" data-time="' + year + '-' + this.dispose(month) + '-' + this.dispose((j - firDay + 1)) + '"><span class="day">' + (j - firDay + 1) + '</span></td>';
                            } else {
                                calendar += '<td class="current-month tdday day' + (j % 7) + '" data-time="' + year + '-' + this.dispose(month) + '-' + this.dispose((j - firDay + 1)) + '"><span class="day">' + (j - firDay + 1) + '</span></td>';
                            }
                        }
                    } else {
                        if (selectDate && selectDate[0] == year && selectDate[1] == month && selectDate[2] == (j - firDay + 1)) {
                            calendar += '<td class="current-month selected-day tdday day' + (j % 7) + '" data-time="' + year + '-' + this.dispose(month) + '-' + this.dispose((j - firDay + 1)) + '"><span class="day">' + (j - firDay + 1) + '</span></td>';
                        } else {
                            calendar += '<td class="current-month tdday day' + (j % 7) + '" data-time="' + year + '-' + this.dispose(month) + '-' + this.dispose((j - firDay + 1)) + '"><span class="day">' + (j - firDay + 1) + '</span></td>';
                        }
                    }
                }
                //上个月
                else if (j < firDay) {
                    if (selectDate && (selectDate[0] + '-' + selectDate[1]) == prevdate && selectDate[2] == (prevMonthLen - (firDay - j - 1))) {
                        calendar += '<td class="other-month selected-day prev-month day' + (j % 7) + '" data-time="' + prevdate + '-' + this.dispose((prevMonthLen - (firDay - j - 1))) + '"><span class="day">' + (prevMonthLen - (firDay - j - 1)) + '</span></td>';
                    } else {
                        calendar += '<td class="other-month prev-month day' + (j % 7) + '" data-time="' + prevdate + '-' + this.dispose((prevMonthLen - (firDay - j - 1))) + '"><span class="day">' + (prevMonthLen - (firDay - j - 1)) + '</span></td>';
                    }
                }
                //下个月
                else if (j >= (firDay + monthLen)) {
                    if (selectDate && (selectDate[0] + '-' + selectDate[1]) == nextdate && selectDate[2] == (j - monthLen - firDay + 1)) {
                        calendar += '<td class="other-month selected-day next-month day' + (j % 7) + '" data-time="' + nextdate + '-' + this.dispose((j - monthLen - firDay + 1)) + '"><span class="day">' + (j - monthLen - firDay + 1) + '</span></td>';
                    } else {
                        calendar += '<td class="other-month next-month day' + (j % 7) + '" data-time="' + nextdate + '-' + this.dispose((j - monthLen - firDay + 1)) + '"><span class="day">' + (j - monthLen - firDay + 1) + '</span></td>';
                    }
                }
    
    
            }
            calendar += '</tr>';
            return calendar;
        }
    
        Calendar.prototype.bulidWeekly = function (options, year, month) {
            var calendar = '';
            var numbers = options.numbers;
            var month = month ? parseInt(month) : parseInt(options.setMonth);
            var year = year ? parseInt(year) : parseInt(options.setYear);
            var prevdate = this.getPrev(year, month, 'weekly');
            var nextdate = this.getNext(year, month, 'weekly');
            var monthLen = eli.getMonthLen(year, month);
            var prevMonth = prevdate.split('-')[1];
            var nextMonth = nextdate.split('-')[1];
            var prevMonthLen = eli.getMonthLen(prevdate.split('-')[0], prevMonth);
            var firDay = new Date(year, month - 1, 1).getDay();
            firDay = firDay == 0 ? 7 : firDay;
            var startDay = firDay != 1 ? prevMonthLen - firDay + 2 : 1;
            var startMonth = startDay != 1 ? prevMonth : month;
            var endDay = parseInt(startDay) + 6 > parseInt(prevMonthLen) ? parseInt(startDay) + 6 - parseInt(prevMonthLen) : parseInt(startDay) + 6;
            var startYear = startMonth > month ? year - 1 : year;
            var endYear = startMonth == 12 ? startYear + 1 : startYear;
            var selectDate = options.selectDate;
            selectDate = typeof selectDate == 'string' ? selectDate.indexOf('-') != -1 ? selectDate.split('-') : null : null;
            if (selectDate) {
                selectDate[0] = selectDate[0] == 'each' ? year : parseInt(selectDate[0]);
                selectDate[1] = selectDate[1] == 'each' ? month : parseInt(selectDate[1]);
                selectDate[2] = selectDate[2] == 'each' ? 'week1' : selectDate[2].indexOf('week') != -1 ? selectDate[2] : parseInt(selectDate[2]);
                if (typeof selectDate[2] == 'number') {
                    selectDate[2] = eli.getMonthWeek(selectDate[0], selectDate[1], selectDate[2])
                }
            }
            var crt;
            for (var j = 0; j < 5; j++) {
                if (j != 0 && parseInt(startDay) >= parseInt(endDay)) {
                    if (selectDate) {
                        crt = 'week' + (j + 1);
                        if (($.isArray(selectDate[2]) && (year == selectDate[2][0][0] && month == selectDate[2][0][1] && selectDate[2][0][2] == crt)) || (year == selectDate[0] && month == selectDate[1] && selectDate[2] == crt)) {
                            calendar += '<tr><td class="selected-week tweek week' + (j + 1) + '" data-time="' + startYear + '-' + this.dispose(startMonth) + '-' + this.dispose(startDay) + ',' + endYear + '-' + this.dispose(month) + '-' + this.dispose(endDay) + '" colspan="7"><div><span class="week">第' + this.getYearWeek(startYear, this.dispose(startMonth), this.dispose(startDay)) + '周</span><span class="process">' + this.dispose(startMonth) + '/' + this.dispose(startDay) + '~' + this.dispose(nextMonth) + '/' + this.dispose(endDay) + '</span></div></td></tr>';
                        } else {
                            calendar += '<tr><td class="tweek week' + (j + 1) + '" data-time="' + startYear + '-' + this.dispose(startMonth) + '-' + this.dispose(startDay) + ',' + endYear + '-' + this.dispose(nextMonth) + '-' + this.dispose(endDay) + '" colspan="7"><div><span class="week">第' + this.getYearWeek(startYear, this.dispose(startMonth), this.dispose(startDay)) + '周</span><span class="process">' + this.dispose(startMonth) + '/' + this.dispose(startDay) + '~' + this.dispose(nextMonth) + '/' + this.dispose(endDay) + '</span></div></td></tr>';
                        }
                    } else {
                        calendar += '<tr><td class="tweek week' + (j + 1) + '" data-time="' + startYear + '-' + this.dispose(startMonth) + '-' + this.dispose(startDay) + ',' + endYear + '-' + this.dispose(nextMonth) + '-' + this.dispose(endDay) + '" colspan="7"><div><span class="week">第' + this.getYearWeek(startYear, this.dispose(startMonth), this.dispose(startDay)) + '周</span><span class="process">' + this.dispose(startMonth) + '/' + this.dispose(startDay) + '~' + this.dispose(nextMonth) + '/' + this.dispose(endDay) + '</span></div></td></tr>';
                    }
                } else if (options.today && ((parseInt(options.realmonth) == startMonth && startDay <= parseInt(options.crtdate)) || (parseInt(options.realmonth) != startMonth && startDay >= parseInt(options.crtdate))) && parseInt(options.crtdate) <= endDay && options.realyear == year && options.realmonth == month) {
                    if (selectDate) {
                        crt = 'week' + (j + 1);
                        if (($.isArray(selectDate[2]) && ((year == selectDate[2][0][0] && month == selectDate[2][0][1] && selectDate[2][0][2] == crt) || (selectDate[2][1] && year == selectDate[2][1][0] && month == selectDate[2][1][1] && selectDate[2][1][2] == crt))) || (year == selectDate[0] && month == selectDate[1] && selectDate[2] == crt)) {
                            calendar += '<tr><td class="current-week current-day selected-week tweek week' + (j + 1) + '" data-time="' + startYear + '-' + this.dispose(startMonth) + '-' + this.dispose(startDay) + ',' + endYear + '-' + this.dispose(month) + '-' + this.dispose(endDay) + '" colspan="7"><div><span class="week">第' + this.getYearWeek(startYear, this.dispose(startMonth), this.dispose(startDay)) + '周</span><span class="process">' + this.dispose(startMonth) + '/' + this.dispose(startDay) + '~' + this.dispose(month) + '/' + this.dispose(endDay) + '</span></div></td></tr>';
                        } else {
                            calendar += '<tr><td class="current-week current-day tweek week' + (j + 1) + '" data-time="' + startYear + '-' + this.dispose(startMonth) + '-' + this.dispose(startDay) + ',' + endYear + '-' + this.dispose(month) + '-' + this.dispose(endDay) + '" colspan="7"><div><span class="week">第' + this.getYearWeek(startYear, this.dispose(startMonth), this.dispose(startDay)) + '周</span><span class="process">' + this.dispose(startMonth) + '/' + this.dispose(startDay) + '~' + this.dispose(month) + '/' + this.dispose(endDay) + '</span></div></td></tr>';
                        }
                    } else {
                        calendar += '<tr><td class="current-week current-day tweek week' + (j + 1) + '" data-time="' + startYear + '-' + this.dispose(startMonth) + '-' + this.dispose(startDay) + ',' + endYear + '-' + this.dispose(month) + '-' + this.dispose(endDay) + '" colspan="7"><div><span class="week">第' + this.getYearWeek(startYear, this.dispose(startMonth), this.dispose(startDay)) + '周</span><span class="process">' + this.dispose(startMonth) + '/' + this.dispose(startDay) + '~' + this.dispose(month) + '/' + this.dispose(endDay) + '</span></div></td></tr>';
                    }
                } else if (selectDate) {
                    crt = 'week' + (j + 1);
                    if (($.isArray(selectDate[2]) && ((year == selectDate[2][0][0] && month == selectDate[2][0][1] && selectDate[2][0][2] == crt) || (selectDate[2][1] && year == selectDate[2][1][0] && month == selectDate[2][1][1] && selectDate[2][1][2] == crt))) || (year == selectDate[0] && month == selectDate[1] && selectDate[2] == crt)) {
                        calendar += '<tr><td class="selected-week tweek week' + (j + 1) + '" data-time="' + startYear + '-' + this.dispose(startMonth) + '-' + this.dispose(startDay) + ',' + endYear + '-' + this.dispose(month) + '-' + this.dispose(endDay) + '" colspan="7"><div><span class="week">第' + this.getYearWeek(startYear, this.dispose(startMonth), this.dispose(startDay)) + '周</span><span class="process">' + this.dispose(startMonth) + '/' + this.dispose(startDay) + '~' + this.dispose(month) + '/' + this.dispose(endDay) + '</span></div></td></tr>';
                    } else {
                        calendar += '<tr><td class="tweek week' + (j + 1) + '"  data-time="' + startYear + '-' + this.dispose(startMonth) + '-' + this.dispose(startDay) + ',' + endYear + '-' + this.dispose(month) + '-' + this.dispose(endDay) + '" colspan="7"><div><span class="week">第' + this.getYearWeek(startYear, this.dispose(startMonth), this.dispose(startDay)) + '周</span><span class="process">' + this.dispose(startMonth) + '/' + this.dispose(startDay) + '~' + this.dispose(month) + '/' + this.dispose(endDay) + '</span></div></td></tr>';
                    }
                } else {
                    calendar += '<tr><td class="tweek week' + (j + 1) + '"  data-time="' + startYear + '-' + this.dispose(startMonth) + '-' + this.dispose(startDay) + ',' + endYear + '-' + this.dispose(month) + '-' + this.dispose(endDay) + '" colspan="7"><div><span class="week">第' + this.getYearWeek(startYear, this.dispose(startMonth), this.dispose(startDay)) + '周</span><span class="process">' + this.dispose(startMonth) + '/' + this.dispose(startDay) + '~' + this.dispose(month) + '/' + this.dispose(endDay) + '</span></div></td></tr>';
                }
    
                if (j == 0 && firDay != 1) {
                    startMonth = parseInt(startMonth) + 1 > 12 ? '1' : parseInt(startMonth) + 1;
                    startDay = parseInt(endDay) + 1;
                } else {
                    startDay += 7;
                }
    
                endDay = startDay + 6 > monthLen ? startDay + 6 - monthLen : startDay + 6;
                startYear = startMonth > month ? year - 1 : year;
                endYear = startMonth == 12 && parseInt(endDay) < 7 ? startYear + 1 : startYear;
    
            }
            return calendar;
    
        }
    
        Calendar.prototype.forWeek = function (year, month) {
            var endMonth = parseInt(month);
            var year = parseInt(year);
            var prevdate = this.getPrev(year, month, 'weekly');
            var monthLen = eli.getMonthLen(year, month);
            var prevMonth = prevdate.split('-')[1];
            var prevMonthLen = eli.getMonthLen(prevdate.split('-')[0], prevMonth);
            var firDay = new Date(year, month - 1, 1).getDay();
            firDay = firDay == 0 ? 7 : firDay;
            var startDay = firDay != 1 ? prevMonthLen - firDay + 2 : 1;
            var startMonth = startDay != 1 ? prevMonth : month;
            var endDay = parseInt(startDay) + 6 > parseInt(prevMonthLen) ? parseInt(startDay) + 6 - parseInt(prevMonthLen) : parseInt(startDay) + 6;
            var startYear = parseInt(startMonth) > month ? year - 1 : year;
            var endYear = startMonth == 12 ? startYear + 1 : startYear;
            var data = startYear + '-' + this.dispose(startMonth) + '-' + this.dispose(startDay) + ',' + endYear + '-' + this.dispose(month) + '-' + this.dispose(endDay);
            return data;
        }
    
        Calendar.prototype.bulidMonthly = function (options, year, month) {
            var calendar = '';
            var month = month ? parseInt(month) : parseInt(options.setMonth);
            var year = year ? parseInt(year) : parseInt(options.setYear);
            var selectDate = options.selectDate;
            selectDate = typeof selectDate == 'string' ? selectDate.indexOf('-') != -1 && selectDate.indexOf('week') == -1 ? selectDate.split('-') : null : null;
            if (selectDate) {
                selectDate[0] = selectDate[0] == 'each' ? year : parseInt(selectDate[0]);
                selectDate[1] = selectDate[1] == 'each' ? 1 : parseInt(selectDate[1]);
            }
            for (var j = 0; j < 12; j++) {
                if (j % 4 == 0 && j != 12) {
                    if (j != 0) {
                        calendar += "</tr><tr>";
                    } else {
                        calendar += "<tr>";
                    }
                }
                if (options.today && (j + 1) == options.realmonth && options.realyear == year) {
                    if (selectDate && selectDate[0] == year && selectDate[1] == (j + 1)) {
                        calendar += '<td colspan=2 class="current-month current-day selected-month selected-day tmonth month' + this.dispose((j + 1)) + '" data-time="' + year + '-' + this.dispose((j + 1)) + '"><span class="month">' + (j + 1) + '月</span></td>';
                    } else {
                        calendar += '<td colspan=2 class="current-month current-day tmonth month' + this.dispose((j + 1)) + '" data-time="' + year + '-' + this.dispose((j + 1)) + '"><span class="month">' + (j + 1) + '月</span></td>';
                    }
                } else if (selectDate && selectDate[0] == year && selectDate[1] == (j + 1)) {
                    calendar += '<td colspan=2 class="selected-month selected-day tmonth month' + this.dispose((j + 1)) + '" data-time="' + year + '-' + this.dispose((j + 1)) + '"><span class="month">' + (j + 1) + '月</span></td>'
                } else {
                    calendar += '<td colspan=2 class="tmonth month' + this.dispose((j + 1)) + '" data-time="' + year + '-' + this.dispose((j + 1)) + '"><span class="month">' + (j + 1) + '月</span></td>'
                }
            }
            calendar += '</tr>';
            return calendar;
    
        }
    
        Calendar.prototype.getNext = function (year, month, type) {
            var nextdate;
            if (type == 'monthly') {
                nextdate = parseInt(year) + 1 + '-';
            } else {
                nextdate = parseInt(month) == 12 ? parseInt(year) + 1 + '-01' : year + '-' + this.dispose((parseInt(month) + 1));
            }
            return nextdate;
        }
    
        Calendar.prototype.getPrev = function (year, month, type) {
            var prevdate;
            if (type == 'monthly') {
                prevdate = parseInt(year) - 1 + '-';
            } else {
                prevdate = parseInt(month) == 1 ? parseInt(year) - 1 + '-12' : year + '-' + this.dispose((parseInt(month) - 1));
            }
            return prevdate;
        }
    
        Calendar.prototype.getDate = function () {
            var now = new Date();
            var crtdate = now.getDate();
            var setMonth = now.getMonth() + 1;
            var setYear = now.getYear() + 1900;
            crtdate = this.dispose(crtdate);
            setMonth = this.dispose(setMonth);
            var date = {
                crtdate: crtdate,
                realmonth: setMonth,
                setMonth: setMonth,
                realyear: setYear,
                setYear: setYear
            }
            return date;
        }
    
        Calendar.prototype.dispose = function (val) {
            var value = (parseInt(val) + 100);
            value = value.toString();
            value = value.substring(1);
            return value;
        }
    
        Calendar.prototype.getOptions = function (options, date) {
            if (options && typeof options == 'object') {
                $.each(options, function (key, value) {
                    if (value == void 0) {
                        delete options[key];
                    }
                })
            }
            var option = $.extend({target: null}, CALENDAR_OPTION, date, options);
            return option;
        }
        //判断当前日期为当年第几周
        Calendar.prototype.getYearWeek = function (a, b, c) {
            //date1是当前日期
            //date2是当年第一天
            //d是当前日期是今年第多少天
            //用d + 当前年的第一天的周差距的和在除以7就是本年第几周
            var date1 = new Date(a, parseInt(b) - 1, c), date2 = new Date(a, 0, 1),
                d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
            return Math.ceil((d + ((date2.getDay() + 1) - 1)) / 7);
        };
    
        var Plugin = function (option) {
            return this.each(function () {
                var $this = $(this);
                var data = $this.data('ellie.calendar');
                var options = typeof option == 'object' && option;
                if (!data) $this.data('ellie.calendar', (data = new Calendar(this, option)))
            })
        }
    
        $.fn.flexoCalendar = Plugin;
        $.fn.flexoCalendar.Constructor = Calendar;
    
        var old = $.fn.flexoCalendar;
    
        // calendarWidget no conflict
    
        $.fn.flexoCalendar.noConflict = function () {
            $.fn.flexoCalendar = old;
            return this;
        }
    
    })(jQuery)
    
    + (function ($) {
        var root = this;
        var eli = function (obj) {
            if (obj instanceof eli) return obj;
            if (!(this instanceof eli)) return new eli(obj);
            this.eliwrapped = obj;
        };
    
        root.eli = eli;
    
        eli.getMonthLen = function (year, month) {
            var year = parseInt(year);
            var month = parseInt(month);
            var monthLen = [, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
            if ((month == 2) && (year % 4 == 0) && ((year % 100 != 0) || (year % 400 == 0))) {
                return 29;
            } else {
                return monthLen[month];
            }
        }
    
        eli.getMonthWeek = function (year, month, day) {
            var year = parseInt(year),
                month = parseInt(month),
                day = parseInt(day);
            var that = [year, month,],
                firDay = new Date(year, month - 1, 1).getDay(),
                start = 1,
                next = 8,
                monthLen = eli.getMonthLen(year, month),
                nextfirDay = new Date(year, month, 1).getDay(),
                another;
            firDay = firDay == 0 ? 7 : firDay;
            next = firDay == 1 ? next : (9 - firDay);
    
            for (var i = 0; i < 5; i++) {
                if (start <= day && day < next) {
                    that[2] = 'week' + (i + 1);
                }
                start = next;
                next += 7;
                next = next > monthLen ? monthLen : next;
            }
            if (nextfirDay != 1) {
                another = [, , 'week1'];
                another[1] = month + 1 == 13 ? 1 : month + 1;
                another[0] = another[1] == 1 ? year + 1 : year;
            }
            var output = [that, another];
            return output
        }
    })(jQuery)
    
    

    相关文章

      网友评论

          本文标题:周历FlexoCalendar应用

          本文链接:https://www.haomeiwen.com/subject/peecoctx.html