Полный календарь Если в течение определенного месяца нет событий, календарь будет автоматически загружаться в следующем месяце.

Question

Могу ли я сделать полный календарь, чтобы автоматически переходить к следующему месяцу, если в конкретном месяце нет событий?

Скажите, что в июне нет события или событие уже завершено, календарь перейдет к июлю без нажатия кнопки следующего месяца.

Answer 1

Я никогда не использовал полный календарь (или это было много лет назад), поэтому я могу быть немного не прав, но я пролистал их документы, и это то, что я нашел (кстати: их 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) 
  }