javascript - JS - FullCalendar : Listen when the month changes - Stack Overflow

admin管理员组

文章数量:1321416

I'm having a little issue with FullCalendar v5, I configured it with the dayGridMonth View and I would like to listen when the user changes the current month ...

For example, if he is seeing February and click on next he'll see march, so I was expected for a handler like onChange or onMonthChange but I didn't find anything in the documentation to do something like this ...

I figured how to get around the problem by making my own prev / next buttons and triggering my custom handler on the click ... But I would like to know if there is a vanilla way to do it?

Thanks for your answers.

I'm having a little issue with FullCalendar v5, I configured it with the dayGridMonth View and I would like to listen when the user changes the current month ...

For example, if he is seeing February and click on next he'll see march, so I was expected for a handler like onChange or onMonthChange but I didn't find anything in the documentation to do something like this ...

I figured how to get around the problem by making my own prev / next buttons and triggering my custom handler on the click ... But I would like to know if there is a vanilla way to do it?

Thanks for your answers.

• javascript
• fullcalendar
• fullcalendar-5

Share Improve this question Follow edited Dec 10, 2021 at 23:47 TBA 2,02744 gold badges1515 silver badges2828 bronze badges asked Dec 10, 2021 at 13:14 Simon TrichereauSimon Trichereau 8091212 silver badges2323 bronze badges 10

• 1 Refer fullcalendar.io/docs/datesSet – Devsi Odedra Commented Dec 10, 2021 at 13:24
• Wow ... thanks you ! Exactly what I was looking for ! They really should improve their documentation (or at least put a searchbox) – Simon Trichereau Commented Dec 10, 2021 at 15:24
• Why do you want to know when the month changes? If you're trying to make it load more events then see the section on event sources instead - fullcalendar.io/docs/event-source – ADyson Commented Dec 10, 2021 at 20:07
• @ADyson ths main reason is to load some datas from the current month but not print them in the calendar ... I need to add a class to the .fc-daygrid-day-frame if the event has been registered ... – Simon Trichereau Commented Dec 13, 2021 at 9:41
• 1 I think this is more usable for my case ... I'll check it later :) Thx – Simon Trichereau Commented Dec 16, 2021 at 12:22

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 7

As mentionned by @Devsi Odedra, the answer was datesSet

The doc : https://fullcalendar.io/docs/datesSet

This is my actual code if it can help someone :

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./something?month=${ month }&year=${ year }`)
        .then((result) => {
            // Do something
        })
}

I wanted the same Functionality of Triggering a Function if the Month Changes in UI of fullCalendar, I didn't get it on Google but got references to handle the Situation here is how my Function gets triggered, Using "useEffect" Hook in React! & and "Month" as its "Dependency!"

//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./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

本文标签： javascriptJSFullCalendarListen when the month changesStack Overflow