Fullcalendar按资源设置自定义businessHours不显示问题求助

Hey there! Let's figure out why your per-resource business hours aren't showing up in FullCalendar. I’ve dealt with this exact snag before, so here’s how to fix it:

The Core Issue #

Right now you’ve set businessHours: true globally, which tells FullCalendar to use default business hours across all resources. But to have unique hours per resource, you need to define the business hours directly on each resource object instead of using that global setting. Also, you’re using a regular agenda view (agendaDay) which doesn’t support resource-specific configurations—you need to switch to a resource-aware view.

Step-by-Step Fix #

1. Define Your Resources with Business Hours
   First, create a list of your resources, each with its own businessHours configuration. For example:

   var calendarResources = [
     {
       id: 'res1',
       title: 'Front Desk',
       businessHours: {
         daysOfWeek: [1, 2, 3, 4, 5], // Monday-Friday
         startTime: '08:00',
         endTime: '17:30'
       }
     },
     {
       id: 'res2',
       title: 'Workshop Space',
       businessHours: {
         daysOfWeek: [1, 2, 3, 4, 6], // Monday-Thursday + Saturday
         startTime: '09:00',
         endTime: '16:00'
       }
     }
   ];
   

2. Update Your Calendar Initialization
   Modify your FullCalendar setup to use resource-specific views, add the resources array, and remove the global businessHours: true line:

   $('#calendar').fullCalendar({
     defaultView: 'resourceAgendaDay', // Switch to resource-aware view
     locale: 'cs',
     slotDuration: '00:15:00',
     scrollTime: scrollTime,
     timeFormat: 'hh:mm',
     slotLabelFormat:"HH:mm",
     editable: true,
     droppable: true,
     selectable: true,
     eventLimit: true,
     // Remove global businessHours: true here
     header: {
       left: 'prev,next today',
       center: 'title',
       right: 'resourceAgendaDay,resourceAgendaTwoDay,resourceAgendaWeek,resourceMonth' // Update views to resource versions
     },
     resources: calendarResources, // Attach your resources list
     views: {
       resourceAgendaTwoDay: {
         type: 'resourceAgenda',
         duration: { days: 2 }
         // Add any other view-specific config here
       }
       // Keep your other view definitions, but make sure they're resource-aware
     }
     // Rest of your config...
   });
   

3. Double-Check Dependencies
   Make sure you’ve included the FullCalendar Scheduler plugin (if you’re using v3 of FullCalendar)—resource management is part of the Scheduler add-on, not the base FullCalendar library. If you’re on v5+, resource support is built into the core, but you’ll need to use views like resourceTimeGridDay instead.

Quick Recap #

• Global businessHours overrides resource-specific settings, so ditch the global line
• Use resource-aware views (like resourceAgendaDay for v3, resourceTimeGridDay for v5)
• Attach your resources array to the calendar config with the resources option
• Define businessHours directly on each resource in your array

That should get each resource’s unique business hours showing up correctly!

内容的提问来源于stack exchange，提问作者AdiOverRide