Thiết kế website giá rẻ

Question

this calendar will be the death of me.
the events now dissappear when i alter the background div to change with the month name. i’ve narrowed it down to the line between the called images and the image style code: literally the }; line. i have tried changing everything anf it will not have both the events and background image show at that same time.

   November: "url('assets/images/pgs/month11.png')",
  December: "url('assets/images/pgs/month12.png')"
}; <-- THIS IS THE ISSUE RIGHT HERE, THIS LINE -->

calendarBackgroundNode.style.backgroundImage = colors[month];

can someone please help me either have static events that i have to code for the calendar or fix it so the events and the background show up at the same time?

<!-- events code that is in header area-->

  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,listWeek'
      },

      initialDate: '2024-01-12',
      navLinks: true, // can click day/week names to navigate views
      nowIndicator: true,

      weekNumbers: true,
      weekNumberCalculation: 'ISO',

      editable: true,
      selectable: true,
      dayMaxEvents: true, // allow "more" link when too many events
      events: [
        {
          title: 'All Day Event',
          start: '2024-01-01'
        },
        {
          title: 'Long Event',
          start: '2024-01-07',
          end: '2024-01-10'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2024-01-09T16:00:00'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2024-01-16T16:00:00'
        },
        {
          title: 'Conference',
          start: '2024-01-11',
          end: '2024-01-13'
        },
        {
          title: 'Meeting',
          start: '2024-01-12T10:30:00',
          end: '2024-01-12T12:30:00'
        },
        {
          title: 'Lunch',
          start: '2024-01-12T12:00:00'
        },
        {
          title: 'Meeting',
          start: '2024-01-12T14:30:00'
        },
        {
          title: 'Happy Hour',
          start: '2024-01-12T17:30:00'
        },
        {
          title: 'Dinner',
          start: '2024-01-12T20:00:00'
        },
        {
          title: 'Birthday Party',
          start: '2024-01-13T07:00:00'
        },
        {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2024-01-28'
        }
      ]
    });

    calendar.render();
  });




<!-- code for background image change in bottom of page-->

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,listWeek'
      },



  });



  calendar.render();

  // Select the node that will be observed for mutations
  const calendarDivNode = document.getElementById("calendar");

  //select the div which the style changes will be applied to
  const calendarBackgroundNode = document.getElementById("background");


  // Options for the observer (which mutations to observe)
  const config = {
    attributes: true,
    childList: true,
    subtree: true
  };

  // Callback function to execute when mutations are observed
  const callback = (mutationList, observer) => {
    let monthFromElement = document.getElementById("fc-dom-1").innerHTML;
    let month = monthFromElement.replace(/[0-9]/g, "").trim();
    changeBackground(month);
  };

  // Create an observer instance linked to the callback function
  const observer = new MutationObserver(callback);

  // Start observing the target node for configured mutations
  observer.observe(calendarDivNode, config);

  // Function to change background
  function changeBackground(month) {
    const colors = {
      January: "url('assets/images/pgs/month01.png')",
      February: "url('assets/images/pgs/month02.png')",
      March: "url('assets/images/pgs/month03.png')",
      April: "url('assets/images/pgs/month04.png')",
      May: "url('assets/images/pgs/month05.png')",
      June: "url('assets/images/pgs/month06.png')",
      July: "url('assets/images/pgs/month07.png')",
      August: "url('assets/images/pgs/month08.png')",
      September: "url('assets/images/pgs/month09.png')",
      October: "url('assets/images/pgs/month10.png')",
      November: "url('assets/images/pgs/month11.png')",
      December: "url('assets/images/pgs/month12.png')"
    };

    calendarBackgroundNode.style.backgroundImage = colors[month];
    calendarBackgroundNode.style.backgroundRepeat = "no-repeat";
    calendarBackgroundNode.style.backgroundSize = "100%";
    calendarBackgroundNode.style.backgroundPosition = "right";

  }
  changeBackground(new Date().toLocaleString('default', { month: 'long' }));
});

<script src='calendar/calendar/dist/index.global.js'></script>




<!-- div bg container for calendar -->

<div id="background" class="bgcontainer">



  <div id='calendar'><br><br><br><br><br><br></div>

<!-- end of div bg container for calendar -->

Thiết kế website giá rẻ

Danh mục

broken events when adding change background image on calendar