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

Before drop

After drop

表格结构： id - int，PR title - varchar start -datetime 结束日期确认 - int（可以是0或1）＆lt; - 颜色应根据此

更改

Answer 1

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

幸运的是，你也得到了＆＃34;元素＆＃34;在回调中传递给您的参数 - 这使您可以访问呈现的HTML，然后可以对其进行操作。

设置＆＃34;颜色＆＃34;事件的属性实际上会影响渲染元素的背景和边框颜色，因此我们可以替换您使用的内容：

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中的错误/不良功能 - 您仍然希望仍然能够完全操纵事件的属性并期望它们生效。另一方面，获得＆＃34;元素＆＃34;参数有效地使您可以完全控制事件的呈现，而不仅仅是通过设置事件的属性。如果在创建元素之前运行此方法，则您将无法访问该元素，并具有为您提供的所有额外功能。所以这是一种权衡，但是为了了解你可以改变的内容，了解内部情况是值得的，并且在这个过程中你可以做到。

Fullcalendar不呈现（使用eventRender）

1 个答案: