New Line in Entry Title

[ARCHERS]

How do you create a new line in Entry Title? Adding \n or html to the title string doesn't seem to work . As per the example at https://codepen.io/acerix/pen/YzyrwJV, I tried the following without success:

calendar.setEntryContentCallback("" +
    "function(arg) {" +
    "   return {html: arg.event.title.replace(/\\n/g, '<br>')}" +
    "}"
    );

Can you help?

[aetasoul]

Hi @ARCHERS

Using your codepen sample it's working the \n:

I just edited the events array and placed in the title the \n and updated the start date

events: [
      {
        title: 'All\nDay Event',
        start: '2022-03-01'
      }
    ]

To make it work in Flow I did nothing, just placed in the title the \n.

entry.setTitle("My title \n with new line")

Try to remove setEntryContentCallback

[ARCHERS]

Thanks. However the \n does not work for me using entry.setTitle(). I'm using ResourceEntry and FullCalendar/Scheduler version 4.1.2. Which version are you using - could there be a difference?

[aetasoul]

Probably yes, I'm updating now and it stopped working.

Let me check

[aetasoul]

This is the best way that I found to have the new line: calendar.addCustomStyles(".fc-event-title{white-space: normal;}");

[ARCHERS]

Great that works - so if I use: calendar.addCustomStyles(".fc-event-title{white-space: pre-line;}");
then I get a line break with \n. If I use calendar.addCustomStyles(".fc-event-title{white-space:normal;}"); as expected it wraps the text according to space but ignores new line break.

Thanks for your help.

[stefanuebe]

Hi @ARCHERS

Using your codepen sample it's working the \n:

I just edited the events array and placed in the title the \n and updated the start date

events: [
      {
        title: 'All\nDay Event',
        start: '2022-03-01'
      }
    ]

To make it work in Flow I did nothing, just placed in the title the \n.

entry.setTitle("My title \n with new line")

Try to remove setEntryContentCallback

In which version did it work for you?

[aetasoul]

I thought it was on a recent version, but the project where I made the \n to work was made with the v4 of the calendar, so it was working before the v5 update

[aetasoul]

Version 3.1.0, I'm searching on the repo trough my phone but it's confusing

[stefanuebe]

Then it might be really "just", that they changed the basic whitespace styling with the new major version, which prevents setting simple new lines in the title

[aetasoul]

Yes, I'll check the CSS and search for it, but I think it's like this. I'd like to know so we can add it to the wiki