Javascript 如何在Fullcalendar 2.2.6中实现议程列表视图

通过创建一个封装fullcalendar的插件，是否可以添加一个类似于google calendar中的议程视图，将所有事件都列在fullcalendar中。这意味着，在不使用原始代码的情况下，有没有办法实现这一点？我是用1.6.2 Fullcalendar版本完成的

---

请帮忙

试试这个。。将此添加到完整日历中

看到这个-->

fcViews.agendaList=agendaListView；
defaults.buttonText.agendaList='agenda'；
defaults.titleFormat.agendaList='W'；
defaults.agendaDisType=true；
功能代理列表视图（元素、日历）{
var t=这个；
t、 渲染=渲染；
调用（t、元素、日历）；
var opt=t.opt；
var formatDate=calendar.formatDate；
函数渲染（日期，增量）{
if（增量）{
添加天数（日期，增量*7）；
}
var start=addDays（cloneDate（date），-（（date.getDay（）-opt（'firstDay'）+7）%7））；
//风险值开始=增加天数（克隆日期，1）；
var结束=增加天数（克隆日期（开始），7天）；
var visStart=克隆酸盐（start）；
var visEnd=克隆酸盐（结束）；
var weekends=opt（“周末”）；
如果（！周末）{
skipWeekend（VISTART）；
skipWeekend（visEnd，-1，真）；
}
t、 title=格式化日期(
维斯开始，
添加天数（克隆酸盐（维森德），-1），
选项（‘标题格式’）
);
t、 开始=开始；
t、 结束=结束；
t、 visStart=visStart；
t、 维森德=维森德；
//RenderAgendList（假）；
}
}
功能列表视图（元素、日历）{
var t=这个；
//出口
//t、 RenderAgendList=RenderAgendList；
t、 设置高度=设置高度；
t、 设置宽度=设置宽度；
t、 renderEvents=renderEvents；
t、 clearEvents=clearEvents；
t、 cellIsAllDay=函数（）{
返回真值
};
t、 getColWidth=函数（）{
返回宽度
};
t、 getDaySegmentContainer=函数（）{
返回日集装箱
};
//进口
调用（t，元素，日历，'agendaList'）；
overlymanager.call（t）；
SelectionManager.call（t）；
var opt=t.opt；
var触发器=t触发器；
var formatDate=calendar.formatDate；
//当地人
var updateEvents=t.calendar.updateEvents；
变异体；
可变视宽；
var视图高度；
var-colWidth；
第一天；
var eventElementHandlers=t.eventElementHandlers；
//我们正在切换到列表显示，因此不再需要此功能
//但是如果您喜欢一致性，我们可以切换并使用基于表的listview
/*
函数renderAgendList（）{
如果（！正文）{
buildTable（）；
}否则{
clearEvents（）；
}
}*/
函数buildTable（）{
body=false；
}
功能设置高度（高度）{
视图高度=高度；
var bodyHeight=视图高度；
}
函数设置宽度（宽度）{
视图宽度=宽度；
}
var reportEventClear=t.reportEventClear；
var getDaySegmentContainer=t.getDaySegmentContainer；
/*Date.prototype.addDays=函数（天）{
this.setDate（this.getDate（）+天）；
归还这个；
}*/
函数renderEvents（事件，modifiedEventId）{
//复制显示期间要使用的事件列表
//对于重复和多天事件，我们希望确保在每次事件发生时添加这些天
//例如，从1号到4号开始的事件，我们将在列表中添加displayeventlist 1、2、3和4号事件
//我们本可以使用其他方法，如扫描日期和检查每个事件，但这似乎更有效
var displayeventlist=[]；
var-tstart，tend；
var j=0；
对于（事件中的i）{
displayeventlist[j]=Object.create（事件[i]）；
tstart=cloneDate（事件[i].start，true）；
tend=cloneDate（事件[i]。结束，为真）；
//console.log（“事件开始日期”+displayeventlist[i]。开始+“结束日期”+displayeventlist[i]。结束+“”+displayeventlist[i]。标题）；
而（（倾向-tstart）>0）{
j=j+1；
displayeventlist[j]=Object.create（事件[i]）；
tstart=addDays（tstart，1）；
displayeventlist[j].start=cloneDate（tstart）；
}
j=j+1；
}
//对显示列表进行排序，使其更易于显示
displayeventlist.sort（函数（a，b）{
var dateA=新日期（a.开始）；
var dateB=新日期（b.开始）；
返回日期a日期b；
});
//开始显示我们的排序列表
var html=$（“
”；
变量mm、dd、tt、dt、lurl、ltitle、em；
变量温度，i=0；
var vm=格式日期（t.visStart，'W'）；
对于（displayeventlist中的i）{
//console.log（“事件开始日期”+displayeventlist[i]。开始+“结束日期”+displayeventlist[i]。结束+“”+displayeventlist[i]。标题）；
z=i；
em=formatDate（displayeventlist[i]。开始“W”）；
//仅检索当前视图周事件
if（em==vm）{
dd=formatDate（displayeventlist[i]。开始“dddd”）；
lday=formatDate（displayeventlist[i]。开始“d MMMM yyyy”）；
ltitle=displayeventlist[i]。标题；
allDay=displayeventlist[i]。allDay；
st=formatDate（displayeventlist[i]。开始“H:mm”）；
et=formatDate（displayeventlist[i].end，'H:mm'）；
lurl=displayeventlist[i].url；
classes=displayeventlist[i]。类名；
ldesc=displayeventlist[i]。位置；
如果（lday！=temp）{//
$（“
”+
“”+dd+“”+
“”+lday+“”+
“
”）。附录（htm
fcViews.agendaList = agendaListView; 

defaults.buttonText.agendaList='agenda';

defaults.titleFormat.agendaList='W'; 

defaults.agendaDisType   = true;

function agendaListView(element, calendar) {
    var t = this;

    t.render = render;

    ListView.call(t, element, calendar );
    var opt = t.opt;

    var formatDate = calendar.formatDate;


function render(date, delta) {
   if (delta) {
        addDays(date, delta * 7);
    }
    var start = addDays(cloneDate(date), -((date.getDay() - opt('firstDay') + 7) % 7));
//  var start = addDays(cloneDate(date), 1);
    var end = addDays(cloneDate(start), 7);
    var visStart = cloneDate(start);
    var visEnd = cloneDate(end);
    var weekends = opt('weekends');
    if (!weekends) {
        skipWeekend(visStart);
        skipWeekend(visEnd, -1, true);
    }
    t.title = formatDates(
        visStart,
        addDays(cloneDate(visEnd), -1),
        opt('titleFormat')
    );
    t.start = start;
    t.end = end;
    t.visStart = visStart;
    t.visEnd = visEnd;
    //renderAgendaList(false);
}
}

function ListView(element, calendar) {
    var t = this;


    // exports
    //t.renderAgendaList = renderAgendaList;
    t.setHeight = setHeight;
    t.setWidth = setWidth;
    t.renderEvents = renderEvents;
    t.clearEvents = clearEvents;

    t.cellIsAllDay = function () {
        return true
    };

    t.getColWidth = function () {
        return colWidth
    };
    t.getDaySegmentContainer = function () {
        return daySegmentContainer
    };


    // imports
    View.call(t, element, calendar, 'agendaList' );
    OverlayManager.call(t);
    SelectionManager.call(t);

    var opt = t.opt;
    var trigger = t.trigger;

    var formatDate = calendar.formatDate;

    // locals
    var updateEvents = t.calendar.updateEvents;
    var body;

    var viewWidth;
    var viewHeight;
    var colWidth;

    var firstDay;

    var eventElementHandlers = t.eventElementHandlers;

    // We are switching to List display, hence no need of this function anymore
    // But if you would prefer the consistency, we can swicth and have table based listview
    /*
    function renderAgendaList() {
        if (!body) {
            buildTable();
        } else {
            clearEvents();
        }
    }*/


    function buildTable() {
        body = false;
    }


    function setHeight(height) {
    viewHeight = height;
    var bodyHeight = viewHeight;
    }

    function setWidth(width) {
        viewWidth = width;
    }

    var reportEventClear = t.reportEventClear;
    var getDaySegmentContainer = t.getDaySegmentContainer;


    /*Date.prototype.addDays = function( days ) {
        this.setDate(this.getDate() + days );
        return this;
    }*/

    function renderEvents(events, modifiedEventId) {
       //Duplicate the list of events to be used during the display
        //For repeating and multi-days events, we wanna make sure we add those days each event happens
        //for example event that start from 1st to 4th, we will add on our list displayeventlist 1,2,3 and 4th this event
        // We could have used other methods like scanning the dates and checking each event, but this seem to be more efficient

        var displayeventlist = [];
        var tstart, tend;
        var j = 0;
        for(i in events) {
            displayeventlist[j] = Object.create(events[i]);
            tstart = cloneDate(events[i].start,true);
            tend   = cloneDate(events[i].end,true);
          // console.log(" Event start date "+ displayeventlist[i].start +" end date "+ displayeventlist[i].end+" "+ displayeventlist[i].title);
            while( (tend - tstart) > 0 ) {
                j = j + 1;
                displayeventlist[j] = Object.create(events[i]);
                tstart = addDays(tstart, 1);
                displayeventlist[j].start = cloneDate(tstart);
            }
            j = j + 1;
        }

     // sort our display list, makes easier to display
        displayeventlist.sort(function(a,b) {
                       var  dateA = new Date(a.start);
                       var dateB = new Date(b.start);
                       return dateA-dateB;
                       });

        //Start displaying our sorted list
        var html    = $("<ul class='fc-agendaList'></ul>");
        var mm, dd, tt, dt, lurl, ltitle, em;
        var temp, i = 0;
        var vm = formatDate(t.visStart, 'W');

        for (i in displayeventlist) {
            //console.log(" Event start date "+ displayeventlist[i].start +" end date "+ displayeventlist[i].end+" "+ displayeventlist[i].title);
            z = i;
            em = formatDate(displayeventlist[i].start, 'W');
            // retrieve only current view week events
            if ( em == vm ) {
                dd      = formatDate(displayeventlist[i].start, 'dddd');
                lday    = formatDate(displayeventlist[i].start, 'd MMMM yyyy');
                ltitle  = displayeventlist[i].title;
                allDay  = displayeventlist[i].allDay;
                st      = formatDate(displayeventlist[i].start, 'H:mm');
                et      = formatDate(displayeventlist[i].end, 'H:mm');
                lurl    = displayeventlist[i].url;
                classes = displayeventlist[i].className;
                ldesc   = displayeventlist[i].location;

                if (lday != temp) { //on change de jour
                    $("<li class='fc-agendaList-dayHeader ui-widget-header'>" +
                        "<span class='fc-agendaList-day'>"+dd+"</span>" +
                        "<span class='fc-agendaList-date'>"+lday+"</span>" +
                    "</li>").appendTo(html);
                    temp = lday;
                }
                if (allDay) {
                    eventdisplay = $("<li class='fc-agendaList-item fc-today fc-thu'>"+
                                        "<"+ (lurl ? "a href='"+ lurl +"'" : "div") + " class='fc-agendaList-event fc-eventlist "+classes+"'>"+
                                        "<div class='fc-event-time'>"+
                                            "<span class='fc-event-all-day'></span>"+
                                        "</div>"+
                                        "<div class='fc-agendaList-eventDetails'>"+
                                          "<div class='fc-eventlist-title'>"+ltitle+"</div>"+
                                          (opt('showLocation') ? "<div class='fc-eventlist-desc'>"+ldesc+"</div>" : "")+
                                        "</div>"+
                                      "</" + (lurl ? "a" : "div") + ">"+
                                    "</li>").appendTo(html);
                } else {
                    eventdisplay = $("<li class='fc-agendaList-item fc-today fc-thu'>"+
                                    "<"+ (lurl ? "a href='"+ lurl +"'" : "div") + " class='fc-agendaList-event fc-eventlist "+classes+"'>"+
                                        "<div class='fc-event-time'>"+
                                            "<span class='fc-event-start-time'>"+st+(et ? " - "+et : "")+"</span> "+

                                        "</div>"+
                                        "<div class='fc-agendaList-eventDetails'>"+
                                          "<div class='fc-eventlist-title'>"+ltitle+"</div>"+
                                          (opt('showLocation') ? "<div class='fc-eventlist-desc'>"+ldesc+"</div>" : "")+
                                        "</div>"+
                                      "</" + (lurl ? "a" : "div") + ">"+
                                    "</li>").appendTo(html);

                }
                eventElementHandlers(displayeventlist[i], eventdisplay);
            }
        }
        $(element).html(html);
        trigger('eventAfterAllRender');
    }


    function clearEvents() {
        //implement this in case we wanna do list based display
    }
}
;;