angular - Fullcalendar custom view "vertical resource view" not working correctly

Question

I'm using fullcalendar 4 on angular and I need to use a custom view based on this demo :
https://fullcalendar.io/docs/v4/vertical-resource-custom-demo

My view needs to be on 5 days (monday to friday) and for just 1 resource. I edited the demo to do what i wanted but the calendar isn't displaying the 5 days everytime. For example this week, it's only display from Today to Friday and Friday to Tuesday the previous week.

I've done a codepen of my problem and the view i created:

  resourceTimeGridFiveDay: {
    type: "resourceTimeGrid",
    duration: { days: 5 },
    buttonText: "5 days"
  }

https://codepen.io/Archelite/pen/QWKQyZR

How can i force the calendar to show always the 5 days (Monday to Friday)?

Answer 1

It's easy to make a 5-day view of Monday-Friday - just use the normal "week" setting of the vertical resuorce view, and set the option to hide weekends:

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'resourceTimeGrid' ],
    timeZone: 'UTC',
    defaultView: 'resourceTimeGridWeek', //USE NORMAL VERTICAL RESOURCE WEEK VIEW
    header: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimeGridWeek'
    },
    resources: [
      { id: 'a', title: 'Room A' },
      { id: 'b', title: 'Room B' }
    ],
    events: 'https://fullcalendar.io/demo-events.json?with-resources=2',
    weekends: false //HIDE WEEKENDS
  });

  calendar.render();
});

Working demo: https://codepen.io/ADyson82/pen/JjRppYy?editors=001

Documentation of the "weekends" setting: https://fullcalendar.io/docs/v4/weekends