jquery周历插件jqueryweekcalendar汉化实现【带节日】

最近接到一项工作任务，需要展示并打印一周内24小时的排班信息，便想到使用jquery周历插件实现，下面是效果图尚未经过美工打磨。

下面说下，实现过程。

一、依赖的js文件

<link rel='stylesheet' type='text/css' href='<%=basePath%>/plugins/jquery-week-calendar-master/full_demo/reset.css' />
<link rel='stylesheet' type='text/css' href='<%=basePath%>/plugins/jquery-week-calendar-master/libs/css/smoothness/jquery-ui-1.8rc3.custom.css' />
<link rel='stylesheet' type='text/css' href='<%=basePath%>/plugins/jquery-week-calendar-master/jquery.weekcalendar.css?time=2' />
<link rel='stylesheet' type='text/css' href='<%=basePath%>/plugins/jquery-week-calendar-master/full_demo/demo.css' />
<script type='text/javascript' src='<%=basePath%>/plugins/jquery-week-calendar-master/jquery.weekcalendar.js'></script>

二、jsp代码

<div id='calendar'></div>

三、重写插件中的部分代码

$(function() {$(".datepicker").datepicker({format : 'yyyy-mm-dd',autoclose: true,language :"cn",todayHighlight: true}).on("changeDate",changeasdDate);var $calendar = $('#calendar');//设置定时器,防止插件未计算完单元格高度加载页面导致页面显示有问题setTimeout(function() {$calendar.weekCalendar({timeslotsPerHour : 1,timeslotHeight: 100,allowCalEventOverlap : true,overlapEventsSeparate: true,timeFormat : "h:i",dateFormat : "Y-m-d",use24Hour: true,readonly : false,firstDayOfWeek : 0,businessHours :{start: 0, end: 24, limitDisplay: true },daysToShow : 7,buttonText : {today : "本周",lastWeek : " < ",nextWeek : " > "},height : function($calendar) {return $(window).height() - $("h1").outerHeight() - 1;},calendarAfterLoad : function(calEvent) {},eventClick : function(calEvent, $event) {Date.prototype.Format = function (fmt) { //author: meizz var o = {"M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 };if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));return fmt;}if(calEvent==null || calEvent.title=='' || calEvent.title =="New Event") {calEvent.readOnly = true;}if (calEvent.readOnly) {return;}if(calEvent.title!=undefined &&calEvent.title!=null && calEvent.title!='' && calEvent.title !="New Event") {var nowDateStr = calEvent.start.Format("yyyy-MM-dd hh:mm:ss");$('.danyuangeTableTh').html("时间"+ nowDateStr);$('#danyuangeTitle').html('<font style="font-size:15px;">'+calEvent.title+'</font>');$('#event_edit_container').modal('show');}},draggable : function(calEvent, $event) {return calEvent.readOnly != true;},resizable : function(calEvent, $event) {return calEvent.readOnly != true;},eventDrop : function(calEvent, $event) {},eventResize : function(calEvent, $event) {},eventMouseover : function(calEvent, $event) {},eventMouseout : function(calEvent, $event) {},noEvents : function() {},data : function(start, end, callback) {callback(getEventData(start));}    });}, 200);/*$(".wc-time-slot-wrapper .wc-time-slot").height(100);$(".wc-day-column-inner .wc-cal-event").css("display","block");*/
});

四、获取后台数据代码，通过调用getEventData(start)方法实现

