Question

I have a function that dynamically adds events to the calendar.

function AddEventSourceDetailed(act_id) {
    $('#calendar').fullCalendar('addEventSource', function (start, end, callback) {
        var startTime = Math.round($('#calendar').fullCalendar('getView').start.getTime() / 1000);
        var endTime = Math.round($('#calendar').fullCalendar('getView').end.getTime() / 1000);
        time = endTime - startTime;
        //alert(time);
        if (time <= 604800) {
            $.ajax({
                type: 'POST',
                url: '/Employee/GetScheduleDetailedArray/',
                async: false,
                dataType: "json",
                data: {
                    // our hypothetical feed requires UNIX timestamps
                    start: Math.round(start.getTime() / 1000),
                    end: Math.round(end.getTime() / 1000),
                    id: '@Model.selectedUserId',
                    act: act_id
                },
                success: function (doc) {
                    callback(doc);
                },
                error: function (xhr, status, error) {
                    document.appendChild(xhr.responseText);
                }
            }); //end ajax
        } else {
            callback();
        }

    });
}

The problem is I can’t figure our how to assign a color to the event source when adding it this way.

====EDIT=====

Okay I found a hackish way to change the inside background color of events, I use the eventAfterRender and it’s element object to compare it to a list of events that I have colors associated with. I hope this will kind of help someone until I find out a better way

 $('#calendar').fullCalendar({
            height: 600,
            width: 700,
            header: {
                right: 'prev,next today',
                center: 'title',
                left: 'month,agendaWeek,agendaDay'
            },
            eventAfterRender: function (event, element, view) {
                for (x = 0; x < activityColors[0].length; x++) {
                    if (event.id == activityColors[0][x]) {
                        element.children().css({ "background-color": "#" + activityColors[1][x] })
                    }
                }

            }
        });

Answer 1

in your function, whats the a result of that ajax call? By what you have in code ( success:function (doc) {callback(doc);} ), I guess on success you are receiving array of events encoded in json, so only thing you need for adding colors is to define fields color, backgroundColor, borderColor, textColor in your server-side script for every event. Hope this helps.

Jan

EDIT: I also noticed that you are calling callback() function in else branch, which is really redundant. Without parameters, its pointless to call callback, because it will do nothing (callbacks parameter is array of events to be added to fullcalendar, so no paramater = no events to add = same as it wasnt even called).