javascript jquery css fullcalendar fullcalendar-3

How do I change background color/image based on currently viewed month?

I am building a calendar using Full calendar. I have a specific background that I want for each month. The color changes according to the current day correctly. If it is currently march 17, it will show the march background.

I cannot figure out how to make the background change whenever I browse to look at future/past months. It stays the same. I want the background to change when I look at a different month.

Thanks in advance! I'm scratching my head at this one!

My code correctly sets the current months background initially.

Today's date with the correct background color

When I browse to another month it doesn't change.

Browsing to new months keeps the same color when it should be changing

If i change my PC's time to another month, the background is different, so that part works.

Image when i change my computer time to a different time

My Current Code:

<script>
  $(document).ready(function() {
    var monthColors = [
            "#FF5733",   // January - Red-Orange
            "#33B5E5",   // February - Blue
            "#A569BD",   // March - Purple
            "#58D68D",   // April - Green
            "#F4D03F",   // May - Yellow
            "#FF8C00",   // June - Orange
            "#4682B4",   // July - Steel Blue
            "#DC143C",   // August - Crimson
            "#20B2AA",   // September - Light Sea Green
            "#FF6347",   // October - Tomato
            "#2E8B57",  // November - Sea Green
            "#B22222"   // December - Fire Brick
        ];       
        function updateBackground(date) {
            var month = date.getMonth(); // Get displayed month
            console.log("Updating background for month:", month + 1); // Debugging log
            $("body").css("background-color", monthColors[month]);
        }

  $('#calendar').fullCalendar(
    {
      header:
      {
        left: '',
        center: 'title'
      },
      events:
      [
        {
          title: 'Marriage',
          start: '2025-03-17',
          color: 'transparent',
          textColor: 'black',
          imageurl: 'birthday.png'
          },
          {
          title: 'Marriage',
          start: '2025-03-19',
          end: '2025-03-20',
          color: '#8E9A75',
          textColor: 'white',
          imageurl: 'birthday.png'
          }
      ],
      eventRender: function(event, eventElement) {
      if (event.imageurl) {
        eventElement.prepend("<img src='" + event.imageurl + "' width='80' height='80' >");
      }  return ['all', event.tags].indexOf($('#event_selector option:selected').val()) >= 0;
      },
      datesSet: function(info) {
        var currentMonth = calendar.getDate().getMonth() + 1;
            console.log("Currently viewed month:", currentMonth);
      },

      
  }); 

  setTimeout(function() {
            updateBackground(new Date());
        }, 100);

});


</script>

Solution

I could not get your code to work - there were syntax errors (missing {) etc.

Here is a version with the Fullcalendar updated to v6 and using the new syntax to instantiate the FullCalendar

Note that the dataSet function handles the initial render too making the setTimeout redundant so I removed it.

$(document).ready(function() {

  const updateBackground = (date) => {
    const month = date.getMonth();
    // console.log("Updating background for month:", month + 1);
    $("body").css("background-color", monthColors[month]);
  };

  // Initialize FullCalendar
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: { // Updated from 'header' to 'headerToolbar'
      left: '',
      center: 'title',
      right: ''
    },
    events: events, // from elswhere on the page or Ajaxed
    eventContent: (arg) => { // Updated from 'eventRender' to 'eventContent'
      const event = arg.event;
      if (event.extendedProps.imageurl) {
        return {
          html: `<img src="${event.extendedProps.imageurl}" width="80" height="80"><br>${event.title}`
        };
      }
      return true; // Default rendering
    },
    datesSet: (info) => {
      const currentMonth = info.view.currentStart.getMonth() + 1;
      // console.log("Currently viewed month:", currentMonth);
      updateBackground(info.view.currentStart); // Update background when view changes - handles the initial view too
    },
  });

  // Render the calendar
  calendar.render();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>


<div id="calendar"></div>





<script>
  // consts better sourced from elsewhere - ajax for example
  const monthColors = [
    "#FF5733", "#33B5E5", "#A569BD", "#58D68D", "#F4D03F",
    "#FF8C00", "#4682B4", "#DC143C", "#20B2AA", "#FF6347",
    "#2E8B57", "#B22222"
  ];

  const events = [{
      title: 'Birthday',
      start: '2025-03-17',
      color: 'transparent',
      textColor: 'black',
      imageurl: 'https://images.freeimages.com/image/previews/1db/birthday-quote-png-celebration-5690238.png'
    },
    {
      title: 'Marriage',
      start: '2025-03-19',
      end: '2025-03-20',
      color: '#8E9A75',
      textColor: 'white',
      imageurl: 'https://clipart-library.com/img/812312.png'
    }
  ];
  </script>

Since we use the new version 6, there is no need for jQuery. I changed the image handling a bit

document.addEventListener('DOMContentLoaded', function() {
  const updateBackground = (date) => {
    const month = date.getMonth();
    document.body.style.backgroundColor = monthColors[month]; // Vanilla JS instead of jQuery
  }

  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: '',
      center: 'title',
      right: ''
    },
    events: events,
    eventContent: (arg) => {
      const event = arg.event;
      if (event.extendedProps.imageurl) {
        const img = document.createElement('img');
        img.src = event.extendedProps.imageurl;
        img.width = 80;
        img.height = 80;
        const title = document.createTextNode(event.title);
        const container = document.createElement('div');
        container.appendChild(img);
        container.appendChild(document.createElement('br'));
        container.appendChild(title);
        return {
          domNodes: [container]
        }; // Return DOM nodes instead of HTML string
      }
      return true;
    },
    datesSet: (info) => {
      const currentMonth = info.view.currentStart.getMonth() + 1;
      updateBackground(info.view.currentStart);
    }
  });

  calendar.render();
});

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>


<div id="calendar"></div>



<script>
  // consts better sourced from elsewhere - ajax for example
  const monthColors = [
    "#FF5733", "#33B5E5", "#A569BD", "#58D68D", "#F4D03F",
    "#FF8C00", "#4682B4", "#DC143C", "#20B2AA", "#FF6347",
    "#2E8B57", "#B22222"
  ];

  const events = [{
      title: 'Birthday',
      start: '2025-03-17',
      color: 'transparent',
      textColor: 'black',
      imageurl: 'https://images.freeimages.com/image/previews/1db/birthday-quote-png-celebration-5690238.png'
    },
    {
      title: 'Marriage',
      start: '2025-03-19',
      end: '2025-03-20',
      color: '#8E9A75',
      textColor: 'white',
      imageurl: 'https://clipart-library.com/img/812312.png'
    }
  ];
  </script>