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 ...
随机推荐
- JMeter学习笔记-JForum环境搭建
一.准备环境 1. Java环境安装配置(JDK+JRE+环境变量) 2. Tomcat下载安装 下载地址: 安装教程:http://jingyan.baidu.com/article/870c6fc ...
- IDEA 2017注册码破解方法（转）
进入ide主页面,help-register-license server,然后输入 http://idea.iteblog.com/key.PHP(注意:php要小写)即可~ 如下图: 点击 Act ...
- 终结 finalize()和垃圾回收(garbage collection)
1.为什么要有finalize()方法? 假定你的对象(并非使用new)获得了一块"特殊"的内存区域,由于垃圾回收器只知道释放那些经由new分配的内存,所以他不知道该如何释放该对象 ...
- dubbo源码分析（二）：超时原理以及应用场景
dubbo超时原理以及应用场景 *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: ...
- efcore 配置链接sqlserver 记录
本文将在asp.net core api 项目中使用efcore corefirst模式 简单配置链接sqlserver数据库,以及简单的数据库迁移操作 一 新建项目 1. 首先我们先用vs2017 ...
- 快捷使用Node Inspector调试NodeJS
一:介绍 NodeJS开发有很多种调试方式,比如输出Log.WebStorm自带的调试器.Node Inspector等,其中Node Inspector是比较流行和被推荐的一种. 但是Node In ...
- java 远程调用 RPC
1. 概念 RPC,全称为Remote Procedure Call,即远程过程调用,它是一个计算机通信协议.它允许像调用本地服务一样调用远程服务.它可以有不同的实现方式.如RMI(远程方法调用).H ...
- Luogu P2802 回家
题目描述 小H在一个划分成了n*m个方格的长方形封锁线上. 每次他能向上下左右四个方向移动一格(当然小H不可以静止不动), 但不能离开封锁线,否则就被打死了. 刚开始时他有满血6点,每移动一格他要消耗 ...
- MySQL中的基本知识
本文是MySQL中的一些基本知识,包括各种基本操作.数据类型和表的约束等. ps:都是自己总结.手打出来的,虽然不是什么新东西,但也勉强算原创吧.. 一.数据库 1.创建:CREATE DATABAS ...
- 经纬度坐标数据处理——基于R
ggmap w=read.csv("LA.Neighborhoods.csv") w=data.frame(w,density=w$Population/w$Area) u=w[, ...