FullCalendar - how can I maintain a class from a dragged external event source

I am using fullCalendar and jquery. I have started by using the "Dragging External Events onto the Calendar" Demo.

Each External "source" has an additional class so that each source has a different color;

<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> 

I have modified the Drop callback to try to get this additional class and then add it to the newly copied event object.

To save space here is only the 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/)
开发者_Python百科            $('#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();
            }

        },

The problem is the class isn't applying at all. If I alert(thisClass) it is the correct class name but the new event has the "default" style of the calendar and there is no visual difference between the teams.

Any suggestion are greatly appreciated. Lance

There are a few things wrong with your code:

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

1. You're re-declaring thisClass each time you hit the if statement.
2. You're doing substring(0, 5) and matching it against team. 'team' is only 4 characters. If you want to know if it starts with 'team' then do a substring(0, 4)

Try this instead:

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

Also FullCalendar supports an optional attribute on the eventObject called className. Change

$(copiedEventObject).addClass(thisClass);

to

copiedEventObject.className = thisClass;

The last thing to check, in your css file find the class fc-event-skin and remove the color, background-color and border attributes. (Or modify the CSS however you want). This CSS class is likely overriding your custom styling.