FullCalendar的使用

最新推荐文章于 2022-07-01 16:29:52 发布

wxloveyun

最新推荐文章于 2022-07-01 16:29:52 发布

阅读量733

点赞数

分类专栏： FullCalendar 文章标签：文档

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

版权

FullCalendar 专栏收录该内容

3 篇文章

订阅专栏

本文将介绍如何使用FullCalendar JavaScript库创建一个功能丰富的日历组件，并提供了详细的代码示例，包括如何引入相关资源、配置日历样式、设置日期视图、处理事件拖拽与缩放等功能。

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

由于项目的需要，最近研究了一下FullCalendar ，具体的FullCalendar的详细内容请参考官网http://arshaw.com/fullcalendar/。在此推荐一篇关于FullCalendar API的中文翻译

http://www.cnblogs.com/mycoding/archive/2011/05/20/2052152.html，对于英文不是很好的同学是个不错的参考资料。

不多说了直接上代码，代码没有整理和优化。

1，首先引入相关的js以及css文件

2，FullCalendar需要渲染的Dom元素

3，相关处理的js

$('#calendar').fullCalendar({
  header: {
   left: 'prev,next today',
   center: 'title',
   right: 'month,agendaWeek,agendaDay'
  },
  editable: true,
  firstDay: 1,
        buttonText: {
        day: '日',
        week: '周',
          month: '月'
       },
       titleFormat:'yyyy年-MM月',
       monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
       monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
       dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
       dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
       dragOpacity:{
           agenda:.5, //对于agenda试图
           '':.7 //其他视图
       },
       eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc, jsEvent, ui, view) {
             _eventDropOrResize(event,dayDelta,minuteDelta,allDay,revertFunc, jsEvent, ui, view);
       },
       eventResize: function(event,dayDelta,minuteDelta,allDay,revertFunc, jsEvent, ui, view){
            _eventDropOrResize(event,dayDelta,minuteDelta,allDay,revertFunc, jsEvent, ui, view);
       },
      dayClick:function( date, allDay, jsEvent, view ){
            openPage(this ,date, allDay, jsEvent, view);
       },
      eventClick:function(event, jsEvent, view ){
              delPreWebAdv(event, jsEvent, view );
        },
       eventSources:[{
                          url: "../../adv/preWebAdv/preWebAdv.do?action=getPreWebAdvs",
                          type: "post",
                          data: {
                            edition: edition,
                            kanwu: kanwu,
                            skanqi: skanqi,
                            ekanqi: ekanqi
                          },
                          error: function() {
                              alert('获取预约网站广告失败!');
                          },
                         // color: 'yellow',
                          textColor: "black"
                  }]
});