php - Fullcalendar不渲染(使用eventRender)

我想根据数据库为事件着色。我使用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为模态）。
问题在于，它不会第一次更改事件的颜色（页面的第一次加载）。但是，当我删除/调整事件大小时，所有事件的颜色都正确。

Before drop

After drop

表结构：
id-int，PR
标题-varchar
开始日期时间
结束日期时间
已确认-int（可以为0或1）

最佳答案

eventRender方法在为事件创建相应的CSS之后运行。因此，在此过程中，此时更改与格式化/渲染相关的事件属性无效-它们已经被处理。

幸运的是，您还获得了在回调中传递给您的“ element”参数-这使您可以访问呈现的HTML，然后可以对其进行操作。

设置事件的“ color”属性实际上会影响渲染元素的背景和边框颜色，因此我们可以用以下方法替换您所做的事情：

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中的错误/不良功能-您仍然希望能够完全操纵事件的属性并希望它们生效。另一方面，有效地获取“ element”参数可让您完全控制事件的呈现，而不仅仅是设置事件的属性。如果在创建元素之前运行了此方法，则您将无权访问该元素，而这一切将为您提供更多的功能。因此，这是一个折衷，但值得了解内部原理，以便知道您可以更改的内容以及在此过程中何时可以进行更改。