`
yidongkaifa
  • 浏览: 4093028 次
文章分类
社区版块
存档分类
最新评论

Jquery 日程安排 fullcalender 的使用

 
阅读更多

最近项目要用到日程管理，网上搜索了一下，先一下效果图：

点击每个日程事件的效果图，如下：

其他的 不多说了，上源代码吧：

1,、Javascript代码：

<link href="Styles/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <link rel='stylesheet' type='text/css' href="cupertino/theme.css" />
    <link rel='stylesheet' type='text/css' href="fullcalendar/fullcalendar.css" />
    <link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css'
        media='print' />
    <script type='text/javascript' src="Scripts/jquery-1.7.1.min.js"></script>
    <script type='text/javascript' src='Scripts/jquery-ui-1.8.17.custom.min.js'></script>
    <script type='text/javascript' src='fullcalendar/fullcalendar.min.js'></script>
    <script src="Scripts/jquery.query-2.1.7.js" type="text/javascript"></script>
    <script src="Scripts/jquery.autocomplete.min.js" type="text/javascript"></script>
     
    <script type='text/javascript'>
        var _allDay;
        $(document).ready(function () {

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

            var calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'prevYear,title,nextYear',
                    right: 'month,agendaWeek,agendaDay'
                },
                monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
                dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
                today: ["今天"],
                firstDay: 1,
                buttonText: {
                    today: '今天',
                    month: '月',
                    week: '周',
                    day: '日',
                    prev: '上一月',
                    next: '下一月'
                },
                currentTimezone: 'Asia/Beijing',
                theme: true,
                selectable: true,
                selectHelper: true,
                select: function (startDate, endDate, allDay, jsEvent, view) {
                    _allDay = allDay;
                    var startD = $.fullCalendar.formatDate(startDate, 'yyyy-MM-dd HH:mm:ss');
                    var endD = $.fullCalendar.formatDate(endDate, 'yyyy-MM-dd HH:mm:ss');
                    popupDiv('ObjBox', '事件添加', startD, endD, allDay, "add", "");
                    //alert(startDate + "|" + window.event.x);
                },
                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');
                    popupDiv('ObjBox', '事件编辑', startD, endD, event.allDay, "modify", event);
                },
                editable: true,
                events: 'handeler/CustomerVisitHandeler.ashx?Flag=search&EmployeeID=' + $.query.get('EmployeeID')

            });

        });
    

    </script>


2、html代码

        <style type='text/css'>
        body
        {
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande" ,Helvetica,Arial,Verdana,sans-serif;
        }
        
        #calendar
        {
            width: 100%;
            margin: 0 auto;
        }
        .pop-box
        {
            z-index: 9999;
            margin-bottom: fd3px;
            display: none;
            position: absolute; /*background: #ffffff;*/
            border: none;
        }
        .finishEvent{background:#f9f9f9}
        .inputNull{border:1px solid red;}
        .login-text{ height:24px; width:200px; border:1px solid #e9e9e9; background:#f9f9f9; font-size:15px; padding-left:5px; vertical-align:middle;}
        .login-text-focus{ border:1px solid #E6BF73;}
        .panel-c-l td{ padding:4px; padding-left:0px;}
        .login-text-m{ height:60px; width:200px; border:1px solid #e9e9e9; background:#f9f9f9; font-size:15px; padding-left:5px;}
    </style>
</head>
<body>
    <form runat="server" id="calenderForm">
    <div id='calendar'>
    </div>
    <div id="ObjBox" class="pop-box">
        <table style='-moz-user-select: none;' border='0' cellpadding='0' cellspacing='0'
            width='300px'>
            <tr id="_Move_tr_" style='cursor: move;'>
                <td width='13' height='33' style="background-image: url(images/dialog_lt.png) !important;
                    background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_lt.png', sizingMethod='crop');">
                    <div style='width: 13px;'>
                    </div>
                </td>
                <td height='33' style="background-image: url(images/dialog_ct.png) !important; background-image: none;
                    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_ct.png', sizingMethod='crop');">
                    <div style="float: left; font-weight: bold; color: #FFFFFF; padding: 9px 0 0 4px;">
                        <img src="images/icon_dialog.gif" align="absmiddle"><a id="PopTitle"></a></div>
                    <div id='_CloseBtn_1' style="position: relative; cursor: pointer; float: right; margin: 5px 0 0;
                        _margin: 4px 0 0; height: 17px; width: 28px; background-image: url(images/dialog_closebtn.gif)"
                        onmouseover="this.style.backgroundImage='url(images/dialog_closebtn_over.gif)'"
                        onmouseout="this.style.backgroundImage='url(images/dialog_closebtn.gif)'" drag='false'>
                    </div>
                </td>
                <td width='13' height='33' style="background-image: url(images/dialog_rt.png) !important;
                    background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_rt.png', sizingMethod='crop');">
                    <div style="width: 13px;">
                    </div>
                </td>

            </tr>
            <tr>
                <td width='13' style="background-image: url(images/dialog_mlm.png) !important; background-image: none;
                    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_mlm.png', sizingMethod='crop');">
                </td>
                <td align='center' valign='top'>
                    <table width='100%' style="height: 100%;" border='0' cellpadding='0' cellspacing='0'
                        bgcolor='#FFFFFF'>
                        <tr id='_MessageRow_1' style='display: none'>
                            <td height='50' valign='top'>
                                <table id='_MessageTable_1'  width='100%' border='0' cellspacing='0' cellpadding='8'
                                    style="background: #EAECE9 url(images/dialog_bg.jpg) no-repeat right top;">
                                    <tr>
                                        <td width='25' height='50' align='right'>
                                            <img alt="close" id='_MessageIcon_1' src='images/window.gif' width='32' height='32'>
                                        </td>
                                        <td align='left' style='line-height: 16px;'>
                                            <h5 class='fb' id='_MessageTitle_1'>
                                                </h5>
                                            <div id='_Message_1'>
                                                </div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td align='center' valign='top'>
                               <div class="panel-c-l" Customer_Code="-1" Employee_ID="-1">
                                 <table cellpadding="0" cellspacing="0">
                        <tbody>
                        <tr>
                             <td colspan="2" style=" height:3px;"></td>
                            </tr> 
                         <tr>
                             <td style=" padding:0px; text-align:right;" >客户：</td><td align="left"><input type="text"   id="txtCustomerName" class="login-text" /></td>
                            </tr> 
                            <tr>
                            <td style=" padding:0px; text-align:right;">开始：</td><td align="left"><input type="text"  id="txtStartTime" class="login-text" /></td>
                            </tr>
                            <tr>
                            <td style=" padding:0px; text-align:right;">结束：</td><td align="left"><input type="text"  id="txtEndTime" class="login-text" /></td>
                            </tr> 
                             <tr>
                            <td style=" padding:0px; text-align:right; vertical-align:middle;">描述：</td><td align="left"><asp:TextBox runat="server" ID="txtDescrible"  CssClass="login-text-m" TextMode="MultiLine"></asp:TextBox></td>
                            </tr> 
                            <tr>
                             <td colspan="2" style=" height:3px;"></td>
                            </tr> 
                        </tbody>
                    </table>
                    </div>
                            </td>
                        </tr>
                        <tr id='_ButtonRow_1'>
                            <td height='36'>
                                <div id='_DialogButtons_1' style='text-align: center; border-top: #dadee5 1px solid;
                                    padding: 8px 20px; background-color: #f6f6f6;'>
                                    <input id='_ButtonOK_1' type='button' value='确 定' />
                                    <input id='_ButtonCancel_1' type='button' value='取 消' />
                                </div>
                                <div id='_DialogButton_2' style='text-align: center; border-top: #dadee5 1px solid; display:none;
                                    padding: 8px 20px; background-color: #f6f6f6;'>
                                    <input id='_Button_delete_' type='button' value='删 除' />
                                    <input id='_Button_modify_' type='button' value='修 改' />
                                    <input id='_Button_Cancel_2' type='button' value='取 消' />
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
                <td width='13' style="background-image: url(images/dialog_mrm.png) !important; background-image: none;
                    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_mrm.png', sizingMethod='crop');">
                </td>
            </tr>
            <tr>
                <td width='13' height='13' style="background-image: url(images/dialog_lb.png) !important;
                    background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_lb.png', sizingMethod='crop');">
                </td>
                <td style="background-image: url(images/dialog_cb.png) !important; background-image: none;
                    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_cb.png', sizingMethod='crop');">
                </td>
                <td width='13' height='13' style="background-image: url(images/dialog_rb.png) !important;
                    background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_rb.png', sizingMethod='crop');">
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

3、javascript代码：

<script type="text/javascript">  
    function popupDiv(div_id, title, Tstart, Tend, TallDay, eType, event) {
        var div_obj = $("#" + div_id);
        $("#PopTitle").html(title);       
        $("#txtStartTime").val(Tstart);
        $("#txtEndTime").val(Tend);
        $("#txtCustomerName").css("border", "1px solid #e9e9e9");
        if (eType == "add") {
            $("#txtCustomerName").val("");
            $("#txtDescrible").val("");
            $(".panel-c-l").attr("Customer_Code", "-1");
            $("#_DialogButtons_1").css("display", "block");
            $("#_DialogButton_2").css("display", "none");
        } else {
            $("#txtCustomerName").val(event.title);
            $("#_DialogButtons_1").css("display", "none");
            $("#_DialogButton_2").css("display", "block");
            $("#txtDescrible").val(event.VisitDescrib);
        }
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var popupHeight = div_obj.height();
        var popupWidth = div_obj.width();
        div_obj.css({ "position": "absolute" })
    .animate({ left: windowWidth / 2 - popupWidth / 2, top: windowHeight / 2 - popupHeight / 2, opacity: "show" }, "show");

    }
    $("#_ButtonOK_1").click(function () {
        if ($("#txtCustomerName").val() == "" || $(".panel-c-l").attr("Customer_Code")=="-1") {
            $("#txtCustomerName").css("border", "1px solid red");
            return;
        }
        var calEvent = {
            title: $("#txtCustomerName").val(),
            start: $("#txtStartTime").val(),
            end: $("#txtEndTime").val(),
            allDay: _allDay
        };
        $('#calendar').fullCalendar('renderEvent', calEvent, true);
        hideDiv('ObjBox');
        $.get(
        'handeler/CustomerVisitHandeler.ashx?Flag=new',
        {
            "CustomerID": $(".panel-c-l").attr("Customer_Code"),
            "EmployeeID": $(".panel-c-l").attr("Employee_ID"),
            "VisitTypeID": '0',
            "VisitDescrib": $("#txtDescrible").val(),
            "VisitBeginTime": $("#txtStartTime").val(),
            "VisitEndTime": $("#txtEndTime").val(),
            "AllDayEvent":_allDay
        },
        function (data) {
            alert(data);
        },
        'json'
        );
    });
    $("#_CloseBtn_1").click(function () {
        hideDiv('ObjBox');
    });
    $("#_Button_Cancel_2").click(function () {
        hideDiv('ObjBox');
    });
    $("#_ButtonCancel_1").click(function () {
        hideDiv('ObjBox');
    });
    function hideDiv(div_id) {

        $("#" + div_id).animate({ left: 0, top: 0, opacity: "hide" }, "slow"); //关闭弹出的DIV
    }
</script>
<script type="text/javascript">
         var Customer;
         var option = {
             max: 10,
             width: 200,
             minChars: 1,
             autoFill: false,
             scroll: false,
             matchContains: true,
             delay: 100,
             selectFirst: false,
             formatItem: function (row, rowNum, rowCount, searchItem) {
                 // return row.CustomerName || row.CustomerPY;
                 return "<table><tr><td align='left'>" + row.CustomerName + "</td></tr></table>";

             },
             formatMatch: function (row, rowNum, rowCount) {
                 return row.CustomerName;
             },
             formatResult: function (row, rowNum, rowCount) {
                 return row.CustomerName;
             }
         };

         function initAutoComplete(data) {
             Customer = data;
             $("#txtCustomerName").autocomplete(Customer, option);
             $("#txtCustomerName").result(function (event, data, formatted) {
                 //alert(data.CustomerCode);
                 $(".panel-c-l").attr("Customer_Code", data.CustomerID);
                 //alert($(".panel-c-l").attr("Customer_Code"));
             });
         }

         $(function () {
             $.getJSON("handeler/CustomerHandler.ashx", null, initAutoComplete);
         })
</script>
<script type="text/javascript">  
    var bool = false;
    var offsetX = 0;
    var offsetY = 0;
    $('document').ready(function() {
        $("#_Move_tr_").mousedown(function (event) {
            bool = true;
            offsetX = event.offsetX ? event.offsetX : event.layerX;
            offsetY = event.offsetY ? event.offsetY : event.layerY;
            $("#_Move_tr_").css('cursor', 'move');
        })
        .mouseup(function() {
            bool = false;
        })
        $(document).mousemove(function(event) {
            if (!bool) {
                return;
            }
            else {
                var x = event.clientX - offsetX;
                var y = event.clientY - offsetY;
                $("#ObjBox").css("position", "absolute");
                $("#ObjBox").css("left", x);
                $("#ObjBox").css("top", y);
            }
        })
    });
</script>
<script type="text/javascript">
    var Calender_View;
    function Remove_Events() {        
        if (jQuery('#calendar').fullCalendar('getView').name == Calender_View) {
            //alert(Calender_View);
            $("#calendar").fullCalendar('removeEvents');
        } 
    }
    $(document).ready(function () {
        Calender_View = jQuery('#calendar').fullCalendar('getView').name;
        $(".panel-c-l").attr("Employee_ID", $.query.get('EmployeeID'));
        jQuery('.fc-button-prev').bind('click', Remove_Events);
        jQuery('.fc-button-next').bind('click', Remove_Events);
        jQuery('.fc-button-today').bind('click', Remove_Events);   

    });
</script>


代码就这么多。。哈哈！

下面是fullcalender的中文API：

1.与google日历连接，别忘记加入<script type='text/javascript' src='js/gcal.js'/>

events: $.fullCalendar.gcalFeed
("http://www.google.com/calendar/feeds/xuqi86@gmail.com/private-660ae86cc26345cff3430480e8eea4bb/basic",
{
className:'gcal-event',
editable:true,
currentTimezone:'Asia/Shanghai'
}
)

2.表头信息
agenda带有具体的时间格子
month,basicWeek,basicDay,agendaWeek,agendaDay 是5种不同的视图
空格和,的区别

header:{
left: 'month,basicWeek,basicDay,agendaWeek,agendaDay',
center: 'title',
right: 'prevYear,prev,today,next,nextYear'
}

3.是否使用 jquery的主题(我用的是start主题)
<link type="text/css" href="css/start/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type='text/javascript' src='js/jquery.js'>

theme:true

4.
buttonText:{
prev: '昨天',
next: '明天',
prevYear: '去年',
nextYear: '明年',
today: '今天',
month: '月',
week: '周',
day: '日'
}

5.每周的第一天是哪天
Sunday=0, Monday=1, Tuesday=2, etc.

firstDay:1

6.日期从右向左显示...不知道什么时候会这么用
isRTL:false

7.是否显示周末
weekends:true

8.在月视图里显示周的模式，因为可能每月周数不同，所以月视图高度不一定，注意引号
fixed 固定显示6周高，高度永远保持不变
liquid 不固定周数，周高度可变化
variable 不固定周数，但高度固定

weekMode:'fixed'

9.日历高度,包括表头
height: 850
内容高度，不包括表头
contentHeight: 600

10.单元格宽与高度的比值
注意：此属性不能与日历高度同时存在

aspectRatio: 1.35

11.切换视图的时候要执行的操作
view是一个对象，后面将说道具体的属性

viewDisplay:function(view){}

12.窗口大小变化时执行的操作
windowResize: function(view){}

13.把日历绑定到一个id的东西上
$('#id').fullCalendar('render');

14.销毁id日历
把日历回复到初始化前，删除了所有元素，时间，和初始化数据
$('#id').fullCalendar('destroy');

15.默认显示的视图，注意引号
defaultView:'month'

16.view对象的属性
name: 包括month,basicWeek,basicDay,agendaWeek,agendaDay
title: 标题内容(例如"September 2009" or "Sep 7 - 13 2009")
start:Date类型, 该view下的第一天.
end:Date类型, 该view下的最后一天. 由于是一个闭合的值, 所以, 比如在month view下, 10月这个月份, 那么end对应的应该是11月的第一天.
visStart:Date类型. 在该view下第一个可以访问的day. month view下, 该值是当月的第一天, week view下, 则通常和start一致.
visEnd: Date类型, 最后一个可访问的day

17.集中设定初始化值
可以设置的属性有 dragOpacity, titleFormat, columnFormat, and timeFormat
被应用的视图有
{
month: // month view
week: // basicWeek & agendaWeek views
day: // basicDay & agendaDay views

agenda: // agendaDay & agendaWeek views
agendaDay: // agendaDay view
agendaWeek: // agendaWeek view

basic: // basicWeek & basicDay views
basicWeek: // basicWeek view
basicDay: // basicDay view

'': // (an empty string) when no other properties match
}

18.取得视图对象
.fullCalendar('getView')->View Object

var view = $('#calendar').fullCalendar('getView');
alert("The view's title is " + view.title);

19.改变当前视图
.fullCalendar('changeView',viewName)

20.20里以下属性都是在agenda视图里起作用的
在agenda开头的视图里，是否显示最上面all-day那一栏
allDaySlot:true

默认的文字:
allDayText:'今天的任务'

左边那一列时间的格式:
axisFormat:'h(:mm)tt'
()表示整点就不显示里面的内容

支持的格式化占位符
1. s: 秒
2. ss: 秒, 两位
3. m: 分钟
4. mm: 分钟, 两位
5. h: 小时, 12小时制
6. hh: 小时, 12小时制, 两位
7. H: 小时, 24小时制
8. HH: 小时, 24小时制, 两位
9. d: 日期数字
10. dd: 日期数字, 两位
11. ddd: 日期名称, 缩写
12. dddd: 日期名称, 全名
13. M: 月份数字
14. MM: 月份数字, 两位
15. MMM: 月份名称, 缩写
16. MMMM: 月份名称, 全名
17. yy: 两位的年份
18. yyyy: 4位的年份
19. t: 上下午加 a或者p
20. tt: 上下午加am或pm
21. T: 上下午加A 或者P
22. TT: 上下午加AM或PM
23. u: ISO8601格式
24. S: 给日期加上st, nd, rd, th等后缀, 表明是第几天

每行的时间间隔
slotMinutes:10

滚动条滚动到得起始时间
firstHour: 7

每天从几点起开始显示
minTime:7
minTime:'7:30'
如果加上了分钟需要设置时间间隔

每天显示到几点结束
maxTime:24
maxTime:'23:10'

事件默认的时间执行长度
defaultEventMinutes:120
此时，如果事件对象没有指定执行多长时间，则默认执行两个小时，后面将说到事件对象

21.当前日期
year: 必须是4位数字，如果不指定，则是当前年
month: 当前月，从0开始，如果当前年和月都未指定，则月显示为1月
date:日期的一个月，这个属性只和周视图和日视图有关，如果没指定，并且年月也没有指定，则显示一个月的第一天

以下8个关于操作日期的方法
.fullCalendar('prev') 返回到上一个年月日，与视图的种类有关
.fullCalendar('next')
.fullCalendar('prevYear')
.fullCalendar('nextYear')
.fullCalendar('today')
.fullCalendar( 'gotoDate', year [, month, [ date ]] ) 注意月从0开始
.fullCalendar( 'incrementDate', years [, months, [ days ]] )
.fullCalendar( 'getDate' ) -> Date 取得一个日期对象

$('#my-button').click(function() {
var d = $('#calendar').fullCalendar('getDate');
alert("The current date of the calendar is " + d);
});

22.指定默认的时间格式
timeFormat:h(:mm)tt

23.指定默认的列格式

columnFormat:{
month: 'ddd', // Mon
week: 'ddd M/d', // Mon 9/7
day: 'dddd M/d' // Monday 9/7
}

24.标题格式化
titleFormat:{
month: 'MMMM yyyy', // September 2009
week: "MMM d[ yyyy]{ '&#8212;'[ MMM] d yyyy}", // Sep 7 - 13 2009
day: 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2009
}

25.月显示的名字
monthNames:['January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December']

monthNames:['一月','二月', '三月', '四月', '五月', '六月', '七月',
'八月', '九月', '十月', '十一月', '十二月']

月名字的简写
monthNamesShort:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

26.星期显示的名字
dayNames:['Sunday', 'Monday', 'Tuesday', 'Wednesday',
'Thursday', 'Friday', 'Saturday']

dayNames:['星期日', '星期一', '星期二', '星期三',
'星期四', '星期五', '星期六']

星期名字的缩写
dayNamesShort:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

27.4个关于鼠标的回调方法
当点击某一天时触发此操作
dayClick:function( date, allDay, jsEvent, view ) { }

dayClick: function(date, allDay, jsEvent, view) {

if (allDay) {
alert('Clicked on the entire day: ' + date);
}else{
alert('Clicked on the slot: ' + date);
}

alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);

alert('Current view: ' + view.name);

// change the day's background color just for fun
$(this).css('background-color', 'red');

}

当点击某一个事件时触发此操作
eventClick:function( event, jsEvent, view ) { }

eventClick: function(calEvent, jsEvent, view) {

alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);

// change the border color just for fun
$(this).css('border-color', 'red');

}

当鼠标悬停在一个事件上触发此操作
eventMouseover:function( event, jsEvent, view ) { }

当鼠标从一个事件上移开触发此操作
eventMouseout:function( event, jsEvent, view ) { }

28.事件对象
fullcalendar用来存储一个日历事件信息的标准对象
一下属性中，只有title和start是必须的

id:String/Integer (optional)
title:String
allDay:true or false (optional) 指定是否是全天事件
start:Date 事件开始时间，格式如下
IETF format (ex: "Wed, 18 Oct 2009 13:00:00 EST")
ISO8601 format (ex: "2009-11-05T13:15:30Z")
end: Date (optional) 事件结束时间
如果事件是一个全天事件，则结束时间包括在内
如果事件不是全天事件，结束时间是0:00，则结束时间的第二天不包括在内
url:String (optional) 当用户点击时，将会访问的网址
className: String/Array (optional) 这个事件使用的css 类名
editable:true or false (optional) 事件是否可编辑
source: Array/String/Function (automatically populated) 事件源，自动指定
除了以上属性外，你可以自己指定属性和值

29.事件数组 events (as an array)
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09 12:30:00',
allDay : false // will make the time show
}
]

事件Json源 events (as a json feed)
events: "/myfeed.php" 该URL返回一个json或数组的日程事件组, GET参数视startParam和endParam选项而定
当用户改变视图时触发此事件，FullCalendar 将通过GET方法传递参数来确定需要哪些日程数据
/myfeed.php?start=1262332800&end=1265011200&_=1263178646
startParam:'start' 开始参数的名字
endParam:'end' 结束参数的名字
cacheParam:'_' 缓存参数的名字
lazyFetching:true 只有当需要的时候才取得数据，先从缓存里读取数据

_参数是自动加上去的，防止读缓存内容

日程事件 events (as a function)
events:function( start, end, callback ) { }

events: function(start, end, callback) {
$.ajax({
url: 'myxmlfeed.php',
dataType: 'xml',
data: {
// our hypothetical feed requires UNIX timestamps
start: Math.round(start.getTime() / 1000),
end: Math.round(end.getTime() / 1000)
},
success: function(doc) {

var events = [];

$(doc).find('event').each(function() {
event.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});

callback(events);
}
});
}

30.事件源

eventSources 存储数组对象，可以是Arrays/Functions/URLs

eventSources: [
$.fullCalendar.gcalFeed("http://www.google.com/feed1"),
$.fullCalendar.gcalFeed("http://www.google.com/feed2")
]

31.日程默认为全天日程
allDayDefault:true

32.当读取ajax数据时
loading:function( isLoading, view )
当开始读取的时候是true,当读取完成是false

33.改变日程事件
updateEvent:

eventClick: function(event, element) {
event.title = "CLICKED!";
$('#calendar').fullCalendar('updateEvent', event);

}
日程对象可以通过回调函数被获得，比如 eventClick 或者 clientEvents的方法

34.取得客户端内存中保存的日程对象
clientEvents
.fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array 返回一个日程对象的数组
如果idOrFilter不写，则输出全部保存在客户端的日程对象数组
如果为ID ，则返回所有为此ID的对象
还可以为一个过滤function 接受一个日程对象，如果返回true，则此值包含在客户端对象组中国

35.从日历中删除日程
removeEvents 参数同上

36.重新取得日程
.fullCalendar('refetchEvents') 从所有源并且重新渲染到屏幕上

37.增加一个日程源
.fullCalendar('addEventSource',source)
源可以是Array/URL/Function ，获取的数据可以立刻显示在日历上

38.删除一个事件源
.fullCalendar('removeEventSource',source)

39.日程绑定
eventRender.function( event, element, view ) { }
event 是企图被渲染的日程对象
element 是一个新建的jQuery<div>被用来渲染的，他已经在恰当的时间被创建

eventRender 返回函数可以修改element，返回一个新的dom元素，用来替换被渲染的元素，或者返回false，禁止被渲染

40.日程渲染后事件
eventAfterRender:function( event, element, view ) { }

41.渲染事件
.fullCalendar('renderEvent',event[,stick])
通常，一旦日历重新取得日程源，则原有日程将消失，当指定stick为true时，日程将永久的保存到日历上

42.重新渲染所有事件
rerenderEvents
.fullCalendar('rerenderEvents')

43.是否可以拖拽和改变大小
editable:true

44.禁止拖拽和改变大小
disableDragging:false
disableResizing:false

45.如果拖拽不成功，多久回复原状
dragRevertDuration:500 单位是毫秒

46.拖拽不透明度
dragOpacity:{
agenda:.5 //对于agenda试图
'':1.0 //其他视图
}

47.需要的js包
<script type='text/javascript' src='js/ui.core.js'/>
<script type='text/javascript' src='js/ui.draggable.js'/>
<script type='text/javascript' src='js/ui.resizable.js'/>
注意顺序，要把jquery.js放到这3个包前面

48.拖拽事件引发的操作
eventDragStart:function(event,jsEvent,ui,view) { }
eventDragStop:function( event, jsEvent, ui, view ) { }

49.当拖拽完成并且时间改变
eventDrop:function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { }

dayDelta 保存日程向前或者向后移动了多少天
minuteDelta 这个值只有在agenda视图有效，移动的时间
allDay 如果是月视图，或者是agenda视图的全天日程，此值为true,否则为false

eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {

alert(
event.title + " was moved " +
dayDelta + " days and " +
minuteDelta + " minutes."
);

if (allDay) {
alert("Event is now all-day");
}else{
alert("Event has a time-of-day");
}

if (!confirm("Are you sure about this change?")) {
revertFunc();
}

}

50.改变大小的事件触发的操作
eventResizeStart:function( event, jsEvent, ui, view ) { }
eventResizeStop:function( event, jsEvent, ui, view ) { }
eventResize:function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { }

详细文档:http://arshaw.com/fullcalendar/docs/

分享到：
| [Android] Android开发优化之——对Bitmap ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics