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

实现代码(精确到天):

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. tp5分组查询

    $data=DB::name('goods_common')->alias('a')->join('all580_goods_attractions w','a.common_id = w ...

  2. js css 点亮 星级评分

    利用css 和 js 实现星级评分 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. JOIN 和 NULL

    NULL值得数据出现在数据库发展的最初阶段的确给开发和使用者带来了很大的便利,这是因为它为我们节省了太多的磁盘空间,而且在那个年代磁盘是相当昂贵的.但是随着科技的发展,硬件系统的改进突飞猛进,NULL ...

  4. Windows常用IDE下载(含安装教程)

    电脑办公 电脑系统(U盘安装) PE系统 WIN7 WIN8 WIN10 XP 电脑系统(直接安装) WIN7 WIN8 WIN10 Office office2003 office2007 offi ...

  5. Silverlight FullScreen 全屏

    <UserControl x:Class="FullScreen.MainPage" xmlns="http://schemas.microsoft.com/win ...

  6. Zookeeper如何正确设置和获取watcher

    Watcher 设置是开发中最常见的,需要搞清楚watcher的一些基本特征,对于exists.getdata.getchild对于节点的不同操作会收到不同的 watcher信息   state=-1 ...

  7. Linux 文件锁flock 实现两个进程相互监听存活状态

    表头文件  #include<sys/file.h> 定义函数  int flock(int fd,int operation); 函数说明  flock()会依参数operation所指 ...

  8. Substring Frequency (II) LightOJ - 1427 AC自动机

    https://vjudge.net/problem/LightOJ-1427 把所有模式串加入ac自动机,然后search的时候暴力,每个子串都暴力一下就好. 其实AC自动机就是,先建立好trie图 ...

  9. bcc-tools安装

    1           一. 安装cmake cmake是一种跨平台的编译工具,安装过程如下: 下载源码包:https://cmake.org/files/v3.8/cmake-3.8.0.tar.g ...

  10. DEDE列表页和内容页调用顶级栏目ID的方法

    dede模板中添加顶级栏目id的方法总结,使用dede顶级栏目id可以实现很多功能.比如,在每个列表页调用不同的栏目图片(同一顶级栏目调用相同的图片),如果我们做N个栏目就意味着要做N个列表页模板,显 ...