Tips for setting up date ranges in Fullcalendar

Question

Tips for setting up date ranges in Fullcalendar

Currently, I am in the process of developing a fire department shift calendar using fullcalendar. I am faced with the task of altering the CSS for specific dates at irregular intervals that do not correspond to typical days of the week.

In this particular scenario, each shift consists of three 24-hour periods within a nine-day cycle. Each day within a shift is denoted by a distinct color on the calendar. For reference, please see the following example: Shift Calendar Example

While I have successfully managed to modify the CSS for date cells and repeat them based on days of the week as illustrated in the code snippet below:

events: [{
            title:"Shift One",
            id: "one",
            allDay: true,
            rendering: 'background',
            color: 'blue',
            dow: [1,4]   // Repeat monday and thursday
            }]

I am now inquiring whether it is possible to establish a pattern involving days 1,3,5 and replicate this pattern on day 10?

css fullcalendar

Answer 1

Answer №1

It seems that a solution like this is effective https://jsfiddle.net/wavzxkjw/

The color pattern for shift days starting on 2017-01-01 repeats every 18 days, allowing us to calculate the color for any given day based on that.

However, the initial code block does not support calculations prior to 2017-01-01

$(document).ready(function() {
  $('#calendar').fullCalendar({
    defaultDate: '2017-01-01',
    dayRender: function(date, cell) {
      $(cell).css('background-color', determineColorForDay(date));
    }
  });

  function determineColorForDay(date) {
    var colorPattern = [
      'red', 'goldenrod', 'red', 'goldenrod', 'black', 'goldenrod', 'black',
      'red', 'black', 'red', 'goldenrod', 'red', 'goldenrod', 'black',
      'goldenrod', 'black', 'red', 'black'
    ];
    var index = Math.abs(moment('2017-01-01').diff(date, 'days')) % colorPattern.length;
    return colorPattern[index];
  }
});

Below is an improved version with better clarity and added functionality for past and future date calculations. The function name has been updated for better representation of its purpose https://jsfiddle.net/wavzxkjw/2/

$(document).ready(function() {
  $('#calendar').fullCalendar({
    defaultDate: '2017-01-01',
    dayRender: function(date, cell) {
      $(cell).css('background-color', determineColor(date));
    }
  });

  function determineColor(date) {
    var patternStart = '2017-01-01'; 
    var colorPattern = [
      'red', 'goldenrod', 'red', 'goldenrod', 'black', 'goldenrod', 'black',
      'red', 'black', 'red', 'goldenrod', 'red', 'goldenrod', 'black',
      'goldenrod', 'black', 'red', 'black'
    ];
    var patternLength = colorPattern.length; 
    var daysFromStart = Math.abs(moment('2017-01-01').diff(date, 'days')) % patternLength;
    var index = 0; 
    if (date.format('YYYY-MM-DD') < patternStart) {
      index = (patternLength - (daysFromStart % patternLength)) % patternLength;
    } else {
      index = daysFromStart % patternLength;
    }
    return colorPattern[index];
  }
});

Answer 2

It seems that a solution like this is effective https://jsfiddle.net/wavzxkjw/

The color pattern for shift days starting on 2017-01-01 repeats every 18 days, allowing us to calculate the color for any given day based on that.

However, the initial code block does not support calculations prior to 2017-01-01

$(document).ready(function() {
  $('#calendar').fullCalendar({
    defaultDate: '2017-01-01',
    dayRender: function(date, cell) {
      $(cell).css('background-color', determineColorForDay(date));
    }
  });

  function determineColorForDay(date) {
    var colorPattern = [
      'red', 'goldenrod', 'red', 'goldenrod', 'black', 'goldenrod', 'black',
      'red', 'black', 'red', 'goldenrod', 'red', 'goldenrod', 'black',
      'goldenrod', 'black', 'red', 'black'
    ];
    var index = Math.abs(moment('2017-01-01').diff(date, 'days')) % colorPattern.length;
    return colorPattern[index];
  }
});

Below is an improved version with better clarity and added functionality for past and future date calculations. The function name has been updated for better representation of its purpose https://jsfiddle.net/wavzxkjw/2/

$(document).ready(function() {
  $('#calendar').fullCalendar({
    defaultDate: '2017-01-01',
    dayRender: function(date, cell) {
      $(cell).css('background-color', determineColor(date));
    }
  });

  function determineColor(date) {
    var patternStart = '2017-01-01'; 
    var colorPattern = [
      'red', 'goldenrod', 'red', 'goldenrod', 'black', 'goldenrod', 'black',
      'red', 'black', 'red', 'goldenrod', 'red', 'goldenrod', 'black',
      'goldenrod', 'black', 'red', 'black'
    ];
    var patternLength = colorPattern.length; 
    var daysFromStart = Math.abs(moment('2017-01-01').diff(date, 'days')) % patternLength;
    var index = 0; 
    if (date.format('YYYY-MM-DD') < patternStart) {
      index = (patternLength - (daysFromStart % patternLength)) % patternLength;
    } else {
      index = daysFromStart % patternLength;
    }
    return colorPattern[index];
  }
});

Tips for setting up date ranges in Fullcalendar

Answer №1

Similar questions

Stay afloat at the bottom of the webpage without using xhtml

Ways to achieve an arched shadow effect for an image using React and Tailwind CSS?

Unable to apply .png image using the content property in a Symfony project

React Native: The behavior of the 'top' property is consistent, while the 'bottom' property is not performing as anticipated

There is no element available to input text using send_keys in Selenium

Utilizing CSS to position an image at both the top and bottom of a webpage

Eliminate the horizontal scrollbar generated by a certain div

Combining keyframe properties in a more efficient way using less code

What is the best way to change the maxWidthLg of Material UI's .MuiContainer?

The margin-bottom attribute does not display any vacant area

The background colors are not extending to the full width of the screen

Having Trouble with Your Instafeed Script

Bug on a Safari browser when using a dotted border on a table

Is there a way to make the text scroll up automatically when it overflows?

Any tips or hacks for successfully implementing vw resizing on the :before pseudo-element in webkit browsers?

Ways to activate a hover effect on an external element

Achieving a transparent inner box-shadow effect on hover: a step-by-step guide

Enhancing websites with CSS3 and VueJS for fluid and captivating background gradients transitions

Enhance data table by displaying a set number of rows that do not completely fill the table's height

How can I resolve the issue of a lengthy link spanning two lines in Internet Explorer, while displaying correctly in other browsers on a Bootstrap navigation