fullCalendar - 带颜色选项的addEventSource

时间:2011-09-29 14:13:23

标签: javascript jquery calendar fullcalendar

我有一个动态添加事件到日历的功能。

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();
        }

    });
}

问题是我无法想象如何以这种方式添加颜色到事件源。

==== EDIT =====

好的,我发现了一种改变事件内部背景颜色的hackish方法,我使用eventAfterRender和它的元素对象将它与我有颜色关联的事件列表进行比较。我希望这会有所帮助,直到我找到更好的方式

 $('#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] })
                    }
                }

            }
        });

2 个答案:

答案 0 :(得分:2)

您可以使用:

$('#calendar').fullCalendar( 'addEventSource', {
    url: "/url/goes/here",
    color: '#05ABBD'
});

答案 1 :(得分:1)

在你的函数中,那个ajax调用的结果是什么?通过代码中的内容(成功:函数(doc){callback(doc);}),我猜你成功接收了以json编码的事件数组,所以只需要添加颜色就可以定义字段颜色,每个事件的服务器端脚本中的backgroundColor,borderColor,textColor。希望这会有所帮助。

编辑:我也注意到你在else分支中调用了callback()函数,这实际上是多余的。没有参数,它无意义地调用回调,因为它不会做任何事情(callbacks参数是要添加到fullcalendar的事件数组,所以没有paramater =没有要添加的事件=相同甚至没有被调用)。