fullCalendar - addEventSource 带有颜色选项

发布于 2024-12-07 02:47:45 字数 2084 浏览 0 评论 0原文

我有一个功能可以动态地将事件添加到日历中。

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

    });
}

问题是我无法弄清楚以这种方式添加事件源时如何为事件源分配颜色。

====编辑=====

好吧,我找到了一种改变事件内部背景颜色的黑客方法,我使用 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] })
                    }
                }

            }
        });

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] })
                    }
                }

            }
        });

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

清醇 2024-12-14 02:47:46

在你的函数中,ajax 调用的结果是什么?根据您在代码中的内容( success:function (doc) {callback(doc);} ),我想成功后您将收到以 json 编码的事件数组,因此添加颜色唯一需要的就是定义字段颜色,每个事件的服务器端脚本中的backgroundColor、borderColor、textColor。希望这有帮助。

Jan

编辑:我还注意到您在 else 分支中调用回调()函数,这确实是多余的。如果没有参数,调用回调是没有意义的,因为它不会执行任何操作(回调参数是要添加到 fullcalendar 的事件数组,因此没有参数 = 没有要添加的事件 = 与它甚至没有被调用相同)。

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).

趁年轻赶紧闹 2024-12-14 02:47:45

您可以使用:

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

You can use:

$('#calendar').fullCalendar( 'addEventSource', {
    url: "/url/goes/here",
    color: '#05ABBD'
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文