FullCalendar不渲染(使用EventRender)

Question

我想根据数据库为事件着色。我使用EventRender。这是整个代码：

  $(document).ready(function() {
      var date = new Date();
      var calendar = $('#calendar').fullCalendar({
       header: 
       {
            left: 'prev,next ',
            center: 'title',
            right: 'today'
       },
       selectable: true,
       selectHelper: true,
       fixedWeekCount: false,
       allDayDefault: true,
       editable: true,
       events: "http://localhost/calendar_directory/calendar_db_connect.php",
        eventRender: function (event, element, view) 
        {
            if (event.confirmed == 0) 
            {
                event.color = "#FFB999";
            } 
            else 
            {
                event.color = "#528881";
            }
        },
        select: function(start, end) {
          var title;
          var beforeToday = false;
          var check = $.fullCalendar.formatDate(start, "YYYY-MM-DD");
          var today = $.fullCalendar.formatDate(moment(), "YYYY-MM-DD");
          if(check < today) 
          {
            beforeToday = true;      
          }
          else 
          {
            title = prompt('Event Title:');
          }
         if (title && !beforeToday) 
         {
           var start = $.fullCalendar.formatDate(start, "YYYY-MM-DD");
           var end = $.fullCalendar.formatDate(end, "YYYY-MM-DD");
           $.ajax(
           {
               url: 'http://localhost/calendar_directory/add_events.php',
               data: 'title='+ title+'&start='+ start +'&end='+ end ,
               type: "POST",
               success: function(json) 
               {
               }
           });
           calendar.fullCalendar('renderEvent',
           {
               title: title,
               start: start,
               end: end,
           },
           true // make the event "stick"
           );
         }
         calendar.fullCalendar('unselect');
       },
       eventClick:  function(event, jsEvent, view) 
       {
            //set the values and open the modal
            $("#eventInfo").html(event.description);
            $("#eventLink").attr('href', event.url);
            $("#eventContent").dialog({ modal: true, title: event.title });
       },
       eventDrop: function(event, delta) 
       {
           var check = $.fullCalendar.formatDate(event.start, "YYYY-MM-DD");
           var today = $.fullCalendar.formatDate(moment(), "YYYY-MM-DD");
           if(check < today) {
                alert('Select an other start time, after today!');  
           }
           else
           {
             var start = $.fullCalendar.formatDate(event.start, "YYYY-MM-DD");
             var end = $.fullCalendar.formatDate(event.end, "YYYY-MM-DD");
             $.ajax(
             {
               url: 'http://localhost/calendar_directory/update_events.php',
               data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
               type: "POST",
             });
           }
       },
       eventResize: function(event)
       {
           var start = $.fullCalendar.formatDate(event.start, "YYYY-MM-DD");
           var end = $.fullCalendar.formatDate(event.end, "YYYY-MM-DD");
           $.ajax(
           {
                url: 'http://localhost/calendar_directory/update_events.php',
                data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
                type: "POST",
           });
        },
        eventClick: function(event)
        {
            var decision = confirm("Do you really want to confirm that?"); 
            if (decision) 
            {
                $.ajax(
                {
                    url: "http://localhost/calendar_directory/confirm_events.php",
                    data: "&id=" + event.id,
                    type: "POST",
                    success: function(json) 
                    {
                         console.log("confirmed");
                         //event.backgroundColor = 'green';
                         //$('#calendar').fullCalendar( 'rerenderEvents' );
                    }
                });
            }
        }
      });

（请忽略模态的Clickevent）。问题是，它不会首次改变事件的颜色（页面的第一次负载）。但是，当我删除/调整事件时，所有事件都会获得正确的颜色。

滴之前

下降

表结构：id -int，PR标题-VARCHAR开始-DATETIME结束 - 日期已确认 - int（可以为0或1）＆lt; - 应根据此

Answer 1

EventRender方法在之后运行已创建了事件的相应CSS。因此，更改与格式/渲染相关的事件的属性，此时没有效果 - 已经处理了它们。

幸运的是，您还会在回调中获取"元素"参数 - 这使您可以访问渲染的HTML，然后可以操作。

设置事件的"颜色"属性实际上会影响渲染元素的背景和边框颜色，因此我们可以替换您所做的工作：

eventRender: function (event, element, view) 
{
    if (event.confirmed == 0) 
    {
        element.css("background-color", "#FFB999");
        element.css("border-color", "#FFB999");
    } 
    else 
    {
        element.css("background-color", "#528881");
        element.css("border-color", "#528881");
    }
}

这应该具有预期的效果。可以说，这是FullCalendar中的一个错误/不良功能 - 您希望仍然能够完全操纵事件的属性并期望它们生效。另一方面，获得"元素"参数有效地使您可以完全控制事件的渲染，这比仅通过设置事件的属性要多。如果此方法在创建元素之前运行，则您将无法访问该元素，并提供所有额外的功能。因此，这是一个权衡，但是值得了解内部内容以了解您可以更改的内容，并且在此过程中可以做到。