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)?
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