Fullcalendar.js Resource Timeline, render HTML tags into Resource Titles

Question

I am creating a Resource Timeline with fullcalendar.js to display upcoming shows and would like to add the price under the show title. Here is an example of the necessary part of code:

`resourceLabelText: 'Shows',
  resources: [
   {  id: '17', 
      title: 'Test Show', 
      regularPrice: '$45.45', 
      salePrice: '$39.99' 
   },
 ],`

If possible I want to add html tags like a or around the price for styling. Searching the documentation I haven't found a way to do this. Any help appreciated.

Answer 1

Well I figured this out for anyone who wants to know. Fullcalendar has a function resourceRender . I was able to add the element with appendChild . First I needed to also add my fields to resources with extendedProps .

resourceLabelText: 'Shows',
  resources: [
   {  id: '17', 
      title: 'Test Show', 
      extendedProps: {
        regularPrice: '$45.45', 
        salePrice: '$39.99',
      }, 
   },
 ],
 resourceRender: function(info) {
   var z = document.createElement('div');
   z.innerHTML = info.resource.extendedProps.regularPrice;
   info.el.querySelector('.fc-cell-text').appendChild(z);
 },

Answer 2

To add HTML tags in the title field, you can use the html property of the event object:

resourceLabelText: 'Shows',
  resources: [
   {  id: '17', 
      title: 'Test Show', 
      regularPrice: '$45.45', 
      salePrice: '$39.99' 
   },
 ],
eventRender: function(event, element) {
  element.find('.fc-title').html(event.title + '<br><a href="#">' + event.regularPrice + '</a> | <a href="#">' + event.salePrice + '</a>');
},

This will add the regular and sale prices as links under the show title in the resource timeline. You can customize the HTML tags and their attributes as needed.