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