Fullcalendar使用2

之前写过一篇关于fullcalendar的使用了

现在主要补充一下。

要解决的问题

1）fullcalendar的函数只提供了日期和事件的单击事件，如何能不修改fullcalendar的源码的基础上让日期和事件响应双击事件？

2）fullcalendar在一个日期上显示的多个事件时日期面板会自动调整，但是事件的大小如何改变呢？

问题1的解决方式：

fullcalendar为我们提供了一个eventAfterRender函数，此函数用来处理当事件在日期面板上渲染完后的处理事件，所以当每当事件渲染完成后我们

可以为每一个事件手工绑定一个双击事件代码如下：

 eventAfterRender:function(event,element,view){
                $(element).on("dblclick",function open4CreatPreAdv(){
                         if(event.isSure == 1){
                             alert("版位已被预约,请重新选择");
                         }else{
                              var uuid = $.query.get("uuid");
                                 var docLibID = $.query.get("docLibID");
                                 var fvID = $.query.get("fvID");
                                 var dataUrl = "AddPrePaperAdv.jsp?code=AddPrePaperAdv&DocLibID="+docLibID+"&FVID="+fvID+"&UUID="+uuid + "&advTypeId=" +advTypeId
                                                + "&editionId=" +editionId+ "&kanwuId=" +kanwuId+ "&fieldId=" + event.fieldId + "&dateStr=" + event.dateStr;
                                 var pos = _getDialogPos(document.getElementById("advType"));
                                     curDialog = e5.dialog({type:"iframe", value:dataUrl},
                                               {showTitle:false, width:650, height:400, pos:pos,resizable:true});
                                 curDialog.show();
                         }
                });
            }

这样的话就可以响应双击事件了。

问题2的解决方式 ：

fullcalendar的样式都在fullcalendar.css样式文件中，fullcalendar.css内容不是很复杂但是要理清楚各个元素之间的关系。

通过修改fullcalendar.css中相关的样式足够满足我们的需求的了，让事件的高度大些

样式如下：

.fc-event {
    border: 1px solid #3a87ad; /* default BORDER color */
    background-color: #3a87ad; /* default BACKGROUND color */
    color: #fff;               /* default TEXT color */
    font-size: .85em;
    cursor: default;
    height: 30px;
    line-height:30px;
    }

样式问题都可以修改fullcalendar.css文件来达到我们的要求