fullCalendar 日历显示每天数据调用方法实践

 一，引用fullCalendar js,css

   参考https://fullcalendar.io/

          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);
            });