jQuery手机考勤日历插件

所属分类：输入-日期和时间

30183 243 查看评论 (9)

分享到微信朋友圈

查看演示立即下载

插件描述：一款简单的手机端日历插件，可以根据年月选择查看当月的考勤情况

使用方法

引入资源

使用日历插件前首先要引用资源：JS CSS

<!--jquery引用-->
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!--日历js-->
<script src="js/calendar/calendar.js"></script>
<!--日历Css样式-->
<link rel="stylesheet" type="text/css" href="css/Calendar.css" />

初始化一个日历

首先为calendar准备一个容器，可以设置大小，也可以在options中设置，不设置的话自动设为默认

<div id="calendar" ></div>

js数据

var data = [
	{ startDate: "2019-8-10", name: "事件" },
	{ startDate: "2019-9-10", name: "事件" },
	{ startDate: "2019-7-1", name: "事件" },
	{ startDate: "2019-6-2", name: "请假" },
	{ startDate: "2019-5-3", name: "已打卡" },		  
]

调用插件

$("#calendar").calendar({
    data: data,
    mode: "month",
    maxEvent: 5,
    showModeBtn: false,
    //  newDate: "2018-04-1",
    cellClick: function(events) {
        //viewCell的事件列表
    },
})

基于three.js雪花效果

jQuery仿淘宝购物车