Search code examples
jquery-pluginspluginsfullcalendarcolor-picker

Full Calendar customized colors

I need to add custom color in creating each event in the full calendar (just like in the google calendar- the user can customize the text and bg colors of events).

Do you know any color picker plugins that may best fit to full calendar?

Solution

  • You can set the CSS Class name for a new event. Like

    var myEvents = [
  {
    title: 'XMas',
    start: theDate,
    className : 'holiday'
  }
];

    Then to update the style of the given event type do something like the following:

    #calendar .holiday,
#calendar .holiday div,
#calendar .holiday span {
  background-color: #6d4d47;
  color: #ffffff;
  border-color: #6d4d47;
  font-size: 12px;
}