FullCalendar 的学习笔记(一)

前一段时间,一个老项目需要新增一个小功能,日程表~

于是网上找了下,发现FullCalendar这个控件还不错于是就拿来用了下,下面简单介绍下我的学习笔记。

首先就是了解下FullCalendar的API

比较详细的我推荐的是

http://www.cnblogs.com/yuanxianlai/archive/2012/03/31/2427117.html

然后自己先把日历控件加载出来

记得先引用如下

<script type="text/javascript" src=‘fullcalendar/lib/jquery-1.3.2.min.js‘></script>
<script type="text/javascript" src=‘fullcalendar/lib/jquery.min.js‘></script>
<script type="text/javascript" src=‘fullcalendar/lib/jquery-ui.custom.min.js‘></script><script type="text/javascript" src=‘fullcalendar/fullcalendar.min.js‘></script>
<script type="text/javascript" src=‘calendar.js‘></script>
<link href="fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />

PS:我发布到具体的IIS服务器时,出现了加载jquery-1.3.2.min.js为定义的错误,此时可替换jquery-1.10.2.min.js 即可

$(function() {
           var date = new Date();
           var d = date.getDate();
           var m = date.getMonth();
           var y = date.getFullYear();

            $(‘#fullCalendarDemo‘).fullCalendar({                                  //初始化日历
                    header: {                     //日历最上面表示头部
                        left: ‘prev,next today‘,          //左边是 前一月/周/日,后一月/周/日  以及  回到今天按钮
                        center: ‘prevYear,title,nextYear‘,    //中间是  去年的本月/周/日  当前试图的时间   明年的本月/周/日
                        right: ‘month,agendaWeek,agendaDay‘   //切换日历显示月/周/日视图
                    },
                    monthNames: ["一月", "二月", "三月", "四月",  //设置月份名称,中英文均可
                        "五月", "六月", "七月", "八月", "九月",
                        "十月", "十一月", "十二月"
                    ],
//                    monthNamesShort: ["一月", "二月", "三月",   //设置月份的简称
//                        "四月", "五月", "六月", "七月", "八月",
//                        "九月", "十月", "十一月", "十二月"
//                    ],
//                    dayNames: ["周日", "周一", "周二", "周三",   //设置星期名称
//                        "周四", "周五", "周六"
//                    ],
                    dayNamesShort: ["周日", "周一", "周二",     //设置星期简称
                        "周三", "周四", "周五", "周六"
                    ],
                    today: ["今天"],                 //today 按钮的显示名称
                    firstDay: 0,                   //设置每星期的第一天是星期几,0 是星期日
                    buttonText: {                  //设置按钮文本
                        today: ‘今天‘,
                        month: ‘月‘,
                        week: ‘周‘,
                        day: ‘日‘,
                        prev: ‘上一月‘,
                        next: ‘下一月‘
                    },
//                   height: windowHeigth,             //设置日历高度,宽度是自适应的,不好改,windowHeight 是我计算的值
                    currentTimezone: ‘Asia/Beijing‘,       //设置时区
//                   theme: true,                  //true 时日历主题可随 jQuery ui 的主题变化
                    selectable: true,               //元素是否可以被选中
                    selectHelper: true,              //选中元素时是否显示相关信息
                    select: function(startDate, endDate,    //选中某元素的方法,startDate 事项的起始时间,endDate 事项的结束时间
                        allDay, jsEvent, view) {         // allDay 事项是否为全天事项,jsEvent 控件的内置对象,view 当前视图
                        var startD = $.fullCalendar
                            .formatDate(startDate,
                                ‘yyyy-MM-dd HH:mm:ss‘);     //formatDate 是格式化时间的方法
                        var endD = $.fullCalendar
                            .formatDate(endDate,
                                ‘yyyy-MM-dd HH:mm:ss‘);
                        //TODO      添加选中某元素时需要进行操作的方法,比如:添加会议、备注等事项
                        alert("1");
                    },
                    eventClick: function(event) {         //点击事项的方法
                        var startD = $.fullCalendar
                            .formatDate(event.start,
                                ‘yyyy-MM-dd HH:mm:ss‘);
                        var endD = $.fullCalendar
                            .formatDate(event.end,
                                ‘yyyy-MM-dd HH:mm:ss‘);
                        //TODO      添加点击某事项时需要进行操作的方法,比如:修改会议、备注等事项
                        alert("2");
                    },
                    editable: true,                 //事项是否可编辑,改变大小、拖拽等
                    eventResize: function(event, dayDelta, minuteDelta, revertFunc) {
            //事项大小改变后的方法,往往修改事项的起止时间,event 改变的事项,dayDelta 变化的天数,minuteDelta 变化的分钟数,revertFunc 回调函数
                        var startD = $.fullCalendar
                            .formatDate(event.start,
                                ‘yyyy-MM-dd HH:mm:ss‘);
                        var endD = $.fullCalendar
                            .formatDate(event.end,
                                ‘yyyy-MM-dd HH:mm:ss‘);

                        //TODO      添加改变某事项大小时需要进行操作的方法,比如:修改会议、备注等事项
                        alert("3");

                        if (!confirm("is this okay?")) {
                            revertFunc();                //如果不要改变,则将事项还原
                        }

                    },
                    eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {    //拖拽事项之后的方法,allDay 是否全天事项,其他参数同上
                        var startD = $.fullCalendar
                            .formatDate(event.start,
                                ‘yyyy-MM-dd HH:mm:ss‘);
                        var endD = $.fullCalendar
                            .formatDate(event.end,
                                ‘yyyy-MM-dd HH:mm:ss‘);

                        //TODO      添加拖拽某事项之后需要进行操作的方法,比如:修改会议、备注等事项
                        alert("4");

                        if (!confirm("is this okay?")) {
                            revertFunc();
                        }

                    },
                    events: //function(start, end, callback) { }//获取事项的数据,这里是用的 function ,可以是 array ,也可以是 json
                    [{
                    title: ‘张丽值班‘,
                    start: new Date(y, m, 1)
                    },
                    {
                    title: ‘小吴值班‘,
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                    }

                    ]
                });
        });
