fullCalendar使用經驗總結

fullCalendar日歷控件官方網址： https://fullcalendar.io/

1.需要引入的文件

    <link href="~/assets/fullcalendar-3.9.0/fullcalendar.min.css" rel="stylesheet" />
    <link href="~/assets/fullcalendar-3.9.0/fullcalendar.print.min.css" rel="stylesheet" media="print" />
    <script src="~/assets/fullcalendar-3.9.0/lib/moment.min.js"></script>
    @*<script src="~/assets/fullcalendar-3.9.0/lib/jquery.min.js"></script>*@
    <script src="~/assets/fullcalendar-3.9.0/fullcalendar.min.js"></script>
    <script src="~/assets/fullcalendar-3.9.0/locale/zh-cn.js"></script>

 

2.HTML頁面 

<style>
html, body {
margin: 0;
padding: 0;
}

#script-warning {
display: none;
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 40px;
text-align: center;
font-weight: bold;
font-size: 12px;
color: red;
}

#loading {
display: none;
position: absolute;
top: 50%;
right: 50%;
}

#calendar {
max-width: 800px;
margin: 0px auto;
}
</style>



校區：
<select id="XiaoQu" name="XiaoQu">
<option value="18">錦江校區</option>
<option value="19">高新校區</option>
</select>
<div id="script-warning">出錯了</div>
<div id="loading">加載中......</div>
<div id='calendar'></div>

 

$(function () {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay,listWeek'
                },
                defaultView: 'month',
                defaultDate: '@showDate.ToString("yyyy-MM-dd")',  //默認顯示的日期
                locale: 'zh-cn',
                events: {
                    url: '@Url.Action("JsonData")',    //獲取json數據的url
                    data: function () { // a function that returns an object
                        return {
                            place: $("#XiaoQu").val()    //額外的動態參數
                        };
                    },
                    error: function () {
                        $('#script-warning').show();
                    }
                },
                loading: function (bool) {
                    $('#loading').toggle(bool);
                }
            });


            $("#XiaoQu").change(function () { 
                $('#calendar').fullCalendar('refetchEvents');//重新加載數據
            });
        });

 

3.生成Json數據的后台

public async Task<String> JsonData(DateTime start, DateTime end,int place)
        {
            var list = await _context.RoomConfigure.Where(g =>g.PlaceID==place &g.StartTime.Date.CompareTo(start) > 0 & g.StartTime.Date.CompareTo(end) < 0).ToListAsync();

            StringBuilder resultStr = new StringBuilder();
            resultStr.Append("[");

            foreach (var item in list)
            {
                resultStr.Append("{");
                resultStr.Append("\"title\": \"可預約" + item.Number + "\",");
                resultStr.Append("\"start\": \"" + item.StartTime.ToString("yyyy-MM-ddTHH:mm:sszzzz", System.Globalization.DateTimeFormatInfo.InvariantInfo) + "\",");
                resultStr.Append("\"allDay\": false");
                resultStr.Append("},");
            }

            if (list.Count > 0)
            {
                resultStr.Remove(resultStr.Length - 1, 1);
            }

            resultStr.Append("]");

            string jsonStr = "[{\"title\":\"All Day Event\",\"start\":\"2018-03-01\"},{\"title\":\"Long Event\",\"start\":\"2018-03-07\",\"end\":\"2018-03-10\"},{\"id\":\"999\",\"title\":\"Repeating Event\",\"start\":\"2018-03-09T16:00:00-05:00\"},{\"id\":\"999\",\"title\":\"Repeating Event\",\"start\":\"2018-03-16T16:00:00-05:00\"},{\"title\":\"Conference\",\"start\":\"2018-03-11\",\"end\":\"2018-03-13\"},{\"title\":\"Meeting\",\"start\":\"2018-03-12T10:30:00-05:00\",\"end\":\"2018-03-12T12:30:00-05:00\"},{\"title\":\"Lunch\",\"start\":\"2018-03-12T12:00:00-05:00\"},{\"title\":\"Meeting\",\"start\":\"2018-03-12T14:30:00-05:00\"},{\"title\":\"Happy Hour\",\"start\":\"2018-03-12T17:30:00-05:00\"},{\"title\":\"Dinner\",\"start\":\"2018-03-12T20:00:00\"},{\"title\":\"Birthday Party\",\"start\":\"2018-03-13T07:00:00-05:00\"},{\"title\":\"Click for Google\",\"url\":\"http://google.com/\",\"start\":\"2018-03-28\"}]";
            //return jsonStr;
            return resultStr.ToString();
        }

　　

 4.官方的Json數據源格式

 

[
  {
    "title": "All Day Event",
    "start": "2018-03-01"
  },
  {
    "title": "Long Event",
    "start": "2018-03-07",
    "end": "2018-03-10"
  },
  {
    "id": "999",
    "title": "Repeating Event",
    "start": "2018-03-09T16:00:00-05:00"
  },
  {
    "id": "999",
    "title": "Repeating Event",
    "start": "2018-03-16T16:00:00-05:00"
  },
  {
    "title": "Conference",
    "start": "2018-03-11",
    "end": "2018-03-13"
  },
  {
    "title": "Meeting",
    "start": "2018-03-12T10:30:00-05:00",
    "end": "2018-03-12T12:30:00-05:00"
  },
  {
    "title": "Lunch",
    "start": "2018-03-12T12:00:00-05:00"
  },
  {
    "title": "Meeting",
    "start": "2018-03-12T14:30:00-05:00"
  },
  {
    "title": "Happy Hour",
    "start": "2018-03-12T17:30:00-05:00"
  },
  {
    "title": "Dinner",
    "start": "2018-03-12T20:00:00"
  },
  {
    "title": "Birthday Party",
    "start": "2018-03-13T07:00:00-05:00"
  },
  {
    "title": "Click for Google",
    "url": "http://google.com/",
    "start": "2018-03-28"
  }
]