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. 第 8 章 容器网络 - 066 - Weave 如何与外网通信?

    Weave 与外网通信 weave 是一个私有的 VxLAN 网络,默认与外部网络隔离. 外部网络如果要访问到 weave 中的容器:1.首先将主机加入到 weave 网络.2.然后把主机当作访问 w ...

  2. GeoServer服务器环境的搭建

    .java 的安装  下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 我下载的java 1.8版本 1. ...

  3. 微信小程序 密码键盘 - 密码页面组件 (原生小程序代码)

    1.WXML页面 <view> <!--<section class="mask" catchtap="canclePwd" wx:if ...

  4. Opencv-Android安装使用

    这是本人第一篇博客,写博客并不是说本人的技术能力有多强,或者说炫耀自己取得的进展.在当今这个数据信息大爆炸的年代,每个人肯定会接受很多新鲜事物,但不是所有东西你都能记得一清二楚,写博客一方面是为了巩固 ...

  5. 读李宏毅《一天看懂深度学习》——Deep Learning Tutorial

    大牛推荐的入门用深度学习导论,刚拿到有点懵,第一次接触PPT类型的学习资料,但是耐心看下来收获还是很大的,适合我这种小白入门哈哈. 原PPT链接:http://www.slideshare.net/t ...

  6. Python查看与安装

    官网下载最新的版本  https://www.python.org mac系统,最近版本的os系统默认自带python 2.7,可以通过在终端输入python或python -V zhanyunjiu ...

  7. 跟随我在oracle学习php(2)

    在制作网页之前,先看一些常用标签的具体用法,上次我给出了常用标签表格,我们来一个一个看一看. 首先是<a>,他的第一个用法就是超链接,格式为<a href=”你想要跳转到的网页地址” ...

  8. DMSkin for WPF 开源在Github

    DMSkin for WPF 开源在Github http://www.dmskin.com/

  9. elastic search 常用查询

    1.查询mapping curl -X GET "10.0.38.111:1200/metric_data_bus_2018-08-07/_mapping/data_bus?pretty&q ...

  10. angular2在ts中使用transform转换时间格式

    摘要:在angular1中我们可以在控制器中像下面那样使用filter: $filter('date')(myDate, 'yyyy-MM-dd'); 但是如何在angular2中在ts中使用自定义p ...