Q:

How to change background Color on external element drop based on it's id: Fullcalendar?

I am trying to change background Color of the external element on drop. So how to do that?
My code is following and I wanted to do something like if I drop red then red color of element on drop. If I drop green then...... so basically, based on it's id it change the color of element. As if you see then when you drop anything on week calendar, it's by default color is getting blue but it should transform to red as you are dropping red for ex.
Any help will be really useful thanks guys
Here is my code:
jsFiddle link  http://jsfiddle.net/jimil/8hqe3wxd/2/

A:

My suggestion would be to add a data-attribute to the draggable components, not rely on their class (since theres more in their class than just the color)
and then when building the little dragged components in the external events section, set a color attribute (either red, orange, purple or the actual css color)
http://jsfiddle.net/8hqe3wxd/4/
in the fiddle, observe i added data attributes to the html:
<div class='fc-event orange' id="1" data-color="orange">Orange</div>
<div class='fc-event red' id="2" data-color="red">Red</div>
<div class='fc-event purple' id="3" data-color="purple">Purple</div>

and added a line to the external events config
color: $(this).data('color')

this is storing what color you want each draggable to be, and setting that color when building the little calendar element.
hopefully this is what you want

