Question

我正在使用fullCalendar和jquery。我已经开始使用“将外部事件拖到日历上”演示。

每个外部“来源”都有一个额外的类，以便每个来源都有不同的颜色;

<style>
.team1 {background: #3366CC; color:#000;}
.team2 {background: #CC6633; color:#000;}
.team3 {background: #CCA833; color:#000;}
.team4 {background: #CC997F; color:#000;}
.team5 {background: #433521; color:#000;}
</style>
<div id='external-events'>
   <h4>Teams</h4>
   <div class='external-event team1'>Doug</div>
   <div class='external-event team2'>Al</div>
   <div class='external-event team3'>Rances</div>
   <div class='external-event team4'>Dave</div>
   <div class='external-event team5'>Jennifer</div>
</div>

我修改了Drop回调以尝试获取此附加类，然后将其添加到新复制的事件对象中。

为了节省空间，这里只是下降

 drop: function(date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // this checks to see the the object being dragged has a "teamx" class associated to it
            var valueArray = ($(this).attr('class')).split(" ");
/* here find team class */
        for(var i=0; i<valueArray.length; i++){
              if (String(valueArray[i]).substring(0,5) == 'team'){
               var thisClass = valueArray[i];
              }
            }
            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;
/* attempt to apply team class */
$(copiedEventObject).addClass(thisClass);
            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

        // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }

        },

问题是班级根本没有申请。如果我提醒（thisClass）它是正确的类名，但新事件具有日历的“默认”样式，并且团队之间没有视觉差异。

非常感谢任何建议。兰斯

Answer 1

您的代码存在一些问题：

for(var i=0; i<valueArray.length; i++){
  if (String(valueArray[i]).substring(0,5) == 'team'){
    var thisClass = valueArray[i];
  }
}

每次点击if语句时，您都会重新声明thisClass。
您正在进行substring(0, 5)并将其与团队匹配。 '团队'只有4个字符。如果您想知道它是否以“团队”开头，请执行substring(0, 4)

请改为尝试：

var thisClass;
for(var i=0; i<valueArray.length; i++){
  if (String(valueArray[i]).substring(0,4) == 'team'){
    thisClass = valueArray[i];
  }
}

FullCalendar还支持名为className的eventObject上的可选属性。变化

$(copiedEventObject).addClass(thisClass);

到

copiedEventObject.className = thisClass;

要检查的最后一件事，在您的css文件中找到类fc-event-skin并删除color，background-color和border属性。（或者根据需要修改CSS）。这个CSS类可能会覆盖您的自定义样式。

FullCalendar - 如何从拖动的外部事件源维护一个类

1 个答案: