javascript - 如何在Fullcalendar 2.2.6中实现议程 ListView

Question

是否可以通过创建封装 fullcalendar 的新插件来添加议程 View ，例如在 google 日历中找到的议程 View ，将所有事件列出到 fullcalendar。这意味着，在不使用原始代码的情况下，有没有办法实现这一目标？我已经用 1.6.2 Fullcalendar 版本完成了。

请帮忙!!

Answer 1

试试这个..将其添加到完整日历中

看这个 --> http://paulthedutchman.nl/calendar_standalone/

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