Question 35651 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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);
 },

  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search