Change to month view while loading different event data

user_19593482 0
Viewed 39

My calendar starts on day view (today) with appointments loaded. These appointments are grouped in a "booking package" where multiple appointments relate to a single booking.

For navigating around the calendar, it's useful to have a month view accessible but for that view, it isn't practical to have events loaded by appointment; it'd be better to load appointments by booking (each booking having several appointment events).

I'm rendering my calendar with a custom button per documentation (unedited, I've just copied the code in there as a placeholder):

const calendarEl = document.querySelector("#calendar");
let calendar = new FullCalendar.Calendar(calendarEl, {
    ....
    customButtons: {
        myCustomButton: {
            text: 'month',
            click: function () {
                // Change event source for the calendar to show bookings in this view.
                alert('clicked the custom button!')
            }
        }
    }
....
})

How would I change the events the calendar renders (and change them back when the calendar goes back into the day view)?

fullcalendar javascript
1 Answers

You're going to want to manage both sets of your data (one for day view, one for month view) and render your calendar alternately between them depending on what's requested.

Assuming you hook into an api of some sort can render the calendar with a different endpoint for each set of events.

Note that you can't have the calendar automatically update here, you'll have to re-render it the way you did when the page loaded.

Your parameters that your callbacks will need to pass are:

  • The URL for the api endpoint used to load event data
  • The name of the view you want to use (dayGridMonth, timeGridDay, etc.)
  • The date you clicked on to go back to the day view from the month view

You could work in logic to handle nulls (eg. default to timeGridDay view if no view was requested).

let calendar
function renderCalendar(url, view, date) {
    const calendarEl = document.querySelector("#calendar");
    let calendar = new FullCalendar.Calendar(calendarEl, {
        events: url,
        initialDate: date,
        initialView: view,
        customButtons: {
            myCustomButton: {
                text: 'month',
                click: function () {
                    // Change to month view 
                    const monthViewUrl = "..."
                    renderCalendar(monthViewUrl, "dayGridMonth")
                }
            }
        }
    ....
    })

For going back to a selected day, you'll need to add the dateClick property to your calendar referring to the name of a callback function:

let calendar = new FullCalendar.Calendar(calendarEl, {
    dateClick: goToDay
})

function goToDay(selectedDate) {
    if (calendar.currentData.currentViewType === "dayGridMonth") {
        const dayViewUrl = "..."
        renderCalendar(dayViewUrl, "timeGridDay", selectedDate.date)
    }
}

Hope this helps!

user_169758310
Related