CODEWITHSUNDEEP
javascriptfullcalendarfullcalendar-5
BetaBites
BetaBites

Reputation: 11

FullCalendar with custom view not working

I'm working on a calendar application for a client. The calendar needs to show resources for each day of the week. I've managed to create a custom view in FullCalendar that shows all days of the week with no problem. But as soon as I add hiddenDays: [0,6] to the custom view, as my client does not work on those days, the navigation buttons stop working.

Here's my custom view code:

resourceTimeGridWeekDay: {
              type: "resourceTimeGrid",
              buttonText: "weekdays",
              hiddenDays: [0,6],
              visibleRange: function(currentDate) {
                let start = new Date(currentDate.valueOf())
                let end = new Date(currentDate.valueOf())

                start.setDate(start.getDate() - start.getDay())
                end.setDate(start.getDate() + 7)

                return {start: start, end: end}
              }
            }

Without the hiddenDays attribute, everything works perfectly fine.

EDIT: When I change it to something like this, I can atleast navigate backwards but never forwards:

resourceTimeGridWeekDay: {
              type: "resourceTimeGrid",
              buttonText: "weekdays",
              hiddenDays: [0,6],
              visibleRange: function(currentDate) {
                let start = new Date(currentDate.valueOf())
                let end = new Date(currentDate.valueOf())

                start.setDate(start.getDate() - start.getDay())
                if (currentDate.getDay() === 5) {
                  end.setDate(start.getDate() + 9)
                } else {
                  end.setDate(start.getDate() + 7)
                }

                return {start: start, end: end}
              }
            }

EDIT 2: I'm running FullCalendar version 5.5.0.

Upvotes: 0

Views: 597

Answers (1)

BetaBites
BetaBites

Reputation: 11

Thanks @ADyson! Didn't realize there was a 'resourceTimeGridWeek' view. I probably accidentally skipped over it without realizing when I checked the documentation. I've substituted it in and it works like a charm now!

I needed a view that would show all days in the week and their resources, excluding Saturday and Sunday.

resourceTimeGridWeekDay: {
              type: "resourceTimeGridWeek",
              buttonText: "weekdays",
              hiddenDays: [0,6],
              visibleRange: function(currentDate) {
                let start = new Date(currentDate.valueOf())
                let end = new Date(currentDate.valueOf())

                start.setDate(start.getDate() - start.getDay())
                if (currentDate.getDay() === 5) {
                  end.setDate(start.getDate())
                } else {
                  end.setDate(start.getDate() + 6)
                }
                // document.getElementById("test").innerHTML = JSON.stringify(end)

                return {start: start, end: end}
              }
            }

I had to keep the 'visibleRange' bit because otherwise it'd start the week on random days.

Upvotes: 1

Related Questions