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 ...
随机推荐
- TWS日志查看
背景:记录下tws的日志查看过程,备忘 1 日志查看过程 根据企业的流水号,在日志中查询企业发送的报文: ps:期间最好将日志所在的行号进行记录,方便定位. 2017032802_2017070700 ...
- 【SignalR学习系列】2. 第一个SignalR程序
新建项目 1.使用VisualStudio 2015 新建一个Web项目 2.选择空模板 3.添加一个新的SignalR Hub Class (v2)类文件,并修改类名为ChatHub 4.修改Cha ...
- HDU6043 KazaQ's Socks
Problem Description KazaQ wears socks everyday. At the beginning, he has n pairs of socks numbered f ...
- 微信小程序-滚动消息通知效果
这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置 ...
- 11. leetcode 283. Move Zeroes
Given an array nums, write a function to move all 0's to the end of it while maintaining the relativ ...
- uncaught syntaxerror: unexpected token
今天写飞机大战游戏的js代码时出现uncaught syntaxerror: unexpected token(未捕获的语法错误: 意想不到的非法令牌错误),百度一下并没有解决我的问题...... 这 ...
- github 上传下载代码简单使用
很长时间,一直认为github很难操作,其实认真学了发现也不是很困难. 主要就3个命令 git clone 建立空间 git push 提交代码,git pull拉取代码. git clone htt ...
- 175. Combine Two Tables【LeetCode】-LEFT JON 和RIGHT JOIN，两张表关联查询-java -sql入门
Table: Person +-------------+---------+ | Column Name | Type | +-------------+---------+ | PersonId ...
- [BZOJ 1054][HAOI 2008]移动玩具 状态压缩
考试的时候一看是河南省选题,觉得会很难,有点不敢想正解.感觉是个状压.但是一看是十年前的题,那怂什么! 直接把十六个数的状态压进去,因为个数是不变的,所以状态枚举的时候只要找数目一样的转移即可.而且只 ...
- brk(), sbrk() 用法详解
brk() , sbrk() 的声明如下: #include <unistd.h> int brk(void *addr); void *sbrk(intptr_t increment); ...