function getEventData(start) {/*var year = start.getFullYear();var month = start.getMonth();var day =  start.getDate();var dataArr111 = new Array();var dataObj111 = new Object();dataObj111.id =1;dataObj111.start = new Date(year, month, day, 15);dataObj111.end =  new Date(year, month, day, 16);;dataObj111.title =  "今天1111值班";var dataObj2 = new Object();dataObj2.id =1;dataObj2.start = new Date(year, month, day+1, 15);dataObj2.end =  new Date(year, month, day+1, 16);;dataObj2.title =  "今天2222值班";var dataObj3 = new Object();dataObj3.id =1;dataObj3.start = new Date(year, month, day+2, 15);dataObj3.end =  new Date(year, month, day+2, 16);;dataObj3.title =  "今天3333值班";dataArr111.push(dataObj111);dataArr111.push(dataObj2);dataArr111.push(dataObj3);var  weekObj = new Object();weekObj.events = dataArr111;alert(JSON.stringify(weekObj));return weekObj;*/var time1 = start.Format("yyyy-MM-dd");var year = start.getFullYear();var month = start.getMonth();var day =  start.getDate();var  weekObj = new Object();$('#staffWorkListToolbar input[name="scheduleDay"]').val(time1);$.ajax({type: "post",dataType: 'json',async: false,data : {"scheduleDay":time1,"shopCode":shopCode,"yearTime":year,"monthTime":month,"dayTime":day},url: contextPath + '/shopWorker/queryWorkerBatchFlex',success:function(json){var dataRecords = json.data;if(dataRecords!=null && dataRecords.length>=1) {weekObj.events = dataRecords;}else{var initArr = new Array();var count = 1;for(var i=1;i<=1;i++) {var initObj = new Object();initObj.id = count;initObj.start = new Date(year,month,day,10);initObj.end= new Date(year,month,day,11);initObj.title = null;initArr.push(initObj);}weekObj.events = initArr;}    },error: function () {alert('根据门店编码查询人员上班表错误!');}});return   weekObj;
}

jquery周历插件jqueryweekcalendar汉化实现【带节日】相关推荐

PS动效插件imagemotion汉化版
为大家分享最新汉化的PS动感映像插件Imagemotion for mac,适用于最新版本的photoshop 2019,imagemotion mac版可以将静态图像转换为动态的效果,轻松制作烟雾. ...
对于英语小白，运行Pycharm后要做的第一件事，下载一个官方插件，汉化Pycharm
1.前言对于第一次使用Pycharm的新手来说,特别对于我这种英语渣渣,对Pycharm是又爱又恨,因为下载安装打开的是英文界面,在日常使用上多有不便. 但是其实Pycharm有中文汉化官方插件的, ...
voukoder插件|voukoder汉化版
voukoder插件是专门为after effects和premiere pro软件提供的一款体积小巧.功能强大的加速渲染插件,是由国外团队开发并且完全开源免费推出的,只要用户将该插件安装到adobe ...
js实现周历插件方法
1.兼容IE8-11.360浏览器.chrome.firefox等主流浏览器:手机端也可使用. 2.添加点击前一周.后一周和高亮等功能. 实现原理概述 1.初始化周历原理: 首先获取表示当前星期几的数 ...
Atom使用方法（快捷键，插件，汉化）
Atom文本编辑软件使用方法常用快捷键 Ctrl + Shift + M :打开markdown调试窗口 Crtl + m:相应括号之间,html tag之间等跳转 Crtl + Alt + B: ...
除雾霾去朦胧增强色彩对比清晰画面调色插件 ClearPlus v2.1 Win/Mac AE/PR插件中文汉化版安装与使用
插件介绍 ClearPlus是一款功能强大的AE超级色彩去雾插件,旨在增强包括模糊,水下和弱光视频在内的素材,它也是增强天空的理想选择.轻松灵活地使颜色变得时尚.阴影/高光使您可以在保持自然外观的同时 ...
Atom编译器64位win版本下载汉化及前端必备插件
下载方式: 1.官网下载 2.Github下载 3.Atom编译器64位win版本下载汉化: 安装插件:simplified-chinese-menu 刚安装好的Atom打开是英文版本,可以通过安装 ...
vscode （Visual Studio Code）安装汉化以及前端常用插件推荐
个人IDE软件使用经过 DW => HBulider => sublime => vscode,感觉还是 vscode 用着更爽一些. vscode 全称 Visual Studio ...
Cacti中文版安装汉化插件管理支持Plugin Architecture
Cacti默认安装后不支持插件,需打一个补丁PA,即:Plugin Architecture, 因为我的cacti是中文版的,之前安装了pa补丁是英文的,看着别扭. 于是自己汉化了一个. 注意:此补丁 ...

jquery周历插件jqueryweekcalendar汉化实现【带节日】

jquery周历插件jqueryweekcalendar汉化实现【带节日】相关推荐

最新文章

热门文章