Is there a way to prevent the title from showing up every week when a long event is added in FullCalendar JS? Perhaps we can find a solution to display the title

Has anyone encountered an issue with fullcalendar js where the title of a long event shows up every week? I've tried using this code on versions 5 and 6, but the title continues to display weekly. Is there a way to make the title show up only once?

<!DOCTYPE html>
<html lang='en'>
<!-- https://fullcalendar.io/docs/initialize-globals-->
<head>
<meta charset='utf-8' />
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bbb7aabd98eef6e9f6e9e8">[email protected]</a>/index.global.min.js'> 
</script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c484d554b5e45486c1a021d021d1c">[email protected]</a>/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>

To see how it appears when rendered in the browser, check out the image here: https://i.sstatic.net/JiiUh.png

Answer №1

While unfamiliar with this library, I stumbled upon an event named eventContent that triggers once for every new line added. Interestingly, it always references the same object. To tackle this, I devised a workaround involving a list that excludes the initial element. Upon encountering the same object again, instead of displaying the title, it generates an empty element.

This approach resolved the issue in the provided example, although testing it thoroughly in a more complex setting is advisable. I must admit, it's probably not the most elegant solution out there - humorously so!

Check out Content Injection in FullCalendar Documentation

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b4b8a5b795e3ffb0bdb0bdb6">[email protected]</a>/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e3c6ded0f5eed503156d725d6659681a63e89830efcea9949a879bb193cedecd15ac02596659ead53de041fdb808282883ea889811b9cb1efaebaeebe5ca17fffa7adbf">[email protected]</a>/index.global.min.js"></script>
<div id='calendar'></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am having trouble getting my AngularJS client to properly consume the RESTful call

As I venture into the world of AngularJS and attempt to work with a RESTful service, I am encountering a challenge. Upon making a REST call to http://localhost:8080/application/webapi/myApp/, I receive the following JSON response: { "content": "Hel ...

Navigating efficiently with AngularJS directives

Hello, I am currently searching for a solution to dynamically modify the navigation links within the navigation bar based on whether a user is logged in or not. Of course, a logged-in user should have access to more pages. I have developed a UserService t ...

Utilize regular expressions in TamperMonkey to extract specific groups of text

I'm currently working on a TamperMonkey userscript that aims to identify URLs matching a specific pattern, visit these pages, extract relevant information, and then update the link for each URL with the extracted text. I'm facing some challenges ...

Identifying JSON Attributes in Nonexistent Objects Function

Is there a method to verify the existence of a property in JSON data without specifying a particular object? Here's an example: data.programs.text.background In this case, background is a property of text. But what if the text object doesn't e ...

Ways to attach an item using its lower point instead of its upper coordinate

I am currently working on a poker table project using React. As of now, I have player components that need to be strategically positioned around the table. https://i.sstatic.net/gX9Ij.png One challenge I'm facing is that when the screen attribute ch ...

Is it feasible to exclude certain CSS files in an HTML Master page within the .NET framework?

On my website, I have 6 CSS files linked, but on a specific page, I only need to use 3 of them. Our developers are using a master page in .NET and are hesitant to make changes to it. Therefore, I am wondering if there is a way to exclude certain linked C ...

How can I efficiently fetch data from Firebase, manipulate it through computations, and present it using React Hooks?

I am currently working on retrieving multiple "game" objects from Firebase Storage, performing statistical calculations on them, and then presenting the game statistics in a table. Here is an overview of my code structure: function calculateTeamStatistics( ...

Utilizing information shared between parent and child classes to plot points on a globe

Working on an exciting project to enhance my ReactJS and ThreeJS knowledge, I encountered an issue with passing data from the parent class to functions in the child class. Here's a glimpse of my project: App.js import React, {Component} from 'rea ...

I am experiencing an issue where my 'ng-click' does not work when constructing a tree with ng-include

As I work on constructing a tree structure using the 'ng-include' directive, everything appears to be in order when I refer to the following code: <script type="text/ng-template" id="tree_node.html"> <a ng-click="select(this, data, ...

showing a loading spinner while sending an ajax request, patiently awaiting the response, and preventing any further interactions on the page

On my page, I am utilizing multiple ajax calls to load specific parts of the response. However, I need to display a spinner on the section where the ajax call is being made to indicate that content is loading. Is there a way to create a universal method th ...

I possess multiple checkboxes that appear as described below. I am looking to modify the nested value highlighted in the blue circle in the image

I need to make a change in this area of my state: view screenshot The specific portion highlighted in the circle is what I want to modify **Here is my checkbox input code:** {this.state.data.map((elm) => ( <div className={classes.rowContainer}&g ...

How can I prevent an endless loop in jQuery?

Look at the code snippet below: function myFunction(z){ if(z == 1){ $(".cloud").each(function(index, element) { if(!$(this).attr('id')){ $(this).css("left", -20+'%'); $(this).next('a').css ...

The connection to Cordova.js is established, but the deviceready event is not

I've included cordova.js in my project, called app.initialize();, but for some reason deviceready event is not being triggered. Any ideas on what might be causing this issue? Here's the JavaScript code: var app = { initialize: function() { ...

JavaScript timing the completion of AJAX requests

I'm working on a basic ajax request using js and php to fetch data from mysql. Check out the code snippet below: function ajax_function(a,b) { $.ajax({ type : 'POST', url : mine.ajax_url, dataType : 'json&ap ...

Custom dropdown selection using solely JavaScript for hidden/unhidden options

I'm trying to simplify things here. I want to create a form that, when completed, will print the page. The form should have 3-4 drop-down lists with yes or no options. Some of the drop-downs will reveal the next hidden div on the form regardless of th ...

Removal of div elements based on checkbox being unchecked - a step-by-step guide

How can I delete elements from a div when the checkbox is unchecked? function removeCampaignName(id) { var campaignDisp = $('#camp' + id).html(); if ($("#campaign-name-disp").text().search("" + campaignDisp) === -1) { ...

Show images exclusively on screens with a smaller resolution

Looking for assistance in modifying the code below to only display the image in mobile view, instead of constantly appearing. <style type="text/javascript> .icon-xyz {float: left; width: 22px;cursor: pointer;background: none;} @me ...

Is there a way to utilize a variable as a key within an object?

Can this be done? Take a look at a practical example from the real world: var userKey = "userIdKey"; chrome.storage.sync.set({ userKey: "Hello World" }, function () { chrome.storage.sync.get(userKey, function (data) { console.log("In sync:", ...

Parsing JSON data results in a string output

After realizing that my initial post was not clear enough, here are more details. Jade: meta(name='revObj', content=(JSON.stringify('#{rev[1]}'))) The resulting HTML from Jade: <meta name="revObj" content=""{ companyAddress: &apo ...

Using jQuery to remove any HTML tags from user input

I have multiple inputs with text, but they are displaying with unwanted HTML tags. I attempted various solutions without success. Below is my jQuery code to extract data from a table: $(editModal+" #Website").val(n);; Here is an example of my input code: ...