JS - FullCalendar：月份变化时收听

Question

我在使用 FullCalendar v5 时遇到了一个小问题，我使用

dayGridMonth

视图配置了它，我想 在用户更改当前月份时进行监听 ...

例如，如果他看到二月并单击

next

，他会看到三月，所以我预计会有像

onChange

或

onMonthChange

这样的处理程序，但我在文档中没有找到任何可以执行类似操作的内容这个...

我想出了如何通过制作自己的上一个/下一个按钮并在单击时触发我的自定义处理程序来解决这个问题......但我想知道是否有一种普通的方法可以做到这一点？

感谢您的回答。

Answer 1

正如 @Devsi Odedra 提到的，答案是

datesSet

文档：https://fullcalendar.io/docs/datesSet

这是我的实际代码，如果它可以帮助某人：

new Calendar(document.getElementById("calendar"), {
    plugins: [ dayGridPlugin, interactionPlugin ],
    datesSet: event => {
        // As the calendar starts from prev month and end in next month I take the day between the range
        var midDate = new Date((event.start.getTime() + event.end.getTime()) / 2).getMonth()
        var month = `0${ midDate.getMonth() + 1 }`.splice(0, -1)
        doSomethingOnThisMonth(month, midDate.getFullYear())
    }
});

function doSomethingOnThisMonth(month, year) {
    fetch(`myApi.com/something?month=${ month }&year=${ year }`)
        .then((result) => {
            // Do something
        })
}

Answer 2

如果 fullCalendar 的 UI 中的月份发生变化，我想要触发函数的相同功能，我没有在 Google 上找到它，但得到了处理这种情况的参考资料，这里是我的函数如何被触发的，在 React 中使用“useEffect”Hook！ & 和“月份”作为其“依赖项！”

//Call this function Inside the ,

/*   datesSet={function(dateInfo) {  
          monthRange(dateInfo)
      }} */ 


const monthRange = (dateInfo)=>{

  
  const monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];


          let startDate =  dateInfo.view.activeStart.toLocaleDateString()
          let endDate =  dateInfo.view.activeEnd.toLocaleDateString()
          let yy =  dateInfo.view.activeStart.getFullYear()




          let dd = new Date(dateInfo.view.activeStart.getDate());
          
          let monthNum = dateInfo.view.activeStart.getMonth()
          let mm =0;

          if( dd >24){
      
           mm =  monthNames[ monthNum +1];
           if(monthNum ===11){
            mm = monthNames[0]
          }
          }

          else{
            mm =  monthNames[monthNum];
          }       
          setDateStart(startDate)
          setDateEnd(endDate)
          setCurrMonth(mm)

          console.log("Month Number...", monthNum, mm)     
            
}
          
          
          useEffect(() => {
            alert(`
            "Start"=>   ${dateStart} , 
            "End"=>  ${dateEnd}
            "Month Changed"=> ${currMonth}` )

   //Write here Fetch Funtion, Triggers on Month Change in FullCalendar
   
   
   
          }, [currMonth])
                      

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>