fullcalendar显示出勤日_fullCalendar 日历显示每天数据调用方法实践

最新推荐文章于 2024-07-25 13:00:00 发布

weixin_39890289

最新推荐文章于 2024-07-25 13:00:00 发布

阅读量659

点赞数

文章标签： fullcalendar显示出勤日

本文链接：https://blog.csdn.net/weixin_39890289/article/details/111531947

版权

这篇博客详细介绍了如何利用fullCalendar插件在网页中显示员工的出勤日。通过配置header、日历格式、事件处理等选项，实现日历视图中点击日期弹出出勤详情，同时动态加载指定日期的出勤数据。

摘要由CSDN通过智能技术生成

$('.calendar').fullCalendar({

header: {

left:false,

center:'title',

right:false},

monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

dayNamesShort: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],

buttonText: {

prev:'上月',//month: '月视图',//week: '周视图',//day: '日视图'

titleFormat:"yyyy年MM月",

columnFormat: {

month:'ddd',

week:'MM月dd日 ddd',

day:'MM月dd日 ddd'},

allDayText:'今天',

axisFormat:"HH:00",

height: $(window).height()- 55,

dayClick: function (date, allDay, jsEvent, view) {var _date = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');var _time = $.fullCalendar.formatDate(date, 'HHmm');

_time= "";if (formatDate(_date, 'yyyyMMdd') >= ('@LeaRun.Util.Time.GetToday("yyyyMMdd")')) {//btn_add(_date, _time,0);

}else{//btn_add(_date, _time,1);

}

editable:true,

eventLimit:true,

eventAfterRender: function (event, element, view) {var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");//var fend = $.fullCalendar.formatDate(event.end, "HH:mm");

if (view.name == "month") {//按月份

var evtcontent = '

' + event.realpay + '

element.html(evtcontent);

}

eventMouseover: function (calEvent, jsEvent, view) {var fstart = $.fullCalendar.formatDate(calEvent.start, "MM-dd");//var fend = $.fullCalendar.formatDate(calEvent.end, "yyyy/MM/dd HH:mm");//$(this).attr('title', fstart + " - " + fend + " " + calEvent.fullname); 鼠标悬浮到title的时候可以设置展现哪些信息

$(this).attr('title', fstart + " " +calEvent.realpay);

$(this).css('font-weight', 'normal');

},//events: '/xxx/xxx/xxx',

events: {

url:'/xxx/xxx/xxx',

type:'get',

data: {

date: $("#PayDate").val()

error: function() {

alert('there was an error while fetching events!');

}

eventClick: function (event, element) {//当点击日历中的某一日程(事件)时，触发此操作