Навигация в FullCalendar с предыдущим / следующим, когда CustomView имеет visibleRange - PullRequest
Новая
       13

Навигация в FullCalendar с предыдущим / следующим, когда CustomView имеет visibleRange

2 голосов
/ 07 января 2020

Мой календарь имеет вид c: он показывает 31 день (отображать 4 дня до текущего дня и 27 дней после)

Поэтому у меня есть динамический c visibleRange для моего просмотра 

let INIT = moment().subtract(4, 'days').format('YYYY-MM-DD');
let INIT_END = moment(INIT).add(31,'days').format('YYYY-MM-DD');

[...] 

  type: 'resourceTimeline',
  visibleRange: {
    start: INIT,
    end: moment(INIT).add(31,'days').format('YYYY-MM-DD')
  },
  buttonText: '31 jours'
}

и предыдущая / следующая не работают, когда visibleRange определен для пользовательского представления .

Я пробовал что-то, включающее jQuery, и это в основном работает, за исключением того, что вы должны дважды нажать сначала на prev / next, чтобы изменить visibleRange (и вам также нужно дважды щелкнуть, когда вы go переходите от предыдущего к предыдущему или наоборот) -versa).

И я хотел для этого: 

calendar.setOption('visibleRange', {
  start: INIT, 
  end: INIT_END
})

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

Вы можете найти код на этом CodePen

Можете ли вы помочь мне?

1 Ответ

2 голосов
/ 14 января 2020

Хорошо, коллега коллеги привел меня к решению, большое ему спасибо.

Вместо использования visibleRange и попыток манипулировать данными FullCalendar с помощью jQuery (очень брутто), я вычисляю разница между моими двумя моментами для того, чтобы иметь продолжительность: 

const INIT = moment().subtract(4, 'days');
const INIT_END = moment(INIT).add(31,'days');
let duration = INIT_END.diff(INIT, 'days')

Затем я использую эту продолжительность в настройках моего customView: 

resourceTimelineRollingMonth: {
  type: 'resourceTimeline',
  duration: { days: duration },
  buttonText: '31 jours'
}

и для моего просмотра, чтобы начать 4 дня перед текущим днем ​​в объекте Calendar я установил: 

[...]
defaultDate: INIT.format('YYYY-MM-DD'),
[...]

, который теперь работает без нареканий.

...