我的FullCalendar背景颜色在ListDay或ListWeek上不起作用，而是在一个月内工作

在我的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的背景色未显示。我尝试了几种不同的事情。

您可以检查您的代码是否有所不同吗？

$(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/

相关内容

最新更新

热门标签：