时间: 2024-11-08 22:59:58

FullCalendar 的学习笔记(一)的相关文章

vector 学习笔记

vector 使用练习: /**************************************** * File Name: vector.cpp * Author: sky0917 * Created Time: 2014年04月27日 11:07:33 ****************************************/ #include <iostream> #include <vector> using namespace std; int main

Caliburn.Micro学习笔记(一)----引导类和命名匹配规则

Caliburn.Micro学习笔记(一)----引导类和命名匹配规则 用了几天时间看了一下开源框架Caliburn.Micro 这是他源码的地址http://caliburnmicro.codeplex.com/ 文档也写的很详细,自己在看它的文档和代码时写了一些demo和笔记,还有它实现的原理记录一下 学习Caliburn.Micro要有MEF和MVVM的基础 先说一下他的命名规则和引导类 以后我会把Caliburn.Micro的 Actions IResult,IHandle ICondu

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

[原创]java WEB学习笔记93:Hibernate学习之路---Hibernate 缓存介绍,缓存级别,使用二级缓存的情况,二级缓存的架构集合缓存,二级缓存的并发策略,实现步骤,集合缓存,查询缓存,时间戳缓存

本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 -----------------------------------------------------------------------------------------------------------------

Activiti 学习笔记记录(三)

上一篇:Activiti 学习笔记记录(二) 导读:上一篇学习了bpmn 画图的常用图形标记.那如何用它们组成一个可用文件呢? 我们知道 bpmn 其实是一个xml 文件

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

java/android 设计模式学习笔记(14)---外观模式

这篇博客来介绍外观模式(Facade Pattern),外观模式也称为门面模式,它在开发过程中运用频率非常高,尤其是第三方 SDK 基本很大概率都会使用外观模式.通过一个外观类使得整个子系统只有一个统一的高层的接口,这样能够降低用户的使用成本,也对用户屏蔽了很多实现细节.当然,在我们的开发过程中,外观模式也是我们封装 API 的常用手段,例如网络模块.ImageLoader 模块等.其实我们在开发过程中可能已经使用过很多次外观模式,只是没有从理论层面去了解它. 转载请注明出处:http://bl

[原创]java WEB学习笔记48:其他的Servlet 监听器:域对象中属性的变更的事件监听器 (3 个),感知 Session 绑定的事件监听器(2个)

本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 ---------------------------------

java/android 设计模式学习笔记(10)---建造者模式

这篇博客我们来介绍一下建造者模式(Builder Pattern),建造者模式又被称为生成器模式,是创造性模式之一,与工厂方法模式和抽象工厂模式不同,后两者的目的是为了实现多态性,而 Builder 模式的目的则是为了将对象的构建与展示分离.Builder 模式是一步一步创建一个复杂对象的创建型模式,它允许用户在不知道内部构建细节的情况下,可以更精细地控制对象的构造流程.一个复杂的对象有大量的组成部分,比如汽车它有车轮.方向盘.发动机.以及各种各样的小零件,要将这些部件装配成一辆汽车,这个装配过