1

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

这意味着，在不使用原始代码的情况下，有没有办法实现这一点？

4

1 回答 1

5

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

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

  • 功能齐全且可定制的列表/议程视图
  • 使用附带的箭头按钮进行分页
  • 事件上的单击/悬停效果
  • 使用分页动态调用列表视图的事件

首先，我们不能在不接触完整日历源代码的情况下做到这一点。Javascript 不允许这种可扩展性。但是，我尽可能地简化了事情，并且我还发布了从头开始复制它的步骤以及源代码。这将有助于将来更新 fullcalendar.js

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

  2. 接下来我们需要更改 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”。页面上显示的项目数由服务器管理。

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

    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”的值将表示后续页码。

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

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

此 URL 上提供了演示：http: //tas.co.in/fullcalendar-with-listview/

于 2013-06-09T21:42:51.343 回答