Never Ending Repeating Background Color in FullCalendar v6

I am working for a Fire Department that has 4 24-hour shifts that keeps repeating. For the month of April, the first four shifts start as:

April 1, 2024: Group 1 (red) April 2, 2024: Group 2 (blue) April 3, 2024: Group 3 (back) April 4, 2024: Group 4 (yellow)

And then that pattern keeps repeating.

I want display what shift is working on each day in the FullCalendar v6v by showing the background color assigned to group that is working on any given day. I know I could create an event for each day using the following code, but that creates 30 or so events for each month. I don't want to do that.

{
title: 'Group1',
start: '2024-04-01',
display: 'background',
color: '#ff9f89'
},
{
title: 'Group2',
start: '2024-04-02',
display: 'background',
color: '#89a7ff'
},
{
title: 'Group3',
start: '2024-04-03',
display: 'background',
color: '#a0ff89'
},
{
title: 'Group4',
start: '2024-04-04',
display: 'background',
color: '#fffb89'
}

Is it possible to do this without creating an event for each workday, or do I have, in fact, create an event for each day?

This is my Javascript code so far:

<script src="{{ URL::asset('js/dependency/moment/moment.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.11/index.global.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                },
                initialDate: '2024-04-12',
                navLinks: true, // can click day/week names to navigate views
                businessHours: true, // display business hours
                editable: true,
                selectable: true,
                events: [

                    @foreach ($events as $event)
                        {
                            title: '{{ $event->title }}',
                            start: '{{ $event->event_start_date }}',
                            end: '{{ $event->event_start_date }}',
                            description: '{{ $event->excerpt }}', 
                            className: "border-warning bg-warning text-dark",
                            url: '/posts/{{ $event->slug }}'
                        },
                    @endforeach
                ]
            });
            calendar.render();
        });
    </script>

I would appreciate any guidance as to whether this is possible and, if possible, using me to point in the right direction on how to code this.

LaryAI

2 years ago

Level 58

To achieve a repeating background color pattern in FullCalendar without creating an event for each day, you can use the dayRender or dayCellDidMount callback (depending on the version of FullCalendar you are using) to dynamically set the background color of each cell based on the date. Since you have a repeating 4-day pattern, you can use the modulo operator to determine which group's color should be applied to a given day.

Here's an example of how you might implement this in FullCalendar v6:

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        initialDate: '2024-04-12',
        navLinks: true,
        businessHours: true,
        editable: true,
        selectable: true,
        dayCellDidMount: function(dayCellMountArg) {
            // Define your shift start date
            var shiftStartDate = new Date('2024-04-01');
            // Calculate the difference in days from the shift start date
            var diffTime = Math.abs(dayCellMountArg.date - shiftStartDate);
            var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
            // Use modulo to find the repeating pattern
            var shift = diffDays % 4;

            // Define your colors
            var colors = ['#ff9f89', '#89a7ff', '#a0ff89', '#fffb89'];

            // Set the background color based on the shift
            dayCellMountArg.el.style.backgroundColor = colors[shift];
        },
        events: [
            // Your existing events here
        ]
    });
    calendar.render();
});

In this code, dayCellDidMount is a callback that gets called after a day cell is mounted to the DOM. We calculate the difference in days from a defined start date (shiftStartDate) and use the modulo operator to determine which shift it is. Then, we apply the corresponding background color from the colors array.

Please note that the dayCellDidMount function is called for each day cell in the calendar view, so this will dynamically set the background color for each day without the need to create individual events for each shift. Adjust the shiftStartDate and colors array as needed for your specific use case.

dualklip

2 years ago

Level 2

Hi @phayes0289

It must be great to work for a fire department, but leaving that aside, and focusing on your problem. this approach comes to mind:

To avoid creating an event for each day, you could implement a system that calculates the shift group based on the date. Something like this:

// Shift Group configuration
const shiftGroups = [
  { name: 'Group1', color: '#ff9f89' },
  { name: 'Group2', color: '#89a7ff' },
  { name: 'Group3', color: '#a0ff89' },
  { name: 'Group4', color: '#fffb89' },
];

// Helper function to get shift group for a given date
function getShiftGroup(date) {
  const day = moment(date).dayOfYear();
  const groupIndex = (day - 1) % shiftGroups.length;
  return shiftGroups[groupIndex];
}

You can then use this getShiftGroup() function to determine the shift group for a given date, e.g. when rendering each grid cell in FullCalendar.

var calendar = new FullCalendar.Calendar(calendarEl, {
  // existing properties...

  dayCellDidMount: function(info) {
    const group = getShiftGroup(info.date);
    info.el.style.backgroundColor = group.color;
  }
});

This example doesn't fully align with your setup (since I don't have access to your full project code), but the main idea is there: calculate the shift group based on the date, and apply the corresponding style.

Please or to participate in this conversation.