代码之家  ›  专栏  ›  技术社区  ›  Chrissa

完整日历如果没有特定月份的事件,日历将自动加载到下个月

  •  0
  • Chrissa  · 技术社区  · 8 年前

    如果某个月内没有活动,我是否可以制作完整的日历自动进入下个月?

    如果6月份没有活动或活动已经结束,日历将继续到7月份,而不单击下一个月按钮。

    1 回复  |  直到 8 年前
        1
  •  0
  •   Maciej Kwas    8 年前

    我从来没有使用过完整的日历(或者是几年前的日历),所以我可能有点错了,但是我浏览了他们的文档,这就是我发现的(顺便说一句:他们的API在这个插件中相当弱,速度和效率也是,但这是你的选择)。

    在文档中,每次视图更改都会触发一个事件,因此尽管将呈现视图,但跳过可能不可见。首先,你必须实现你自己的方法来跨越日历,因为你必须知道你是前进还是后退。( example )。因此,根据这一点,您可以这样尝试: https://codepen.io/prowseed/pen/bKQEov?editors=0010

    var lastOperationFlag;
      $('#calendar').fullCalendar({
        events: [...],
        header: false, // don't display the default header
        viewRender: function (view, element) {
          var start = view.start._i; // timestamp of the beginning of current view
          var end = view.end._i; // timestamp of the end of current view
          var events = view.options.events; // all events
          if( checkBoundariesAndCurrentRange(start, end, events) ){
            (lastOperationFlag === 'next') ? $('#calendar').fullCalendar('next') : $('#calendar').fullCalendar('prev');
          }
        }
      });
    
      $('#prev').on('click', function() {
        lastOperationFlag = 'prev';
        $('#calendar').fullCalendar('prev'); // request previous view
      });
    
      $('#next').on('click', function() {
        lastOperationFlag = 'next';
        $('#calendar').fullCalendar('next'); // request next view
      });
    
      function checkBoundariesAndCurrentRange (start, end, events) {
        if (events.length === 0) return false;
        var smallestDate = null;
        var biggestDate = null;
        var eventsInRange = false;
        events.forEach(e => {
          var ev_start = (new Date(e.start)).getTime(); // !!!!! MORE SAFE to transform it with a momentjs
          // here you can eventually also handle event.end if exists with additional logic
          if (smallestDate == null || ev_start < smallestDate) smallestDate = ev_start;
          if (biggestDate == null || ev_start > biggestDate) biggestDate = ev_start;
          if (start <= ev_start && end >= ev_start) eventsInRange = true; // set the flag if there is at least one event in given start-end range
        });
        console.log((!eventsInRange && smallestDate < start && biggestDate > end) )
        return (!eventsInRange && smallestDate < start && biggestDate > end) 
      }
    
    推荐文章