Fullcalendar使用2

最新推荐文章于 2024-08-09 11:17:59 发布

wxloveyun

最新推荐文章于 2024-08-09 11:17:59 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： FullCalendar

本文链接：https://blog.youkuaiyun.com/wxloveyun/article/details/17170181

FullCalendar 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何为FullCalendar中的事件添加双击事件监听，而无需修改其源码，并提供了解决方案。此外，还讲解了如何通过修改fullcalendar.css文件来调整事件在视图中的显示样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前写过一篇关于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文件来达到我们的要求