ASP.NET MVC5+EF6+EasyUI 后台管理系统（86）-日程管理-fullcalendar插件用法
系列目录
前言
本文分享fullcalendar用法,最后面提供代码下载
说到日程管理,基于JQuery的插件FullCalendar当之无愧,完整的API稳定和调用方式,非常易于扩展!
可以用于系统的个人历程管理,系统的任务日历列表.
支持按：月、周、日来查看,非常实用
下载使用
下载好FullCalendar解压，里面包含了demo和必要的JS,CSS文件
我们打开Demo随便打开一个样例，得到以下必要的文件即可，其他都可以删掉
- /fullcalendar.min.css
- /fullcalendar.print.min.css
- /lib/moment.min.js
- /lib/jquery.min.js
- /fullcalendar.min.js
- /zh-cn.js
由于使用过程中有弹窗,这部分辅助我使用的是EasyUI的组件（你可以使用其他弹窗组件来做弹窗）
数据库结构
由于我们使用了数据保存，所以表的建立要根据官方的事件数据来建对应的数据库表用来存储一个日历事件信息的标准对象，其中只有title和start是必须的
但是我们可以全建来获得完整的数据支持
| 属性 | 描述 |
| id | 可选，事件唯一标识，重复的事件具有相同的id |
| title | 必须，事件在日历上显示的title |
| allDay | 可选，true or false，是否是全天事件。 |
| start | 必须，事件的开始时间。 |
| end | 可选，结束时间。 |
| url | 可选，当指定后，事件被点击将打开对应url。 |
| className | 指定事件的样式。 |
| editable | 事件是否可编辑，可编辑是指可以移动, 改变大小等。 |
| source | 指向次event的eventsource对象。 |
| color | 背景和边框颜色。 |
| backgroundColor | 背景颜色。 |
| borderColor | 边框颜色。 |
| textColor | 文本颜色。 |
CREATE TABLE [dbo].[SysCalendarPlan](
[Id] [varchar](50) primary key,
[Title] [varchar](500) NOT NULL,
[PlanContent] [varchar](500) NULL,
[BeginDate] [datetime] NOT NULL,
[EndDate] [datetime] NOT NULL,
[CreateTime] [datetime] NOT NULL,
[Url] [varchar](250) NULL,
[Color] [varchar](50) NULL,
[TextColor] [varchar](50) NULL,[Editable] [varchar](50) NULL,
)
至此，数据库的表结构就已经建立完成
前端代码
新建一个MVC5项目（普通MVC没有权限验证）
删掉Home视图，新建一个空的Index.cshtml页面，引入必要的JS，这就是我们的主页了
Index.cshtml代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="../../Scripts/jquery.min.js"></script>
<script src="../../Scripts/jquery.easyui.min.js"></script>
<link href="../../Content/metro/easyui.css" rel="stylesheet" />
<link href="~/Scripts/fullcalendar/fullcalendar.css" rel="stylesheet" />
<script src="~/Scripts/fullcalendar/moment.min.js"></script>
<script src="~/Scripts/fullcalendar/fullcalendar.min.js"></script>
<script src="~/Scripts/fullcalendar/zh-cn.js"></script>
<script>
var editEvent = null;
$(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
weekNumbers: true,
weekNumbersWithinDays: true,
weekNumberCalculation: 'ISO',
editable: true,
navLinks: true, // can click day/week names to navigate views
defaultView:'month',
contentHeight:540,
selectable: true,
selectHelper: true,//在agenda视图下选择时会带上对应的时间
dragOpacity: 0.5, //Event被拖动时的不透明度
});
});
</script>
</head>
<body>
<div id="calendar" style="margin-top:10px;margin-left:5px"></div>
</body>
</html>
添加从例子中引用的JS的代码，F5运行一下，效果已经出来了！
展示逻辑代码
一、将表添加到EF（助于我们快速开发数据）
新建EF并加入表SysCanlendarPlan
二、插入几条模拟数据
USE [TestDB]
GO
/****** Object: Table [dbo].[SysCalendarPlan] Script Date: 07/25/2017 16:11:00 ******/
INSERT [dbo].[SysCalendarPlan] ([Id], [Title], [PlanContent], [BeginDate], [EndDate], [CreateTime], [Url], [Color], [TextColor], [Editable]) VALUES (N'201706291423265580000cb3f24cb11', N'测试1', N'测试内容1', CAST(0x0000A7B100000000 AS DateTime), CAST(0x0000A7B200000000 AS DateTime), CAST(0x0000A7BB00000000 AS DateTime), NULL, N'#3a87ad', N'#ffffff', N'true')
INSERT [dbo].[SysCalendarPlan] ([Id], [Title], [PlanContent], [BeginDate], [EndDate], [CreateTime], [Url], [Color], [TextColor], [Editable]) VALUES (N'201706291423265580000cb3f24cb24', N'测试', N'测试内容', CAST(0x0000A7A700000000 AS DateTime), CAST(0x0000A7A800000000 AS DateTime), CAST(0x0000A7BB00000000 AS DateTime), NULL, N'#3a87ad', N'#ffffff', N'true')
三、编写Ajax请求方法
Json格式根据官方demo提供的json数据格式必须一致
新建json格式的模型，放到Models下即可
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks; namespace 日程管理.Models
{
public class CalendarPlanJsonModel
{
public string id { get; set; }
public string title { get; set; }//he text on an event's element
public string content { get; set; }//content
public string color { get; set; }//Sets an event's background and border color
public string textColor { get; set; }//Sets an event's text color
public DateTime start { get; set; }//The date/time an event begins
public DateTime end { get; set; }//The exclusive date/time an event ends
public string url { get; set; }//A URL that will be visited when this event is clicked by the user
}
}
查询,新增,修改的Ajax请求方法
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using 日程管理.Models; namespace 日程管理.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
} //读取事件列表
[HttpGet]
public JsonResult GetList(DateTime start, DateTime end)
{
using (DBContainer db = new DBContainer())
{
List<SysCalendarPlan> list = db.SysCalendarPlan.ToList();
var json = (from r in list
select new CalendarPlanJsonModel()
{
id = r.Id,
title = r.Title,
content = r.PlanContent,
start = r.BeginDate,
end = r.EndDate,
url = r.Url,
color = r.Color,
textColor = r.TextColor
}).ToArray();
return Json(json, JsonRequestBehavior.AllowGet);
}
} //创建新事件
public ActionResult Create(string start, string end)
{
DateTime beginDate = new DateTime();
DateTime endDate = new DateTime();
if (start == null)
{
beginDate = Convert.ToDateTime(DateTime.Now.ToShortDateString());
endDate = Convert.ToDateTime(DateTime.Now.AddDays().ToShortDateString());
}
else
{
beginDate = Convert.ToDateTime(start);
endDate = Convert.ToDateTime(end);
} SysCalendarPlan model = new SysCalendarPlan()
{
BeginDate = beginDate,
EndDate = endDate
};
return View(model);
} [HttpPost]
public JsonResult Create(SysCalendarPlan model)
{
using (DBContainer db = new DBContainer())
{
model.Id = DateTime.Now.ToString("yyyyMMddHHmmssfffffff");
model.CreateTime = DateTime.Now;
model.Editable = model.Editable == null ? "false" : model.Editable;
SysCalendarPlan entity = new SysCalendarPlan();
entity = new SysCalendarPlan();
entity.Id = model.Id;
entity.Title = model.Title;
entity.PlanContent = model.PlanContent;
entity.BeginDate = model.BeginDate;
entity.EndDate = model.EndDate;
entity.CreateTime = model.CreateTime;
entity.Url = model.Url;
entity.Color = model.Color;
entity.TextColor = model.TextColor;
entity.Editable = model.Editable;
db.Set<SysCalendarPlan>().Add(entity);
if (db.SaveChanges() > )
{
return Json("");
}
else
{
return Json("");
}
}
} //修改事件 public ActionResult Edit(string id)
{
using (DBContainer db = new DBContainer())
{
SysCalendarPlan entity = db.SysCalendarPlan.SingleOrDefault(a=>a.Id==id);
return View(entity);
}
} [HttpPost]
//[SupportFilter]
public JsonResult Edit(SysCalendarPlan model)
{ using (DBContainer db = new DBContainer())
{
SysCalendarPlan entity = db.SysCalendarPlan.SingleOrDefault(a => a.Id == model.Id);
entity.Title = model.Title;
entity.PlanContent = model.PlanContent;
entity.BeginDate = model.BeginDate;
entity.EndDate = model.EndDate;
entity.CreateTime = model.CreateTime;
entity.Url = model.Url;
entity.Color = model.Color;
entity.TextColor = model.TextColor;
entity.Editable = model.Editable;
db.Set<SysCalendarPlan>().Attach(entity);
db.Entry(entity).State = EntityState.Modified;
if (db.SaveChanges() > )
{
return Json("");
}
else
{
return Json("");
}
}
}
}
}
控制器的代码
四、来自前端的请求
请求之前我们需要了解一下这个插件的事件,方便我们调
http://www.cnblogs.com/ymnets/p/7052818.html
虽然很多种事件，但是下面总结几个常用时间即可
- 1.select 选择日期触发(弹出新增的框[新增])
- 2.eventDrop 拖拽触发(拖动改变日期或者延长缩短[修改])
- 3.eventClick 点击事件(进一步查看明细或者[修改])
- 4.eventDrop 移动事件时候触发(直接改变日期[修改])
<script>
var editEvent = null;
$(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
weekNumbers: true,
weekNumbersWithinDays: true,
weekNumberCalculation: 'ISO',
editable: true,
navLinks: true, // can click day/week names to navigate views
defaultView:'month',
contentHeight:,
selectable: true,
selectHelper: true,//在agenda视图下选择时会带上对应的时间
dragOpacity: 0.5, //Event被拖动时的不透明度
droppable: true,
events: {
//加载数据
url: '/Home/GetList',
error: function () {
alert("请求错误");
}
},
select: function (start, end) {
console.log('选择日期触发');
},
eventDrop: function (event, dayDelta, revertFunc) {
console.log('eventDrop --- start ---');
console.log('eventDrop被执行，Event的title属性值为：', event.title);
if (dayDelta._days != ) {
console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._days + '天！');
} else if (dayDelta._milliseconds != ) {
console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._milliseconds / + '秒！');
} else {
console.log('eventDrop被执行，Event的start和end时间没有改变！');
}
//revertFunc();
console.log('eventDrop --- end ---');
},
eventClick: function (event, element) {
//点击事件触发
console.log("点击事件触发");
console.log(event);
},
eventDrop: function (event, dayDelta, revertFunc) {
//移动事件时候触发
console.log("移动事件时候触发");
console.log(event);
}
});
});
</script>
实现
到这里已经分解了所有，剩下来只剩下实现！具体实现我们就参考源码代码吧！
代码下载
链接:http://pan.baidu.com/s/1pKD7AFh 密码:skme
ASP.NET MVC5+EF6+EasyUI 后台管理系统（86）-日程管理-fullcalendar插件用法的更多相关文章
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（84）-Quartz 作业调度用法详解一
前言 我从Quartz2.0开始使用,并对其进行了封装了界面,可以参考 http://www.cnblogs.com/ymnets/p/5065154.html 最近拿出来进行了优化,并升级到最新版, ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（85）-Quartz 作业调度用法详解二
前言 上一节我们学习了Quartz的基本用法 这一节学习通过XML配置的形式来执行任务 这一节主要认识一些属性,为下一步打基础 代码下载:链接:http://pan.baidu.com/s/1ge6j ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（转）
开发工具:VS2015(2012以上)+SQL2008R2以上数据库 您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 日程管理 http://ww ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）
开发工具:VS2015(2012以上)+SQL2008R2以上数据库 您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 任务调度系统界面 http: ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（63）-Excel导入和导出-自定义表模导入
系列目录 前言 上一节使用了LinqToExcel和CloseXML对Excel表进行导入和导出的简单操作,大家可以跳转到上一节查看: ASP.NET MVC5+EF6+EasyUI 后台管理系统(6 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统-WebApi的用法与调试
1:ASP.NET MVC5+EF6+EasyUI 后台管理系统(1)-WebApi与Unity注入 使用Unity是为了使用我们后台的BLL和DAL层 2:ASP.NET MVC5+EF6+Easy ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（51）-系统升级
系统很久没有更新内容了,期待已久的更新在今天发布了,最近花了2个月的时间每天一点点,从原有系统 MVC4+EF5+UNITY2.X+Quartz 2.0+easyui 1.3.4无缝接入 MVC5+E ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（58）-DAL层重构
系列目录 前言:这是对本文系统一次重要的革新,很久就想要重构数据访问层了,数据访问层重复代码太多.主要集中增删该查每个模块都有,所以本次是为封装相同接口方法 如果你想了解怎么重构普通的接口DAL层请查 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（34）-文章发布系统①-简要分析
系列目录 最新比较闲,为了学习下Android的开发构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(1)-前言与,虽然有点没有目的的学习,但还是了解了Andro ...
随机推荐
- (转)SQL Server基础之存储过程（清晰使用）
阅读目录 一:存储过程概述 二:存储过程分类 三:创建存储过程 1.创建无参存储过程 2.修改存储过程 3.删除存储过程 4.重命名存储过程 5.创建带参数的存储过程 简单来说,存储过程就是一条或 ...
- 【SignalR学习系列】3. SignalR实时高刷新率程序
创建项目 创建一个空的 Web 项目,并在 Nuget 里面添加 SignalR,jQuery UI 包,添加以后项目里包含了 jQuery,jQuery.UI ,和 SignalR 的脚本. 创建基 ...
- java.lang.NoSuchMethodError: antlr.collections.AST.getLine()I
今天使用hql语句的时候,遇到了一个这样的bug,修改的方法是
- Redux源码分析之combineReducers
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- Dubbo负载均衡策略
在集群负载均衡时,Dubbo提供了多种均衡策略,缺省为random随机调用. 可以自行扩展负载均衡策略,参见:负载均衡扩展Random LoadBalance 随机,按权重设置随机概率. 在一个截面上 ...
- 使用jquery获取url及url参数的方法
使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javasc ...
- iOS设置圆角的常用方法
//第一种方法:最常用的方法,但是性能最差 UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100 ...
- 简单探讨python中的语句和语法
python程序结构 python"一切皆对象",这是接触python听到最多的总结了.在python中最基层的单位应该就是对象了,对象需要靠表达式建立处理,而表达式往往存在于语句 ...
- css2--垂直对齐
## CSS2 vertical-align 垂直对齐 - baseline 默认值.基于基线对齐 - middle 位于同一行的非衬线字体小写字母的 1/2 处.不要为父 ...
- [Scoi2014]方伯伯的玉米田 二维树状数组+动态规划
考试最后半个小时才做这道题.十分钟写了个暴力还写挂了..最后默默输出n.菜鸡一只. 这道题比较好看出来是动规.首先我们要明确一点.因为能拔高长度任意的一段区域,所以如果从i开始拔高,那么一直拔高到n比 ...