2016-08-05 62 views
1

Im mit FullCalendar in eckigen js. Ich habe einen Titel und füge am Ende des Titels etwas Text an. Ist es möglich, HTML zu verwenden, damit ich den angehängten Text rot machen kann? Hier ist der Code:Hinzufügen von HTML zu Vollkalender

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; 

Ist das möglich?

Antwort

1

Sie können eventRender von fullcalendar verwenden

$('#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>