fullcalendar使用心得

做项目的时候要实现一个手动设置节假日的功能,于是就用了fullcalendar,功能也比较简单,点一下那个日期就设置为假日,再点一下设置为节日,再点一下就又变成工作日,类似于扫雷那种。数据都能传递到后台,并保存在数据库里面。

<link href='${ctxStatic}/fullcalendar-3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='${ctxStatic}/fullcalendar-3.9.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='${ctxStatic}/fullcalendar-3.9.0/lib/moment.min.js'></script>
<script src='${ctxStatic}/fullcalendar-3.9.0/fullcalendar.min.js'></script>

这是引用,我这里没有jquery的引用,因为这个项目的底层已经引用过了。

接下来是js代码

<script type="text/javascript">
    $(function() {

        $('#calendar').fullCalendar({
          height: 600,
          header: {
            left: '',
            center: 'title',
            right: 'prev,next today'
          },
          monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
          monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
          dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
          dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
          today: ["今天"],
          buttonText: {
            today: '今天',
          },
          defaultDate: '${date}',
          navLinks: true, // can click day/week names to navigate views
          selectable: true,
          selectHelper: true,
          /* select: function(start, end) {
            var title = prompt('Event Title:');
            console.log(start);
            console.log(end);
            var eventData;
            if (title) {
              eventData = {
                title: title,
                start: start,
                end: end
              };
              $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
            }
            $('#calendar').fullCalendar('unselect');

          }, */
          editable: true,
          eventLimit: true, // allow "more" link when too many events
          events: function(start, end, timezone, callback) {
              $.ajax({
                    url : "${ctx}/base/holidayMaintain/view.jhtml",
                    type : "POST",
                    data : {"date":$("#date").val(), "compCode":$("#compCodeSId").val()},
                    dataType : "json",
                    success : function(data) {
                        console.log(data);
                        var events = [];
                        $.each(data,function (key,value) {
                            if (value.title == '1') {
                                events.push({
                                    title: "假日",
                                    start: new Date(Date.parse(value.start)),
                                    end: new Date(Date.parse(value.start)),
                                    color: '#1b6aaa'
                                });
                            } else if (value.title == '2') {
                                events.push({
                                    title: "节日",
                                    start: new Date(Date.parse(value.start)),
                                    end: new Date(Date.parse(value.start)),
                                    color: '#1b6aaa'
                                });
                            }

                            /* var eventData;
                            console.log(value.start);
                            eventData = {
                                title: value.title,
                                start: value.start,
                                end: value.end
                            };
                            $('#calendar').fullCalendar('renderEvent', eventData, true); */
                        });
                        callback(events);
                    },
                    error:function(){

                    }
              });
          },
          dayClick: function(date, jsEvent, view) {

              var compCode = $("#compCodeSId").val();
              if (compCode == '') {
                  alertx('警告','请选选择公司!');
                  return;
              }
              window.location.href="${ctx}/base/holidayMaintain/add.jhtml?date="+date.format()+"&compCode="+compCode;

          }
        });


      });
    </script>

因为功能确实比较简单,所以代码也很少,就说几个值得注意的问题。
1、我在一开始设置了height: 600,高度只有600px,其实默认情况下高度要更高,会有底下一部分日期格需要下滑才能看见,那些一开始被挡住的日期格居然点了没反应,至今没有找到问题的症结,所以只能调小它的高度,让页面也开始就能加载整个表格。

2、

events.push({
        title: "节日",
        start: new Date(Date.parse(value.start)),
        end: new Date(Date.parse(value.start)),
        color: '#1b6aaa'
    });

在把后台数据设置到event中去的时候,要注意日期的格式,必须是fullcalendar认可的格式。

3、我用的这个3.9.0版本,events: function(start, end, timezone, callback)里面应该有四个参数,比一些低版本多出了timezone。

文档连接
中文文档

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
FullCalendar是一个功能强大的日历插件,可以用于在网页上创建和管理日程安排。它支持多种视图,包括timeline view(时间轴视图)。 要在FullCalendar使用timeline view,你需要引入相应的插件文件。首先,确保你已经包含了FullCalendar的核心文件和样式表。然后,按照以下步骤进行操作: 1. 下载并引入Timeline插件文件: 你可以从FullCalendar的官方网站或GitHub仓库下载Timeline插件文件。将`timeline.js`和`timeline.css`文件复制到你的项目中,并在HTML页面中引入这些文件。 ```html <link rel="stylesheet" href="path/to/timeline.css"> <script src="path/to/timeline.js"></script> ``` 2. 创建日历容器: 在HTML页面中创建一个容器来显示日历。例如,你可以在一个`<div>`元素中添加一个ID作为容器的标识符。 ```html <div id="calendar"></div> ``` 3. 初始化FullCalendar: 在JavaScript代码中,使用FullCalendar的初始化函数来创建一个日历实例,并指定视图为timeline view。 ```javascript document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { plugins: ['timeline'], initialView: 'timelineWeek', // 设置初始视图为timeline view // 其他配置选项... }); calendar.render(); }); ``` 4. 配置和自定义: 你可以根据需要进一步配置和自定义timeline view。例如,你可以设置视图的日期范围、时间间隔、显示的事件等。具体的配置选项可以参考FullCalendar的文档。 ```javascript var calendar = new FullCalendar.Calendar(calendarEl, { plugins: ['timeline'], initialView: 'timelineWeek', views: { timelineWeek: { slotDuration: '00:30', // 时间间隔为30分钟 slotLabelInterval: '01:00', // 每小时显示一次时间标签 slotMinTime: '08:00:00', // 最早时间为8点 slotMaxTime: '18:00:00', // 最晚时间为18点 } }, // 其他配置选项... }); ``` 这样,你就可以使用FullCalendar的timeline view来显示时间轴视图了。根据你的需求,你还可以进一步自定义和扩展这个日历插件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值