Adding Html to fullcalendar

Question

Im using fullCalendar in angular js. I have a title and I append some text to the end of the title conditionally. Is it possible to use html so I can make the appended text red? Here is the code :

if(isIn){

                        var desc = apnts[i].Ref + ' ' + apnts[i].Company + ' : ' + apnts[i].username;

                        if(apnts[i].Status != 'Fresh' && apnts[i].Status != '' && apnts[i].Status != 'undefined' && apnts[i].Status != undefined  && apnts[i].Status != '0'){
                            desc = desc + " - " + apnts[i].Status;
                    }


                    $scope.jsonEvents.push({
                        color: apnts[i].colorcode,
                        textColor: 'white',
                        id: 1,
                        isCore: false,
                        isComplete: Math.round(Math.random()),
                        isOverdue: false,
                        tooltip: '',
                        title: desc,
                        description: '',
                        start: new Date(y, m, d, h, min),
                        end: new Date(y, m, d, finHour, min),
                        allDay: false,
                       ref: apnts[i].Ref
                    });


                }

So all the text is white, but I want this line to be red :

                            desc = desc + " - " + apnts[i].Status;

Is this possible?

Answer 1

You can use eventRender of fullcalendar

$('#calendar').fullCalendar({
  events: [{
    start: moment().format('YYYY-MM-DD'),
    title: 'Foo',
    status: 'Fresh',
  }, {
    start: moment().add(1, 'days').format('YYYY-MM-DD'),
    title: 'Bar',
    status: 'Frozen',
  }],
  eventRender: function(event, element, view) {
    if (event.status !== 'Fresh') {
      var span = document.createElement('span');
      var text = document.createTextNode(' ' + event.status);
      span.classList = "makeItRed"; /* could do inline style modifications vs. class if desired */
      span.appendChild(text);
      $(element).find('span.fc-title').append(span);
    }
  }
});

/* Instead of a class you can do inline style on the created span if you like */
span.makeItRed {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.0/fullcalendar.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.0/fullcalendar.css" rel="stylesheet"/>
<div id='calendar'></div>