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

  

  

fullCalendar使用经验总结的更多相关文章

  1. FullCalendar应用——整合农历节气和节日

    FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用 ...

  2. FullCalendar日历插件说明文档

    FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...

  3. 日历插件FullCalendar应用:(二)数据增删改

    接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...

  4. 日历插件FullCalendar应用:(一)数据展现

    在博客园逛了很长时间了,它帮助我获得了很多知识,很感谢大家的分享,而自己呢,由于各种纠结一直没提笔写博客,直到我看到了这篇文章http://www.cnblogs.com/zhaopei/p/why_ ...

  5. MyEclipse10--的使用经验

    MyEclipse10--的使用经验总结 ------------------ 1.MyEclipse中的验证validation----->>用MyEclipse做ExtJs项目研发的时 ...

  6. XCode的个人使用经验

    Xcode是强大的IDE(但个人觉得不如Visual Studio做得好),其强大功能无需本人再赘述,本文也不是一篇“快捷键列表”,因为XCode上的快捷键极其多,而且还有不少是需要同时按下四个按键的 ...

  7. Flask-admin使用经验技巧总结

    笔者是看狗书入门的flask,狗书上对于flask-admin这个扩展并没有进行讲解,最近因为项目需要,学习使用flask-admin,瞬间体会到了flask开发的快速.扩展的强大 Flask-adm ...

  8. JQuery FullCalendar(二)

    前言:根据前文介绍,我们对JQuery FullCalendar如何从后台取数据有了初步了解,已经实现最基本的要求.下面介绍一下FullCalendar的事件 $('#calendar').fullC ...

  9. JQuery FullCalendar(一)

    FullCalendar官网:http://arshaw.com/fullcalendar FullCalendar中文API:http://blog.sina.com.cn/s/blog_9475b ...

随机推荐

  1. 【分布式搜索引擎】Elasticsearch分布式架构原理

    一.相关概念介绍 1)集群(cluster) 一个集群(cluster)由一个或多个节点组成. 这些节点具有相同的cluster.name,它们协同工作,分享数据和负载.当加入新的节点或者删除一个节点 ...

  2. 美国FLAG和中国BAT的比较(王益)

    美国FLAG和中国BAT的比较(王益) http://cxwangyi.github.io/notes/2014-09-29-flag-vs-bat.html 知乎 http://www.zhihu. ...

  3. Crisp String CodeForces - 1117F (状压)

    #include <iostream> #include <algorithm> #include <cstdio> #include <math.h> ...

  4. Codeforces Beta Round #19C. Deletion of Repeats

    题意:给一个数组,每次会删去连续重复两次的左侧部分及前面,有多个重复部分找长度最小和最靠左的部分,重复的数字最多10次 题解:根据重复数字只有10次,我们离散化后,以每两个相同数字作为起点能确定这重复 ...

  5. python自动化测试入门篇-postman

    接口测试基础-postman 常用的接口有两种:webservice接口和http api接口. Webservice接口是走soap协议通过http传输,请求报文和返回报文都是xml格式. http ...

  6. js 数组的pop(),push(),shift(),unshift()方法小结

    关于数组的一些操作方法小结: pop(),push(),shift(),unshift()四个方法都可改变数组的内容以及长度: 1.pop() :删除数组的最后一个元素,并返回被删除的这个元素的值: ...

  7. gdb pretty printer for STL debug in Linux

    Check your gcc version. If it is less than 4.7, you need use another printer.py file. Get the file f ...

  8. 如何把已有SQLSERVER数据库更名而且附加到数据库中?

    如何把已有SQLSERVER数据库更名而且附加到数据库中? 例如:已有数据库:zrmaa,希望更名为jjsh 特别提醒:数据库名中不能加入下划线,因为数据库日志文件有下划线. 把数据库文件mdf和数据 ...

  9. 64位win7连接ACCESS报错“Microsoft.Jet.OLEDB.4.0”问题

    本人开发了桌面软件,关于事务提醒,自己一直在用,很喜欢,但是在64位win7上无法运行,网上说多种方法,都觉得麻烦.后来自己在vs2012下编译成x86版本,结果可以运行在64位win7下了. 原来如 ...

  10. encodeURIComponent编码与解码

    问题:JavaScript用encodeURIComponentt编码后无法再后台解码的问题. 目前写法: window.self.location="list.jsp?searchtext ...