将Html添加到fullcalendar [英] Adding Html to fullcalendar

问题描述

我使用角度js中的fullCalendar。我有一个标题，并附带一些文字，以有条件地结束标题。有没有可能使用HTML，所以我可以使附加文本红色？这是代码：

  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; 
 
 
 $ b $ scope.jsonEvents.push（{
 color：apnts [i] .colorcode，
 textColor：'white'，
 id：1，
 isCore：false，
 isComplete：Math.round（Math.random（）），
 isOverdue：false，
 tooltip：''，
标题：desc，
描述：''，
 start：new Date（y，m，d，h，min），
 end：new Date（y，m，d， finHour，min），
 allDay：false，
 ref：apnts [i] .Ref 
}）; 
 
 
} 
 
所以所有的文本都是白色的，但我想这条线是红色的：
 
 desc = desc + - + apnts [i] .Status; 
  

这可能吗？

解决方案

您可以使用fullcalendar的eventRender

$ （'#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 （'span'）; var text = document.createTextNode（''+ event.status）; span.classList =makeItRed; / *可以做如果需要，可以将内联样式修改与类进行比较* / span.appendChild（text）; $（element）.find（'span.fc-title'）。append（span）;}}}）; code>

/ *而不是类，您可以在创建的内联样式如果你喜欢* / 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 = stylesheet/>< div id ='calendar'>< / div>  

b

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?

解决方案

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>

这篇关于将Html添加到fullcalendar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！