qTip color matching fullcalendar event color

[lramesha]

I am integrating qTip with fullcalendar, but i got requirement to make qTip background color be same as fullcalendar event color. There are 5 different types of events and each event has different color in the calendar.
Are there is a way to ensure qTip background be same as fullcalendar event color?

---

here is code

JS Code

$(document).ready(function() {
 
InitializeCalendar();
        var custom_buttons = '<td style="padding-left:10px">' +
                                    '<div class="fc-button-next ui-state-default ui-corner-left ui-corner-right" style="background-color:white;border:0;">' +
                                        '<span>' +
                                            '<input type="hidden" id="date_picker" value="" />' +
                                            '<img src="/cal_icon.gif" id="datePickerImage" />' +
 
                                        '</span>' +
                                    '</div>' +
                                '</td>';
        $('.fc-header-title').parent('td').after(custom_buttons);
 
 
        $("#date_picker").datepicker({
            dateFormat: 'dd-mm-yy',
	numberOfMonths: 2,
 
            changeMonth: false,
            changeYear: false,
            onSelect: function(dateText, inst) {
                var d = $("#date_picker").datepicker("getDate");
                $('#calendar').fullCalendar('gotoDate', d);
            }
        });
 
        $('#datePickerImage').click(function() {
            $('#date_picker').datepicker('show');
        });
 
        $('#datePickerImage').mouseout(function() {
            $('#date_picker').datepicker('hide');
        });
 
})
function  InitializeCalendar()
{
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
 
		$('#calendar').fullCalendar({
		   editable: false,
		   disableDragging: true,
		   disableResizing: true,
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
 
			editable: false,
			events: [
 
				{
					title: 'Other',
					description: 'OtherDate: 13.10.2010Start: 5:0',
					myStyle: 'eventColor_orange', 
					start: new Date(2010, 9, 13, 5, 0),
					end: new Date(2010, 9, 13, 6, 0),
					allDay: false,
					className: 'eventColor_orange', 
 
				}, 
				{
					title: 'Consumer Protection',
					description: 'Consumer ProtectionDate: 20.10.2010Start: 9:30',
					myStyle: 'eventColor_red', 
					start: new Date(2010, 9, 20, 9, 30),
					end: new Date(2010, 9, 19, 10, 30),
					allDay: false,
					className: 'eventColor_orange', 
 
				}
			],
      eventRender: function(event, element) {
                        element.qtip({
		   overwrite: false,
                                        content : event.description,
                                        position: {corner: {target: 'rightTop', tooltip: 'leftMiddle'},
  adjust: {
                screen: false 
          }
},  
style: {
            background: '#c6cbd6',
            border: {
                  color: '#ABABAB',
                  radius: 2 
                  },
            tip: true 
        },
		   show: { when: 'focus', fixed: true },
                                   hide: { when: 'unfocus', fixed: true },
		show: { when: 'mouseover', fixed: true },
                                   hide: { when: 'mouseout', fixed: true }
                                     });
                    }
		});
 
	}

[Craig]

Hmm, prehaps the event type is stored in the vent object passed in eventRender? That way you could detected the type and set the colour accordingly?