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 ...
随机推荐
- (转)JAVA排序汇总
JAVA排序汇总 package com.softeem.jbs.lesson4; import java.util.Random; /** * 排序测试类 * * 排序算法的分类如下: * 1.插入 ...
- App 组件化/模块化之路——Repository 模式
什么是 Repository 模式 Repository 这个词直译过来仓库.仓储的意思.这个意思其实也能反应出 Repository 模式作用.App 开发中少不了对数据的操作,数据的来源可能有很多 ...
- 【samba】samba 用户权限配置（转）
首先要保证你的samba安装并配置好,关于安装和配置samba请参考此文章 http://blog.csdn.net/linglongwunv/archive/2010/01/19/5212875.a ...
- Linux安装搜狗输入法教程
最近开始学习linux 在安装输入法中遇到的一些问题,最终成功安装,也得益于网络上的前辈写的文章,现在将全部安装步骤以及遇到的一些问题总结如下: 基本上分三步走 1,添加fcitx的键盘输入法系统 ...
- centos6.8 静默安装 oracle 11.2.0.4
安装环境及系统要求 (下文具体参数值与路径根据自己的环境调整)操作系统:Red Hat Enterprise Linux 6 (x86) 或者CentOS 6 (x64) 数据库:Oracle ...
- Hibernate 中 简便proxool连接池配置
资源&文档 请百度云盘下载:http://pan.baidu.com/s/1hsmVVBu 提取码y966
- 用css3的cursor:zoom-in/zoom-out实现微博看图片放大镜效果
1.前言 CSS3的出现解决了很多让人头疼的问题,至少我想很多童鞋都这样认为.css3的cursor属性大家用的应该是非常的多的,我想用的比较多的像cursor:pointer;cursor:help ...
- TypeScript02 方法特性【参数种类、参数个数】、generate方法、析构表达式、箭头表达式、循环
1 方法的参数 1.1 必选参数 调用方法时实参的个数必须和定义方法时形参在数量和类型上匹配 /** * Created by Administrator on 2017/8/2 0002. */ f ...
- 我的"Hello World!"之旅
不知从何谈起,回想起三年前的自己,那会是高三:同时也是一个让无数骚年悸动的年代,那时候的我也在一个叫做“召唤师峡谷”神奇的地方闯荡了两年.那么,记忆又会回到2012年的元旦,伴随着几个好友,偷偷摸摸地 ...
- 利用百度API(js)，通过地址获取经纬度的注意事项
网上给的很多答案都是这种: http://api.map.baidu.com/geocoder?address=地址&output=输出格式类型&key=用户密钥&city=城 ...