JQuery FullCalendar(二)

时间:2022-09-01 13:01:21

前言:根据前文介绍,我们对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代码

JQuery FullCalendar(二)

可以发现,显示在网页上的内容由两个span标记显示出来的,并且第一个div标记的class含有inner字样,先来看看这个结构

JQuery FullCalendar(二)

其实这个日程事件(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">&nbsp;&nbsp;&nbsp;</div>';
element.html(evtcontent);
//通过开发者工具调试页面,发现其单元格含有data-date=2013-11-21这样的标记表示单元格
                        $("[data-date=" + startTime + "]").addClass("bg");
$("[data-date=" + startTime + "]").click(function () {
location.href = "index.aspx";
});
}
}

JQuery FullCalendar(二)

到此,不难发现要控制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(二)的更多相关文章

  1. C&num; Web Forms - Using jQuery FullCalendar

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...

  2. 微信生成二维码 只需一个网址即刻 还有jquery生成二维码

    <div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text ...

  3. jquery 生成二维码

    jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码 <!DOCTYPE html> <html> <head> <meta ch ...

  4. MVC5中使用jQuery Post 二维数组和一维数组到Action

    很久没有写了,最近在做一个MVC项目,这是我做的第一个MVC项目.之前可以说多MVC一点都不了解,今天把昨天遇到的一个问题记录下来.MVC大神就请飘过吧,跟我遇到同样问题的可以进来看看.遇到的第一个问 ...

  5. jquery&period;fullCalendar官方文档翻译&lpar;一款小巧好用的日程管理日历&comma; 可集成Google Calendar&rpar;

    1. 使用方式, 引入相关js, css后, $(‘#div_name’).fullCalendar({//options});  接受的是一个option对象 2. 普通属性 2.1. year, ...

  6. JQuery FullCalendar&lpar;一&rpar;

    FullCalendar官网:http://arshaw.com/fullcalendar FullCalendar中文API:http://blog.sina.com.cn/s/blog_9475b ...

  7. 强大的JQuery(二)--动画效果

    上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...

  8. Jquery 学习二

    一.事件编程 1.基本事件(以方法形式存在的) 基本语法: 原生Javascript代码中的事件绑定方式: DOM对象.事件 = 事件的处理程序   jQuery代码中的事件绑定方式: jQuery对 ...

  9. JQuery的二维码插件

    jquery.qrcode.js 只有能重新生成的二维码才是安全的,大牛做了插件,满足我们吃糖的需求: 用法(除了翻译git上的readme我一下子想不到还能写点什么) 引用 <script t ...

随机推荐

  1. C&num; String&period;Format格式说明

    C#格式化数值结果表 字符 说明 示例 输出 C 货币 string.Format("{0:C3}", 2) $2.000 D 十进制 string.Format("{0 ...

  2. Linq的Distinct方法的扩展

    原文地址:如何很好的使用Linq的Distinct方法 Person1: Id=1, Name="Test1" Person2: Id=1, Name="Test1&qu ...

  3. javascript的几个问题

    基础 1. 可选的分号 只有在缺少了分号就无法正确解析代码的时候,javascript,才会在一行的最后自动添加; a = 3 //自动填充 b = 4; var a a = 3 console.lo ...

  4. ElasticSearch D3

    http://www.elasticsearch.org/blog/data-visualization-elasticsearch-aggregations/

  5. Magicodes&period;Admin&period;Core开源框架总体介绍

    框架说明 Magicodes.Admin.Core框架在ABP以及ASP.NET ZERO的基础上进行了封装和完善,目前基于.NET Core 2.0+(Framework版本),由于部分组件在.NE ...

  6. Xcode&colon; Run Script 的运用&comma; 使build打包后自动&plus;1

    背景: 每次打包都要build+1处理,比较麻烦,使用 Run Script 的运用使build打包后自动+1 0. 使用xcode 添加run Script 然后就可以添加Run Script了 1 ...

  7. Centos 使用Systemctl报Error getting authority&colon; Error initializing authority&colon; Error calling StartServiceByName for org&period;freedesktop&period;PolicyKit1&colon; Timeout was reached &lpar;g-io-error-quark&comma; 24&rpar;

    在使用centos7.4 安装服务的时候报错: Error getting authority: Error initializing authority: Error calling StartSe ...

  8. 李宏毅机器学习笔记1:Regression、Error

    李宏毅老师的机器学习课程和吴恩达老师的机器学习课程都是都是ML和DL非常好的入门资料,在YouTube.网易云课堂.B站都能观看到相应的课程视频,接下来这一系列的博客我都将记录老师上课的笔记以及自己对 ...

  9. Struts2 注解模式

    相信大家一定看到了两个class中定义了一样的action,不过看类的元数据,是不同的命名空间.这里比较重要(对我来说)的是 @Action(value = "/login", r ...

  10. JavaScript面向对象编程指南(第2版)》读书笔记

    一.对象 1.1 获取属性值的方式 water = { down: false } console.log(water.down) // false console.log(water['down'] ...