Search code examples
javascriptfullcalendarfullcalendar-6

fullcalendar js when a long event added the title show up every week. Is that a way to make the title show up once?

fullcalendar js when a long event added the title show up every week. Is that a way to make the title show up once ? I try the code on v5 and v6 the title show up every week.

<!DOCTYPE html>
<html lang='en'>
<!-- https://fullcalendar.io/docs/initialize-globals-->
<head>
<meta charset='utf-8' />
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/index.global.min.js'> 
</script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      events: [
            {
                title: 'Testing 1 the quick brown fox jumps over the lazy dog.',
                start: '2024-01-02',
                end: '2024-02-03',
                color: 'green'
            }
        ],
    });
    calendar.render();
  });

</script>
</head>
<body>
   <div id='calendar'></div>
</body>
</html>

Here is what it look like when render the page at the browser enter image description here

Solution

  • I never used this library, I didn't understand much, but I discovered that there is an event called eventContent that runs once for each line added. And that he always uses the same object. So I created a list that skips the first element and the next time it identifies the same object instead of playing the title it creates an empty element.

    This solved the problem in your example, but test it well in a real environment with more information and I emphasize that it must be the worst way to do it haha.

    Content Injection - Docs | FullCalendar

    document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var ignoreFirstList = [];
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    events: [
          {
              title: 'Testing 1 the quick brown fox jumps over the lazy dog.',
              start: '2024-01-02',
              end: '2024-02-03',
              color: 'green'
          }
      ],
      eventContent: function (arg) {
          var obj = arg.event._def

          if (!ignoreFirstList.includes(obj)) {
              ignoreFirstList.push(obj)
              return true
          }

          // create empty span (but with height > 0)
          var span = document.createElement("span")
          span.textContent = obj.title[0] || "W"
          span.style.opacity = 0
          span.style.userSelect = "none"

          var arrayOfDomNodes = [span]
          return { domNodes: arrayOfDomNodes }
      },
  });
  calendar.render();
});
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/index.global.min.js"></script>
<div id='calendar'></div>