fullCalendar使用经验总结

Posted on 2018-09-28 22:44 火冰·瓶阅读(1621) 评论(0) 编辑收藏举报

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"
  }
]