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