前言:根据前文介绍,我们对JQuery FullCalendar如何从后台取数据有了初步了解,已经实现最基本的要求。下面介绍一下FullCalendar的事件
$('#calendar').fullCalendar("getView")的属性
name : month 当前视图类型,月(month),周(agendaWeek),日(agendaDay)
title : 2013年11月 当前视图显示的年月
start : 2013-11-01 00:00:00 当前视图该月份(星期)的第一天
end : 2013-12-01 00:00:00 当前视图该月份(星期)的最后一天+1
visStart : 2013-10-27 00:00:00 当前视图的第一天日期
visEnd : 2013-12-08 00:00:00 当前视图的最后一天日期
$('#calendar').fullCalendar("getDate")
getDate : 2013-11-21 08:06:20 当天日期详细
一、dayClick事件
dayClick,当单击日历中的某一天时,触发callback
date : 2013-11-19 00:00:00 点击的day的时间
allDay : true 是否为全天事件
jsEvent : [object Object]
view : [object Object]
dayClick: function (date, allDay, jsEvent, view) {
if
($(this).hasClass("bg")) {
$(
this
).removeClass("bg");
//设置点击日期的背景颜色
}
else
{
$(
this
).addClass("bg");
}
alert("name :" + $('#calendar').fullCalendar("getView").name);
alert("getDate :" + $.fullCalendar.formatDate($('#calendar').fullCalendar("getDate"), "yyyy-MM-dd HH:mm:ss") );
alert("date :" + $.fullCalendar.formatDate(date, "yyyy-MM-dd HH:mm:ss") ); //点击的day的时间
alert("allDay :" + allDay );
alert("jsEvent :" + jsEvent);
alert("view :" + view);
}
二、eventClick事件
eventClick,当点击日历中的某一日程(事件)时,触发此操作
calEvent.id:返回当前点击对象的id(id值和数据库的一致)
calEvent.title:返回当前点击对象的title(title值和数据库的一致)
eventClick: function (calEvent, jsEvent, view) {
alert('calEvent.id: ' + calEvent.id);
alert('calEvent.title: ' + calEvent.title);
alert('calEvent.start: ' + calEvent.start);
$(this).css('border-color', 'red');
}
三、eventAfterRender
当日程事件被渲染后触发
event: 返回渲染对象的数据
element: 包含渲染对象的HTML内容,可以对其进行重写
view:返回当前视图
通过打印element.html()我们可以观察其内容,也可以用开发者工具查看对应的html代码
可以发现,显示在网页上的内容由两个span标记显示出来的,并且第一个div标记的class含有inner字样,先来看看这个结构
其实这个日程事件(fc-event-inner)就渲染在class名为fc-event-container的div中,并且和element.html()内容是吻合的,
于是猜测修改此处代码可以修改前台页面的显示,替代element.html()里面的元素,并且为日历表单元格添加背景颜色和点击事件
eventAfterRender: function (event, element, view) {
if (view.name == "month") {
var startTime = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd");
var evtcontent = '<div class="fc-event-inner">';
evtcontent = evtcontent + '<span class="fc-event-time">' + startTime + '</span>';
evtcontent = evtcontent + '<span class="fc-event-title">' + event.title + '</span>';
evtcontent = evtcontent + '</div>';
//如果不加入下面的html,页面日程事件可以拖动,无法改变大小
evtcontent = evtcontent + '<div class="ui-resizable-handle ui-resizable-e"> </div>';
element.html(evtcontent);
//通过开发者工具调试页面,发现其单元格含有data-date=2013-11-21这样的标记表示单元格
$("[data-date=" + startTime + "]").addClass("bg");
$("[data-date=" + startTime + "]").click(function () {
location.href = "index.aspx";
});
}
}
到此,不难发现要控制FullCalendar页面样式是件很简单的事情了,因为我们掌握了它的结构,可以用开发者工具详细研究,通过CSS或者其他方式控制样式
四、eventDrop,eventResize
这是一个很酷的事件,拖动日期事件的时间(start,end同时改变相同的timespan),改变日程事件的结束时间(改变end的时间)
前提是editable:true(默认值也是true)
event.id:返回当前日期的ID值,对应数据库的ID
dayDelta:保存日期向前或向后移动了多少天
minuteDelta:这个值只有在agenda视图有效,移动的时间
eventDrop: function (event, dayDelta, minuteDelta,allDay) {
$.post("json.ashx?action=move", { "event": event.id, "dayDelta": dayDelta, "minuteDelta": minuteDelta }, function (data) { });
},
eventResize: function (event, dayDelta, minuteDelta,allDay) {
$.post("json.ashx?action=resize", { "event": event.id, "dayDelta": dayDelta, "minuteDelta": minuteDelta }, function (data) { });
}
在后台,我们简单处理一下递交过来的数据
else if (action == "move")
{
int dayDelta = int.Parse(context.Request["dayDelta"]);
int minuteDelta = int.Parse(context.Request["minuteDelta"]);
int id = int.Parse(context.Request["eventid"]);
AddNewsDataContext db = new AddNewsDataContext();
var res = db.calendar.Single(b => b.Id == id);
res.start = res.start.Value.AddDays(dayDelta);
res.end = res.end.Value.AddDays(dayDelta);
res.start = res.start.Value.AddMinutes (minuteDelta);
res.end = res.end.Value.AddMinutes(minuteDelta);
db.SubmitChanges();
}
else if (action == "resize")
{
int dayDelta = int.Parse(context.Request["dayDelta"]);
int id = int.Parse(context.Request["eventid"]);
int minuteDelta = int.Parse(context.Request["minuteDelta"]);
AddNewsDataContext db = new AddNewsDataContext();
var res = db.calendar.Single(b => b.Id == id);
res.end = res.end.Value.AddDays(dayDelta);
res.end = res.end.Value.AddMinutes(minuteDelta);
db.SubmitChanges();
}
JQuery FullCalendar(二)的更多相关文章
-
C# Web Forms - Using jQuery FullCalendar
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...
-
微信生成二维码 只需一个网址即刻 还有jquery生成二维码
<div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text ...
-
jquery 生成二维码
jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码 <!DOCTYPE html> <html> <head> <meta ch ...
-
MVC5中使用jQuery Post 二维数组和一维数组到Action
很久没有写了,最近在做一个MVC项目,这是我做的第一个MVC项目.之前可以说多MVC一点都不了解,今天把昨天遇到的一个问题记录下来.MVC大神就请飘过吧,跟我遇到同样问题的可以进来看看.遇到的第一个问 ...
-
jquery.fullCalendar官方文档翻译(一款小巧好用的日程管理日历, 可集成Google Calendar)
1. 使用方式, 引入相关js, css后, $(‘#div_name’).fullCalendar({//options}); 接受的是一个option对象 2. 普通属性 2.1. year, ...
-
JQuery FullCalendar(一)
FullCalendar官网:http://arshaw.com/fullcalendar FullCalendar中文API:http://blog.sina.com.cn/s/blog_9475b ...
-
强大的JQuery(二)--动画效果
上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...
-
Jquery 学习二
一.事件编程 1.基本事件(以方法形式存在的) 基本语法: 原生Javascript代码中的事件绑定方式: DOM对象.事件 = 事件的处理程序 jQuery代码中的事件绑定方式: jQuery对 ...
-
JQuery的二维码插件
jquery.qrcode.js 只有能重新生成的二维码才是安全的,大牛做了插件,满足我们吃糖的需求: 用法(除了翻译git上的readme我一下子想不到还能写点什么) 引用 <script t ...
随机推荐
-
C# String.Format格式说明
C#格式化数值结果表 字符 说明 示例 输出 C 货币 string.Format("{0:C3}", 2) $2.000 D 十进制 string.Format("{0 ...
-
Linq的Distinct方法的扩展
原文地址:如何很好的使用Linq的Distinct方法 Person1: Id=1, Name="Test1" Person2: Id=1, Name="Test1&qu ...
-
javascript的几个问题
基础 1. 可选的分号 只有在缺少了分号就无法正确解析代码的时候,javascript,才会在一行的最后自动添加; a = 3 //自动填充 b = 4; var a a = 3 console.lo ...
-
ElasticSearch D3
http://www.elasticsearch.org/blog/data-visualization-elasticsearch-aggregations/
-
Magicodes.Admin.Core开源框架总体介绍
框架说明 Magicodes.Admin.Core框架在ABP以及ASP.NET ZERO的基础上进行了封装和完善,目前基于.NET Core 2.0+(Framework版本),由于部分组件在.NE ...
-
Xcode: Run Script 的运用, 使build打包后自动+1
背景: 每次打包都要build+1处理,比较麻烦,使用 Run Script 的运用使build打包后自动+1 0. 使用xcode 添加run Script 然后就可以添加Run Script了 1 ...
-
Centos 使用Systemctl报Error getting authority: Error initializing authority: Error calling StartServiceByName for org.freedesktop.PolicyKit1: Timeout was reached (g-io-error-quark, 24)
在使用centos7.4 安装服务的时候报错: Error getting authority: Error initializing authority: Error calling StartSe ...
-
李宏毅机器学习笔记1:Regression、Error
李宏毅老师的机器学习课程和吴恩达老师的机器学习课程都是都是ML和DL非常好的入门资料,在YouTube.网易云课堂.B站都能观看到相应的课程视频,接下来这一系列的博客我都将记录老师上课的笔记以及自己对 ...
-
Struts2 注解模式
相信大家一定看到了两个class中定义了一样的action,不过看类的元数据,是不同的命名空间.这里比较重要(对我来说)的是 @Action(value = "/login", r ...
-
JavaScript面向对象编程指南(第2版)》读书笔记
一.对象 1.1 获取属性值的方式 water = { down: false } console.log(water.down) // false console.log(water['down'] ...