framework7对日历的一些效果处理

现在的要求是日历中要区分已打卡和未打卡的显示，并且当月只显示当月的日历状态，其他月份不显示状态，并且打卡的日期不能大于当日

实现代码（精确到天）：

HTML：

<div class="card">
                        <div class="card-content">
                            <div class="card-content-inner calendar-card-content">
                                <div class="calendar-page-content page-content">
                                    <div class="content-block">
                                        <div style="padding:0; margin-right:-15px; width:auto" class="content-block-inner">
                                            <div id="calendar-inline-container"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

CSS：

.day-n>span {
    background-color:#ff0000 !important;
    color:#fff !important;
}
.day-y>span {
    background-color:#5aadff !important;
    color:#fff !important;
}

JS：

//工时日历月份变量
var _monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
var _calendarInline;//日历DOM变量
//日历初始化
function workCalendarPage_init() {
    var array = GetStateByDate();
    _calendarInline = myApp.calendar({
        container: '#calendar-inline-container',
        monthNames: _monthNames,
        //dayNamesShort: dayNamesShort,
        value: [new Date()],
        weekHeader: true,
        rangesClasses: [
            //指定某段日期范围可以做一些操作，比如10-1~10-7是国庆可以指定这段日期为一个颜色
        ],
        disabled: {
            //当前时间以前的可点击，当前时间以后的不可点击
            from: new Date()
        },
        toolbarTemplate:
            '<div class="toolbar calendar-custom-toolbar">' +
                '<div class="toolbar-inner">' +
                    '<div class="left">' +
                        '<a href="#" class="link icon-only"><i class="icon icon-back"></i></a>' +
                    '</div>' +
                    '<div class="center"></div>' +
                    '<div class="right">' +
                        '<a href="#" class="link icon-only"><i class="icon icon-forward"></i></a>' +
                    '</div>' +
                '</div>' +
            '</div>',
        //日历控件初次加载时调用
        onOpen: function (p) {
            $$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] + ', ' + p.currentYear);
            $$('.calendar-custom-toolbar .left .link').on('click', function () {
                _calendarInline.prevMonth();
            });
            $$('.calendar-custom-toolbar .right .link').on('click', function () {
                _calendarInline.nextMonth();
            });
            SetCalendarValue(p, array);
        },
        //月份改变时调用
        onMonthYearChangeStart: function (p) {
            $$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] + ', ' + p.currentYear);
            SetCalendarValue(p, array);
        }
        //    ,
        //onDayClick: function (p, dayContainer, year, month, day) {
        //    checkData = calendarInline.value;
        //这样的写法会遇见一个问题就是第一次加载页面的时候当前日期的点击事件不可以使用，需要点击别的日期后再点击当前日期才可以，所以注销这个方法，自己写一个方法
        //}
    });

    //日历某天的点击事件
    $(document).on("click", ".picker-calendar-day", function () {
        GoToWorkEntry(this);
    });
}


//跳转工作录入界面
function GoToWorkEntry(dom) {
    if (!$(dom).hasClass('picker-calendar-day-disabled')) {
        loadPage('/WorkTimeManagement/WorkEntry');
    } 
}

//获取日期和状态
function GetStateByDate() {
    var array = [
        { state: 'y', date: '2018-10-01' },
        { state: 'y', date: '2018-10-03' },
        { state: 'y', date: '2018-10-29' },
        { state: 'y', date: '2018-10-30' },
        { state: 'n', date: '2018-09-29' },
        { state: 'y', date: '2018-09-05' },
        { state: 'n', date: '2018-11-01' },
        { state: 'y', date: '2018-11-02' },
        { state: 'n', date: '2018-11-03' },
    ];
    return array;
}

//根据返回值设置日历的值
function SetCalendarValue(p, array) {
    $('.picker-calendar-day').removeClass('day-n');
    $('.picker-calendar-day').removeClass('day-y');

    $.each(array, function (index, value) {
        //循环数据库得到的数据对每个数据进行处理
        var curData = new Date(value.date);
        var curYear = curData.getFullYear();
        var curMonth = curData.getMonth() + 1;
        if ((p.currentMonth + 1) == curMonth && p.currentYear == curYear) {
            var curDay = curData.getDate();
            var dom = $('.picker-calendar-day').filter(function (index, value) {
                //筛选当天的数据，根据数据的状态进行当天数据CSS的添加
                var year = $$(value).attr('data-year');
                var month = parseInt($$(value).attr('data-month'), 10) + 1;
                var day = $$(value).attr('data-day');
                //年月日相等，就确定是当天
                if (year == curYear && month == curMonth && day == curDay) {
                    return $(value);
                }
            });
            if (value.state == 'y') {
                dom.addClass('day-y');
            } else if (value.state == 'n') {
                dom.addClass('day-n');
            }
        }
    });

}

 

转载于:https://www.cnblogs.com/llcdbk/p/9908812.html