繁体   English   中英

完整日历如果特定月份没有任何事件,则日历将在下个月自动加载

[英]Full Calendar If no events for a particular month the calendar will automatically load on next month

如果特定月份没有活动,我有什么办法可以使整个日历自动继续到下个月。

假设6月没有活动或活动已经结束,则日历将进行到7月,而无需单击下个月按钮。

我从来没有使用过完整的日历(或者是几年前),所以我可能有点不对,但是我浏览了他们的文档,这就是我发现的内容(顺便说一句:他们的api在该插件,速度和效率方面都相当薄弱。好,但这是您的选择)。

文档中有一个事件会在每次视图更改时触发,因此尽管将渲染视图,但跳过可能不可见。 首先,您将必须实现自己的方法来跨日历移动,因为您必须知道前进还是后退( 示例 )。 因此,您可以按照以下方式进行尝试: 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) 
  }

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM