Question

I am working with jQuery weekcalendar plugin to show a webbased calendar with appointments. The color of all events is set in this CSS part:

.wc-cal-event {
    background-color: #00BFFF;
    font-size: 0.8em;
    position: absolute;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    color: #000;
    width: 100%;
    border: 1px solid #000;
    font-weight: normal;
}

I just implemented the feature that a new appointment in the calendar belongs to a category (like in Outlook). Based on this category, the background color of the appointment should change, let’s say it should be red.

How can I change the background of an event dynamically? When I change .wc-cal-event, every background of each event is affected.

Thanks for your answers.

Answer 1

It can be done in this function:

eventRender : function(calEvent, $event) {
    $.ajax({
        url: url,
        dataType: 'json',
        async: false,
        success: function(data) {
            $.each(data, function(i, appointment) {
                $event.css('backgroundColor', appointment.htmlColor);
                $event.css('color', appointment.textColor);
            });
        }
    });
}