0

I want to get all visible events in a react FullCalendar v4 view. I can't find any property on the calendar's instance that filters out only visible events. I can get all the events though.

Unable to get only visible events, my thought was to filter out all events by means of the visible range. But then I can't get that visible range either. I tried calendar.view, calendar.getView(), ... none of them exist. Is this a temporary lack of methods/properties or am I missing something?

ADyson
  • 57,178
  • 14
  • 51
  • 63
Dany Dhondt
  • 881
  • 9
  • 27
  • without seeing your code or any error messages it's really very difficult to understand precisely what the problem is. the [getView()](https://fullcalendar.io/docs/getView) method definitely exists, if you invoke it on a valid JS object which represents the current calendar. Then you can run [clientEvents()](https://fullcalendar.io/docs/clientEvents) and use the view's start and end dates as a filter to get all events which are visible in the current view. – ADyson Jan 22 '19 at 13:05
  • Your `getView()`link links to the v3 docs. This is the [getView()](https://fullcalendar.io/docs/v4/Calendar-getView) method of v4. It exists in the docs but could it be that it's not yet implemented in the v4 alpha release? I'm unable to post a codepen example because I can't link the fullcalendar@alpha-4 package yet. Also, I'm unable to add a `fullcalendar-v4` tag to SO. – Dany Dhondt Jan 22 '19 at 15:30
  • you still haven't explained what happens when you try to use the getView() method in v4, or shown any code where you attempt to use it. You don't need to post a full-blown codepen, just include a relevant code sample in your question, and then describe the precise behaviour you see - e.g. console error messages or whatever. So I don't know if you're just calling the method on the wrong object, or using it out of context, or whether there's some deeper issue. – ADyson Jan 22 '19 at 16:23
  • 1
    P.S. After posting the above comment, I found this: [this codepen](https://codepen.io/anon/pen/gqOjpQ?&editable=true&editors=001) which uses Alpha 4. Based on that I'd say the method isn't implemented yet - check the code for the "custom button 1" and the console message which appears when you try to run it. By contrast if you try to run the "changeView" method (for example), it works fine. Not altogether surprising really for an alpha release I guess. You might just have to be patient. I'm not part of the fullCalendar project in any way so I don't know what the roadmap is, maybe check GitHub. – ADyson Jan 22 '19 at 16:31
  • 1
    `console.log(this.state.calendar.getView())`and the error was `'getView' is not a function`. So indeed, the conclusion should be that it is not implemented yet. The problem here is that the absence of jQuery in v4 is an absolute must for React developers. So yes, I'll have to be patient. Thx for the codepen link though. – Dany Dhondt Jan 23 '19 at 06:59

2 Answers2

3

FullCalendar v4 now being a full release, this is how to get only visible events:

const visibleEvents = calendar.getEvents().filter(event => {
    const s = calendar.view.activeStart, e = calendar.view.activeEnd
    if (event.start > e || event.end < s) return false
    return true
})
Dany Dhondt
  • 881
  • 9
  • 27
1

I know this is an older post now and the question was not specifically about calling the getView() method. However, I thought this may help if someone else comes across this. So for me to seemingly imitate a getView() call using the React Fullcalendar I did something similar to the below.

let calendarApi = this.calendarRef.current.getApi();
console.log(calendarApi.view.type);

This meant I was able to do checks on whether the view was "dayGridMonth" or "listWeek" for example. Hope this helps.

JJT
  • 11
  • 2