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 ...
随机推荐
- 平方根的C语言实现(一)
曾经做一个硬件成本极度控制的项目,因为硬件成本极低,并且还需要实现较高的精度测量,过程中也自己用C语言实现了正弦.余弦.反正切.平方根等函数. 以下,无论是在我的实际项目中还是本地的计算机系统,int ...
- (转)Java线程：新特征-原子量，障碍器
Java线程:新特征-原子量 所谓的原子量即操作变量的操作是“原子的”,该操作不可再分,因此是线程安全的. 为何要使用原子变量呢,原因是多个线程对单个变量操作也会引起一些问题.在Java5之前 ...
- PDF安全模式破解的简单办法
网上下电子书时,经常会遇到 电子书被加密的情况,此时读者将无法进行标亮,加注释等基本的操作.网上的方法都是建议下个 PDFPasswodRemove 的软件,麻烦而且软件不好用.经各种研究,尝试,发现 ...
- vue使用之剑走偏锋——菜单组件篇
背景 习惯了这样的写法了,上来先来一个背景,交待一下事情的起因.事情的起因很简单,用惯了mvc框架,想来一发前后端完全分离的框架试试.选用的人员和技术是这样子的,让原本做java的web开发的人员使用 ...
- Redis数据类型之ZSet（五）
前言:有序集合zset跟其他类型一样,同样有几种编码方式.主要有两种编码方式,REDIS_ENCODING_ZIPLIST和REDIS_ENCODING_SKIPLIST.ziplist可以表示较小的 ...
- 灵玖软件Nlpir Parser语义智能内容过滤
Internet是全球信息共享的基础设施,是一种开放和面向 所有用户的技术.它一方面要保证信息方便.快捷的共享;另一方面要防止垃圾信息的传播.网络内容分析是一种管理信 息传播的重要手段.它是网络信息安 ...
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...
- XML属性列表
<?xml version="1.0" encoding="UTF-8"?> <Resources> <Include > ...
- Angular2 VS Angular4 深度对比：特性、性能
欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一. Google的Angular团队已于3月 ...
- Head First 设计模式 第5章 单例模式
第5章 单例模式 1.定义:确保一个类只有一个实例,并为其创建访问点. 2.单例模式的类图: 对应的单例模式的代码: package com.ek.singleton; /** * @包名 com.e ...