Vue Full Calendar의 다음 달 및 이전 달 감시자

Vue Full Calendar의 다음 달 및 이전 달 감시자

Vue.js와 함께 FullCalendar 라이브러리를 사용하고 있습니다.

기본 prev, next 및 today 버튼을 사용하여 자신의 작업을 트리거할 수 있습니까?

원하는 대로 할 수 있는 커스텀 버튼을 만들었지만 기본 버튼을 사용하는 것을 선호합니다.

현재 메서드에 연결된 버튼이 있습니다.

<button @click="handleMonthIncrement">Next Month</button>

이 방법을 다음과 같이 부릅니다.

 handleMonthIncrement: function(arg) {
  // update month and year
  this.incrementMonth();

  // update calendar
  let calendarApi = this.$refs.fullCalendar.getApi();
  calendarApi.next();

  // updateCurrentSummary (mapped to store)
  this.updateCurrentSummary();
}

calendar의 jQuery 참조에 연결된 ref=fullCalendar를 사용하여 보기를 변경합니다.

다음 프리버튼을 들을 수 있으면 이미 달력 보기가 변경되어 있기 때문에 코드를 삭제할 수 있습니다.

이게 가능합니까?viewRender(https://fullcalendar.io/docs/v1/viewRender)를 사용하여 달력이 변경된 시점을 확인할 수 있다는 것은 알고 있습니다만, 위의 요건에 사용할 수 있는지 여부는 잘 모르겠습니다.

잘 부탁드립니다.

고마워요.

이를 실현하기 위해서는 https://github.com/fullcalendar/fullcalendar-vue/blob/master/src/fullcalendar-options.js에서 Events Expected를 검색해 주십시오.

그리고 datesRender를 찾았습니다.이것은 날짜가 다시 렌더링될 때 트리거하기 위해 @로 프리픽스 되는 FullCalendar 요소에 추가할 수 있습니다.이 뷰는 월 단위 보기이므로 handle Month Change라는 메서드를 트리거할 수 있습니다.

여기를 참조해 주세요.

<FullCalendar
  defaultView="dayGridMonth"
  @datesRender="handleMonthChange"
/>

handle Month Change에는 다음과 같은 내용이 있습니다.

handleMonthChange: function(arg) {
  var currentStart = arg.view.currentStart;
  var check = moment(currentStart, "YYYY/MM/DD");
  var currentMonth = check.format("M");

  // load action
  this.updateCurrentMonth(currentMonth);
  // refresh summaries
  this.updateSummary();
}

(보기 개체에서) 날짜에서 달을 결정하기 위해 모멘트를 사용했습니다.

자세한 내용은 이쪽을 참조해 주세요.https://fullcalendar.io/docs/datesRender

그런 다음 이를 사용하여 Vuex 액션을 호출하여 Vuex 상태의 월을 변경하고 필요에 따라 요약 섹션을 업데이트했습니다.

그게 다른 사람에게도 도움이 됐으면 좋겠어요.여기까지 도와주신 @ADYson님 감사합니다!

언급URL : https://stackoverflow.com/questions/56622852/next-and-previous-month-watcher-in-vue-fullcalendar