标签:variant glob count ons auto hat ret compare info
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(); }
标签:variant glob count ons auto hat ret compare info
原文地址:https://www.cnblogs.com/fireicesion/p/9721359.html