Question

是否可以通过创建一个封装fullcalendar的新插件来添加像谷歌日历中列出的所有事件一样列出所有事件的议程视图。

这意味着，如果不使用原始代码，有没有办法实现这一目标？

Answer 1

在此处发布在fullcalendar.js中添加新视图的解决方案。我需要在fullcalendar.js中为我的一个项目实现一个Agenda或List视图。在这个过程中，我有机会通过Adam对代码进行逆向工程。我必须说这个插件使用了一些非常好的编码实践和javascript概念。

我认为如果我在这里分享我的发现和解决方案对用户有用。包含的列表视图具有以下功能：

功能齐全且可自定义的列表/日程视图
使用附带的箭头按钮进行分页
点击/悬停对事件的影响
使用分页动态调用列表视图的事件

首先，我们不能在不触及fullcalendar源代码的情况下这样做。 Javascript不允许这种可扩展性。但是，我保持尽可能简单的事情，我也发布了从头开始复制它的步骤以及源代码。这将有助于将来更新fullcalendar.js

首先，我们需要定义一个新视图来显示事件列表。视图定义为fullcalendar.js中的对象，可以使用构造函数添加。您可以在此URL https://gist.github.com/amitesh-m/5744528上找到列表视图的构造函数。此函数定义并初始化一个名为“list”的新视图。在其中，renderEvents是主要成员函数，它在此视图上呈现可用事件并附加单击/悬停事件触发器。

接下来我们需要更改Calendar对象的updateEvents函数（第＃500行）。这样做是为了取消链接列表视图的fullcalendar.js的默认事件调用行为。修改后的函数如下所示：

    function updateEvents(forceRender) {
    if (currentView.name == "list") {
        currentView.visStart = new Date(0);
        currentView.visEnd = new Date(currentView.page * 1000);
        refetchEvents();
    } else if (!options.lazyFetching || isFetchNeeded(currentView.visStart, currentView.visEnd)) {
        refetchEvents();
    }
    else if (forceRender) {
        rerenderEvents();
    }
}

对于其他视图，一切都会像以前一样工作，但现在日历会向列表视图的事件服务器发送稍微不同的请求。现在，当有人点击列表视图时，fullcalendar将设置“start = 0”和“end = 1”。页面上显示的项目数由服务器管理。

接下来，我们需要更改日历对象的renderView（）函数（第374行）。这是为了在我们的列表中根据fullcalendar.js中包含的alreaedy的箭头按钮启用分页。此功能应如下所示：

function renderView(inc) {
    if (elementVisible()) {
        ignoreWindowResize++; // because renderEvents might temporarily change the height before setSize is reached

        unselect();

        if (suggestedViewHeight === undefined) {
            calcSize();
        }

        var forceEventRender = false;
        if (!currentView.start || inc || date < currentView.start || date >= currentView.end) {
            // view must render an entire new date range (and refetch/render events)
            currentView.render(date, inc || 0); // responsible for clearing events
            setSize(true);
            forceEventRender = true;
        }
        else if (currentView.sizeDirty) {
            // view must resize (and rerender events)
            currentView.clearEvents();
            setSize();
            forceEventRender = true;
        }
        else if (currentView.eventsDirty) {
            currentView.clearEvents();
            forceEventRender = true;
        }

        if (currentView.name == "list") {
            forceEventRender = true;
            if (inc == 1) {
                currentView.page++;
                currentView.title = "Page " + currentView.page;
            } else if (inc == -1) {
                currentView.page--;
                currentView.title = "Page " + currentView.page;
            }
        }
        currentView.sizeDirty = false;
        currentView.eventsDirty = false;
        updateEvents(forceEventRender);

        elementOuterWidth = element.outerWidth();

        header.updateTitle(currentView.title);
        var today = new Date();
        if (today >= currentView.start && today < currentView.end) {
            header.disableButton('today');
        } else {
            header.enableButton('today');
        }

        ignoreWindowResize--;
        currentView.trigger('viewDisplay', _element);
    }
}

现在，当有人点击上一个或下一个按钮时，日历会向服务器发送新事件数据请求。对于列表视图，“start”的值始终为0，而“end”的值将代表后续页码。

就是这样。您现在需要做的就是在完整的日历选项中调用列表视图。这可以通过将“list”添加到标题对象的“右侧”来完成，如下所示

标题：{ 左：'上一个，今天下一个'，中心：'标题'，右：'list，month，agendaWeek，agendaDay' }

该网址提供了该演示： http://tas.co.in/fullcalendar-with-listview/

将议程视图添加到fullcalendar

1 个答案: