Question

在我的fullcalendar的ajax数据中，我有一个名为backgroundc的字段，表示事件背景颜色的红色变化。这在默认的月视图中完美地工作，但在listDay或listWeek veiw中没有想到，当检查代码时，tr类fc-list-item确实将背景颜色的属性显示为这些事件的红色。我还有一个qtip事件正在运行，适用于所有视图。我正在运行fullcalendar 3.0.1 这是我日历的代码。

<script type="text/javascript">
        $(function(){
            $("#divcalander").fullCalendar({
                aspectRatio: 1.6,       
                header:{
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,listWeek,listDay,listMonth'
                },
                views:{
                    month:{
                        titleFormat: '[MCH In-Sevices for ]'+'MMMM YYYY'
                    },
                    listWeek:{buttonText: 'List Week'},
                    listDay:{buttonText: 'List Day'},
                    month:{buttonText: 'Month'},
                    listMonth:{buttonText: 'List Month'}
                },
                theme: true,
                events:{
                    url:'populateinservicecal.php',
                    type:"get",
                    dataType:"json",
                    data:{startParam:'startDate',endParam:'endDate'}        
                },
                eventRender:function(event,element){
                    element.qtip({
                        content:
                            {text:"Location: "+event.locationdescr,
                            title:event.title},
                         position: {
                            my: 'bottom left',
                         style:{
                            classes: 'qtip-cream'
                         }
                        }                                 
                    })
                    if(event.backgroundc=="Red"){
                        element.css('background-color','Red')
                    }

                },
                eventLimit: false,
                timeFormat: 'h:mmt'
            })
        })
    </script>



    <title>HRS Class Sessions</title>
</head>
<body>

    <div style=" margin: auto; width: 900px;">
        <div style="height: 20px;"></div>
        <div id="divcalander"></div>
        </br>
        <div id="statementdiv">
        <h2 id="redstatement">Any event with a red background is a mandatory annual inservice.</h2>
        </div>
    </div>

以下是对月份事件的检查，该工作正常。

<td class="fc-event-container">
<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end" data-hasqtip="40" aria-describedby="qtip-40" style="background-color: rgb(255, 0, 0);">
    <div class="fc-content">
        <span class="fc-time">10:30a</span> 
        <span class="fc-title">The Class</span>
    </div>
</a>

现在这里是检查同一事件的listDay视图

<tr class="fc-list-item" data-hasqtip="68" aria-describedby="qtip-68" style="background-color: rgb(255, 0, 0);">
<td class="fc-list-item-time ui-widget-content">10:30a</td>
<td class="fc-list-item-marker ui-widget-content">
    <span class="fc-event-dot"></span>
</td>
<td class="fc-list-item-title ui-widget-content">
    <a>The Class</a>
</td>

正如您所看到的那样，月份事件中的a标签的背景颜色为红色，显示在日历上，但在listDay视图中，tr的背景颜色未显示。我尝试了几种不同的东西无济于事。有什么想法吗？

Answer 1

你能检查一下你的代码是否与这个小提琴不同吗？

$(document).ready(function() {
    $('#calendar').fullCalendar({
 aspectRatio: 1.6,   
 theme: true,
 eventLimit: false,
            timeFormat: 'h:mmt',
        header:{
                left: 'prev,next today',
                center: 'title',
                right: 'month,listWeek,listDay,listMonth'
            },
            views:{
                month:{
                    titleFormat: '[MCH In-Sevices for ]'+'MMMM YYYY'
                },
                listWeek:{buttonText: 'List Week'},
                listDay:{buttonText: 'List Day'},
                month:{buttonText: 'Month'},
                listMonth:{buttonText: 'List Month'}
            },
        defaultView: 'month',
  events: [

            {
                title: 'Meeting',
                start: '2016-12-01T10:30:00',
                end: '2016-12-01T12:30:00',
      backgroundc: 'red'
            },
        {
                title: 'Meeting 2',
                start: '2016-12-01T12:30:00',
                end: '2016-12-01T14:30:00',
      backgroundc: 'green'
            }
        ],
eventRender:function(event,element){
if (event.backgroundc == 'red') {
               element.css('background-color', '#ff0000');
               }
            },


});
});

https://jsfiddle.net/5wuop1z0/

最好的问候的Krzysztof

我的fullcalendar背景颜色不适用于listDay或listWeek，但适用于月份

1 个答案: