fullCalendar 日历显示每天数据调用方法实践
一,引用fullCalendar js,css
https://www.helloweba.net/javascript/445.html
<script src="xxx/fullcalendar/js/fullcalendar-1.6.4.min.js"></script> <link href="xxx/fullcalendar/css/fullcalendar-1.6.4.css" rel="stylesheet" />
二,示例
$('.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 = '<div style="text-align:center;color:#000;display: inline-block;vertical-align: middle;border:0px!important;background-color:#fff!important">' + event.realpay + '</div> '; 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) { // 当点击日历中的某一日程(事件)时,触发此操作 btn_show(event.start); } });
1,events: '/xxx/xxx/xxx' 接口地址/xxx/xxx/xxx 默认参数 start ,end 两个时间秒数
c# 后台用
double? dstart = start.ToDoubleOrNull();
starttime = TimeZone.CurrentTimeZone.ToLocalTime(new DateTime(1970, 1, 1)).AddSeconds(dstart.Value); 转成有效时间
直接返回 如下
events: [ { title : 'event1', start : '2017-11-01' }, { title : 'event2', start : '2017-11-05', end : '2017-11-07' }, { title : 'event3', start : '2017-11-09T12:30:00', allDay : false // will make the time show } ]
2,events (as a json feed)
events: { url: '/xxx/xxx/xxx', type: 'get', data: { date: $("#PayDate").val() }, error: function() { alert('there was an error while fetching events!'); } },
默认参数包含(start,end),加上自己添加的date参数
默认返回数据格式
[ { title : 'event1', start : '2017-11-01' }, { title : 'event2', start : '2017-11-05', end : '2017-11-07' }, { title : 'event3', start : '2017-11-09T12:30:00', allDay : false // will make the time show } ]
返回值说明:
title :可自定义其他名称,用于显示在日历上
start (不能为空) 显示开始时间 如果end为空则显示当天全天
end (可以为空)显示结束时间 如果跨天日历则连续几天都显示相同内容
三,添加搜索方法
$("#button").click(function () { var monthtext = $("#Date").val(); var date = new Date(monthtext); $('#calendar').fullCalendar('gotoDate', date); });