接上一篇&。
这一篇主要讲使用fullcalendar插件如何做数据的增删改，用到了art.dialog web对话框组件，上一篇用到的webForm来展现数据，这一篇使用mvc模式来对数据进行增删改查。
1、准备工作
本人用的SQLServer2012，首先创建任务数据库&Task：&
USE [TestDemo]
SET ANSI_NULLS ON
SET QUOTED_IDENTIFIER ON
CREATE TABLE [dbo].[Task](
[ID] [nvarchar](50) NOT NULL,
[Name] [nvarchar](50) NULL,
[Contents] [nvarchar](max) NULL,
[StartDate] [datetime] NULL,
[EndDate] [datetime] NULL,
CONSTRAINT [PK_Task] PRIMARY KEY CLUSTERED
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
&创建MVC解决方案，此时mvc模式不再赘述，相信大家都会如何运用，然后把上篇文章用到的css以及js文件添加到本解决方案中。
在首页Index页面中引入文件以及添加div：(日历展现方式与之前相同)&
&link href="../../Content/css/fullcalendar.css" rel="stylesheet" /&
&link href="../../Content/css/jquery.ui.css" rel="stylesheet" /&
&link href="../../Content/css/style.default.css" rel="stylesheet" /&
&script src="../../Scripts/Plugins/jquery-1.7.min.js"&&/script&
&script src="../../Scripts/Plugins/jquery-ui-1.8.16.custom.min.js"&&/script&
&script src="../../Scripts/Plugins/fullcalendar.min.js"&&/script&
&script src="../../Scripts/Plugins/fullcalendar.js"&&/script&
&div id='calendar' style="margin-top:10margin-left:5px"&
&创建任务类：
/// &summary&
/// 任务类
/// &/summary&
class Task
public string ID { get; set; }
/// &summary&
/// 任务名称
/// &/summary&
public string Name { get; set; }
/// &summary&
/// &/summary&
public string Contents { get; set; }
/// &summary&
/// 开始时间
/// &/summary&
public DateTime? StartDate { get; set; }
/// &summary&
/// 结束时间
/// &/summary&
public DateTime? EndDate { get; set; }
2、任务查看
任务查看上篇已经介绍，不再过多的讲述，由于实现方式发生了改变所以简单的提一下，把数据表中的数据查询出来然后展现在fullcalendar上，我用ado.net来对数据进行操作，首先创建CommonDbHelper类：&
public class CommonDbHelper
#region 属性
/// &summary&
/// 数据库连接字符串
/// &/summary&
private string connectionS
public string ConntionString
return connectionS
connectionString =
#endregion
#region 构造方法
/// &summary&
/// 从配置中自动读取数据库类型及连接字符串
/// &/summary&
public CommonDbHelper()
this.connectionString = ConfigurationManager.AppSettings["ConnectionString"];
#endregion
/// &summary&
/// 执行查询语句
/// &/summary&
/// &param name="SqlString"&查询语句&/param&
/// &returns&DataTable &/returns&
public DataTable ExecuteQuery(string sqlString)
using (IDbConnection iConn = new SqlConnection(this.ConntionString))
DataSet ds = new DataSet();
System.Data.IDataAdapter iAdapter = new SqlDataAdapter(sqlString, (SqlConnection)iConn);
iAdapter.Fill(ds);
catch (System.Exception e)
throw new Exception(e.Message);
if (iConn.State != ConnectionState.Closed)
iConn.Close();
return ds.Tables[0];
&然后添加泛型类SQLHelper通过反射把查询出来的DataTable转换为list：
public class SQLHelper&Tentity& where Tentity : class,new()
/// &summary&
/// 获取所有数据
/// &/summary&
/// &returns&&/returns&
public IList&Tentity& GetData(string statement)
var dt = new CommonDbHelper().ExecuteQuery(statement);
if (dt == null || dt.Rows.Count == 0){
return null;
IList&Tentity& list = new List&Tentity&(dt.Rows.Count);
// 获得此模型的类型
Type type = typeof(Tentity);
string tempName = "";
foreach (DataRow dr in dt.Rows)
Tentity t = new Tentity();
// 获得此模型的公共属性
PropertyInfo[] propertys = t.GetType().GetProperties();
foreach (PropertyInfo pi in propertys)
// 检查DataTable是否包含此列
tempName = pi.N
if (dt.Columns.Contains(tempName))
if (!pi.CanWrite) continue;
object value = dr[tempName];
if (value != DBNull.Value)
pi.SetValue(t, value, null);
list.Add(t);
在查询所有数据时只需要这样写然后foreach循环就可以了：
SQLHelper&Task& dataHelper = new SQLHelper&Task&();
string strcom = "SELECT * FROM Task";
IList&Task& tasks = dataHelper.GetData(strcom);
3、任务的添加操作
添加页面信息，新增Edit界面：&
@model MvcApplication1.Models.Task
&script type="text/javascript"&
$(function () {
$("#start").datetimepicker({
minute: 20
$("#end").datetimepicker({
minute: 15
&form id="myForm" method="post" action=""&
&div class="aboxmanageform"&
style="width:650px"&
&td class="item_title"&
任务名称：
&td colspan="3"&
&input id="Name"
name="Name" type="text" style="width:516px"
value="@Model.Name" class="longinput" /&
&td class="item_title"&
任务内容：
&td colspan="3"&
&textarea cols="80" name="Contents" id="Contents" rows="10" style="width:516px" class="longinput"&@Model.Contents&/textarea&
&td class="item_title"&
开始时间：
&input id="start" name="StartDate" type="text" value="@Model.StartDate" class="longinput" /&
&td class="item_title"&
结束时间：
&input id="end" name="EndDate" type="text" value="@Model.EndDate" class="longinput"
&input type="hidden" name="ID" value="@Model.ID" /&
& & &在fullcalendar.js文件里&初始化calendar的方法中有dayClick方法，此方法在点击日历的时可进行自己想要的操作。我希望在点击日历的时候弹出可添加任务的对话框，在填写信息之后点击保存，把信息保存到数据库，此刻就用到了art.dialog组件（具体的API以及如何使用可登陆官网自己学习很容易掌握）&
添加art.dialog的css、js 引用：
&link href="../../Content/css/default.css" rel="stylesheet" /&
&script type="text/javascript" src="../../Scripts/Plugins/artDialog.js"&&/script&
&&&& & &在添加任务的时候需要有开始时间，结束时间。时间的选择用到的是jqueryui的日期datepicker，但是在官网提供的资料中只能选择日期，不能选择小时，分等信息，然后在网上找到了一个插件可以选择小时，分。在起始页引入文件：
&script src="../../Scripts/Plugins/jquery-ui-timepicker-addon.js"&&/script&
&在点击日历界面时弹出任务添加界面效果如下图：
&在选择日期时是这样显示的：
&是不是感觉很别扭？首先日期的月，星期都是英文展现，并且input中的格式为月、日、年显示很别扭，所以对其进行汉化处理以及格式年月日的展现我把它放到了ui.datepicker.js文件中：
jQuery(function($){
$.datepicker.regional['zh-CN'] = {
closeText: '关闭',
prevText: '<上月',
nextText: '下月>',
currentText: '今天',
monthNames: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一','二','三','四','五','六',
'七','八','九','十','十一','十二'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
dateFormat: 'yy-mm-dd', firstDay: 1,
isRTL: false};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
&& & 在填写完信息保存时用ajax，POST方法访问InsertData.ashx一般处理程序通过ado.net方式来对数据进行插入：
var SaveDatas = function () {
var name = $("#Name").val();
var contents = $("#Contents").val();
var startdatestr = $("#start").val();
var enddatestr = $("#end").val();
var //数据主键
var taskdata = { name: name, contents: contents, confshortname: 'M1', start: startdatestr, end: enddatestr };
type: "POST",
url: "../DateHandle/InsertData.ashx",
data: taskdata, //要发送的数据
success: function (data) {
//对话框里面的数据提交完成，data为操作结果
//data为主键ID
var schdata2 = { title: name, fullname: name, confshortname: 'M1', start: startdatestr, end: enddatestr, id: mainid };
$('#calendar').fullCalendar('renderEvent', schdata2, true);
$("#start").val(''); //开始时间
$("#end").val(''); //结束时间
$("#Name").val(''); //标题
可能有人注意到了红色部分，在保存成功后界面不会展现新添加的任务，所以要对其进行渲染操作。
4、任务的编辑操作
&& & &在fullcalendar.js文件里&初始化calendar的方法中有eventClick方法，此方法的用处就在于点击日历上的信息时执行自己想要的操作，在此无疑我们想要点击某个任务来进行修改，fullcalendar属性中有一个id(事件的唯一标识)，在上面添加的操作中我们已经把insert后返回的主键赋值给id，所以在点击每个任务时，可以把id传递过去进行修改操作。
& & 上面的编辑界面中我用到的实体对数据进行展现，所以在请求到Edit的Action时如果是新建操作则new 一个Task返回到界面，如果是编辑则查询数据库是否存在，如果存在则返回，Controller里的Edit方法：&
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult Edit(string id)
if (!string.IsNullOrEmpty(id))
SQLHelper&Task& dataHelper = new SQLHelper&Task&();
string str = string.Format("SELECT * FROM Task where ID ='{0}'", id);
IList&Task& task = dataHelper.GetData(str);
return PartialView(task[0]);
return PartialView(Create());
/// &summary&
/// 创建初始化数据
/// &/summary&
/// &returns&&/returns&
private static Task Create()
Task task = new Task();
task.Name = "";
task.Contents = "";
task.StartDate = null;
task.EndDate = null;
task.ID = null;
编辑界面：
在编辑完信息保存时用ajax，POST方法访问UpdateData.ashx一般处理程序通过ado.net方式来对数据进行更新：&
var SaveEditDatas = function (event) {
var startdatestr = $("#start").val(); //开始时间
var enddatestr = $("#end").val(); //结束时间
var name = $("#Name").val();
var contents = $("#Contents").val();
event.fullname =
event.start =
event.end =
var schdata = { name: name, contents: contents, start: startdatestr, end: enddatestr, id: event.id };
type: "POST",
url: "../DateHandle/UpdateData.ashx",
data: schdata, //要发送的数据
success: function (data) {
$('#calendar').fullCalendar('updateEvent', event);
同样的，红色部分也需要注意在修改完之后要通过updateEvent进行更新
4、任务的删除操作
在上面的编辑操作中有一个删除按钮，在点开任务时，点击此按钮进行删除。同样的，把主键ID传递给DeleteData.ashx一般处理程序通过ado.net方式对数据进行删除。
type: "POST",
url: "../DateHandle/DeleteData.ashx",
data: para,
success: function (data) {
$('#calendar').fullCalendar('removeEvents', event.id);
删除完之后要通过removeEvents进行删除。
& & &好了，以上就是本文章的主要内容，本文其实上周就应该写完发布的，最近有点儿忙，元旦回来后赶紧把这篇补上，这个插件就讲到这里，文章中很多代码都没有过多的处理，简单的把增删改查写了写，提供一个小小的思路，可能在您以后的工作中会用到此插件，如果能帮助到您，我将倍感荣幸，如有不足，请多多指正，在下感激不尽。。。
最后一定要分享源码：&访问密码 163b
阅读(...) 评论()2014年5月 企业软件大版内专家分月排行榜第一2013年2月 企业开发大版内专家分月排行榜第一
2015年1月 企业软件大版内专家分月排行榜第二2013年10月 企业软件大版内专家分月排行榜第二2013年5月 企业开发大版内专家分月排行榜第二2013年4月 企业开发大版内专家分月排行榜第二2013年3月 企业开发大版内专家分月排行榜第二
2014年5月 企业软件大版内专家分月排行榜第一2013年2月 企业开发大版内专家分月排行榜第一
2015年1月 企业软件大版内专家分月排行榜第二2013年10月 企业软件大版内专家分月排行榜第二2013年5月 企业开发大版内专家分月排行榜第二2013年4月 企业开发大版内专家分月排行榜第二2013年3月 企业开发大版内专家分月排行榜第二
本帖子已过去太久远了，不再提供回复功能。扫描二维码用手机看文章扫描二维码用手机看文章jquery日历插件FullCalendar使用技巧-jquery-网页制作-壹聚教程网jquery日历插件FullCalendar使用技巧
FullCalendar是一款基于jquery的日历控件,它有着很强大的功能，下面我来给大家介绍一下FullCalendar使用技巧吧，希望此方法对各位有帮助呀。
官方网站：
/fullcalendar/
英文文档：
/fullcalendar/docs/
1. 下载压缩包fullcalendar-1.6.3.zip解压
2. 在html页面中导入资源
&script type=&text/& src=&js/-1.10.2.min.js&&&/script&
&script type=&text/javascript& src=&js/jquery-ui-1.10.3.custom.min.js&&&/script&
&script type=&text/javascript& src=&js/fullcalendar.min.js&&&/script&
几点说明：
FullCalendar需要jquery，如果项目已经引入了jquery，此处不需要重复导入
如果要在日历中使用鼠标拖拽功能，需要导入jquery-ui
压缩包中包含的jquery-ui文件仅包含了jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.draggable.js, jquery.ui.resizable.js的功能；如果项目已经引入了包含以上功能的jquery-ui文件，此处不可重复导入，重复导入会造成jquery-ui的其它功能失效
3. 调用插件
$(function(){
&$('#calenderDemo').fullCalendar({});
配置日历表头
$('#calenderDemo').fullCalendar({
&&left: 'prev,next today',
&&center: 'title',
&&right: 'month,agendaWeek,agendaDay'
left、center、right参数对应页面表头三个位置（左、中、右），参数值多个之间可以使用逗号或者空格隔开，可选值范围如下：
title & 当前日期文本
prev & 向前翻按钮
next & 向后翻按钮
prevYear & 前一年按钮
nextYear & 后一年按钮
today & 今天按钮
month & 月视图
basicWeek & 周视图
basicDay & 日视图
agendaWeek & 带小时周视图
agendaDay & 带小时日视图
配置中文界面
$('#calenderDemo').fullCalendar({
&buttonText: {
&&today: '今天',
&&month: '月',
&&week: '周',
&&day: '天'
&allDayText: '全天',
&monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
&monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'],
&dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
&dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
日程对象event
日历中显示的日程事件
title: &some name&,
start: &&,
基本参数说明
title & 事件名称，显示在日程中
start & 日程开始时间
end & 日程结束时间
startEditable
durationEditable
backgroundColor
borderColor
除此以外，可以根据功能需要在event对象中添加自定义的属性
$('#calenderDemo').fullCalendar({
&events:[]
添加参数events: array/json string/function
可以为数组：
&&title: 'All Day Event',
&&start: new Date()
&&title: 'Long Event',
&&start: new Date(),
&&end: new Date(new Date().getTime()+)
可以通过ajax加载json数据：
&url: '/myfeed.php',
&type: 'POST',
&&custom_param1: 'something',
&&custom_param2: 'somethingelse'
&error: function() {
&&alert('there was an error while fetching events!');
&color: 'yellow',&& // a non-ajax option
&textColor: 'black' // a non-ajax option
也可以是一个function：
events: function(start, end, callback) {
&// 取得日程数据后回调
&callback(events);
通过点击日历单元格，添加新日程
var calendar = $('#calenderDemo').fullCalendar({
&dayClick: function(date, allDay, jsEvent, view) {
&&// 此处可以进行弹窗、后台通信等处理
&&// 本例仅在日历中添加一个新日程
&&calendar.fullCalendar('renderEvent',
&&&&title: '日程' + new Date().getTime(),
&&&&start: date,
&&&&allDay: allDay
date & 当前日期，在agendaWeek、agendaDay视图点击时包含时间
allDay & 在agendaWeek、agendaDay视图点击时为false，其它情况为true
jsEvent & 原生javascript事件
view & 当前视图对象
点击当前显示的日程，修改日程
var calendar = $('#calenderDemo').fullCalendar({
&eventClick : function(event, jsEvent, view) {
&&// 此处可添加修改日程的代码
&&var red = Math.round(255 * Math.random());
&&var green = Math.round(255 * Math.random());
&&var blue = Math.round(255 * Math.random());
&&$(this).css('background-color', 'rgb(' + red + ',' + green + ',' + blue + ')');
event参数为当前点击的日程
鼠标拖动改变日程时间范围
使用鼠标在页面上直接拖动改变日程时间范围，需要jquery-ui的拖拽功能，初始化时需配置参数editable为true来启用拖动功能。
var calendar = $('#calenderDemo').fullCalendar({
&editable : true,
&eventDrop : function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
&&// 拖动某个日程到新位置时，日程时间改变，此处可做相关处理
dayDelta & 保存了这次拖动导致该日程事件移动了多少天, 向前为正数, 向后为负数
minuteDelta & 保存了这次拖动导致该日程事件移动了多少分钟, 向前为正数, 向后为负数，该值只有在agenda view下有效
allDay & 如果在month view下移动, 或在agenda view下移动到all-day区域, 则allDay为true, 移动到agenda view的其他区域则为false
revertFunc & 调用该方法, 可以将刚才的拖动恢复到原状。这个方法多用于ajax的提交, 移动之后, 提交数据到后台, 如果后台更新失败, 根据返回消息, 调用这个方法, 可以使页面回复原状
var calendar = $('#calenderDemo').fullCalendar({
&editable : true,
&eventResize : function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
&&// 改变某个日程大小，日程结束时间改变，此处可做相关处理
参数与eventDrop回调类似，以下仅说明不同之处：
dayDelta & 保存了日程结束时间变化了多少天，向前为正数, 向后为负数
minuteDelta -保存了日程结束时间变化了多少分钟, 向前为正数, 向后为负数，该值只有在agenda view下有效，其它情况为0
鼠标划过选择一段日期
类似在资源管理器中选择多个文件的操作，使用鼠标在页面上选择一段日期进行操作，例如添加日程，需要配置able参数为true
在一个单元格上，鼠标划过选择事件select和鼠标点击单元格事件dayClick会被同时触发
var calendar = $('#calenderDemo').fullCalendar({
&selectable : true,
&select : function(startDate, endDate, allDay, jsEvent, view) {
&&// 选中一段日期，此处可做相关处理
&&// 处理完成后，取消选中状态
&&calendar.fullCalendar('unselect');
startDate & 开始日期
endDate & 结束日期，当allDay为true时，结束日期包含最后一天
上一页： &&&&&下一页：相关内容