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

实现代码(精确到天):

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

framework7对日历的一些效果处理的更多相关文章

  1. (二)cordova+framework7入门——笑笑APP

    [前言] framework7确实做的很赞,但是一直各种原因没有做什么app, 这个感觉就像大厨遇到百年难见的好材料,不炒个菜憋的慌, 机缘巧合周一周二两个晚上做了一个简单app,先看下效果: ios ...

  2. CSS3制作日历

    目标是制作如下面DEMO显示的一个日历效果: HTML Markup 先来看看其结构: <div class="calendar"> <span class=&q ...

  3. JavaScript里的Date 对象属性及对象方法--实现简单的日历

    上网搜索"js 日历插件"就会出来各种效果的功能丰富的日历插件,很多都可以下载源码,然后根据各自的需求对源码进行修改就可以直接用了. 但今天讲的不是如何使用这些插件,而是讲如何实现 ...

  4. 基于Vue的简单日历组件

    日历组件 由于移动端项目中需要用到日历组件,网上找了下,没看到几个合适的,就尝试着自己写一个.然后发现也不是很复杂,目前只做了最基本的功能,大家也可以拿去做做二次开发. 如何写一个日历组件 基础效果如 ...

  5. 12款优秀的 JavaScript 日历和时间选择控件

    这些插件能够帮助  Web 开发人员更快速的实现各种精美的日历和时间选择效果. 1. The Coolest Calendar 界面非常漂亮的一款日期选择插件,有详细的使用文档,最新版本 1.5. 点 ...

  6. Jquery日历编写小练习

    日历练习 总体效果展示: 代码展示: 源代码部分 <body> <!-- 日历--> <div class="div_sty"> <tab ...

  7. UIView详解

    MVC架构模式   MVC(Model-View-Controller)是实现数据和显示数据的视图分离的架构模式(有一定规模的应用都应该实现数据和显示的分离).其中,M代表模型,就是程序中使用的数据和 ...

  8. easyui1.3.2中使用1.3.6或1.4.x的calendar

    首先在1.3.2中calendar控件不支持日历某天的颜色进行改变,和自定义回调函数 Name Type Description Default width number The width of c ...

  9. Android Design Support Library: 学习CoordinatorLayout

    简述 CoordinatorLayout字面意思是"协调器布局",它是Design Support Library中提供的一个超级帧布局,帮助我们实现Material Design ...

随机推荐

  1. TensorFlow入门测试程序

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data mnist=input_data. ...

  2. html样式

    <!doctype html> <html> <head> <style id="mceDefaultStyles" type=" ...

  3. Wireshark抓包数据:理解与分析

    wireshark是一个非常好用的抓包工具,本文根据平时抓包经验,对之前wireshark抓包的一些常见知识点进行了整理. 有不当之处,欢迎指正 1.SYN,FIN会消耗一个序号,单独的ACK不消耗序 ...

  4. Redis未授权访问攻击过程与防范

    一.Redis未授权访问攻击过程 攻击主机:kali 目标主机:centos6.8(10.104.11.178) Redis版本:2.8 攻击条件:默认配置,未进行认证 攻击步骤详解: 1.Kali攻 ...

  5. Linux7.3 glib-2.49安装记录

    由于 Linux系统较新,所在glib选择了较新的glib-2.49,安装过程遇到颇多错误,这里只记录正确的成功的安装记录. # rpm -q ncurses readline lua libffi ...

  6. javascript中typeof与instanceof的区别

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前 ...

  7. Cgroup blkio简介和测试(使用fio测试)

    Cgroup blkio简介和测试(使用fio测试) 因需要对docker镜像内的进程对磁盘读写的速度进行限制,研究了下Cgroup blkio,并使用fio对其iops/bps限速进行测试. Cgr ...

  8. asp实现网页浏览总数

    <% AlldayView=0 Set Rs=Server.CreateObject("Adodb.RecordSet") Sql="select * from v ...

  9. [Java][Servlet] Cannot call sendRedirect() after the response has been committed

    做一个Login Demo的时候,写了如下代码: protected void doPost(HttpServletRequest request, HttpServletResponse respo ...

  10. Java并发包concurrent类简析

    1.ConcurrentHashMap ConcurrentHashMap是线程安全的HashMap的实现. 1)添加 put(Object key , Object value) Concurren ...