Fullcalendar 不渲染（使用 eventRender）

Question

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

  $(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）。 问题是，它不会第一次改变事件的颜色（第一次加载页面）。但是当我删除/调整事件大小时，所有事件都会得到正确的颜色。

Before drop

After drop

表结构： id - 整数，公关 标题 - varchar 开始日期时间 结束日期时间 确认 - int (可以是 0 或 1)

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 中的一个错误/不受欢迎的功能 - 您仍然希望能够完全操纵事件的属性并期望它们生效。另一方面，有效地获取“元素”参数可以让您完全控制事件的呈现，而不是仅通过设置事件的属性。如果此方法在创建元素之前运行，您将无法访问该元素，而您将无法获得所有额外的权力。所以这是一种权衡，但值得了解内部机制，以便了解您可以更改哪些内容，以及在此过程中何时可以更改。