jQuery FullCalendar - create standard list of events from Gcal

I'm using FullCalendar in a project and the month view is great. But I also need to create a simple unordered list of the events gathered from 4 different Gcal feeds, and I haven't been able to do it. Anyone got any ide开发者_运维技巧as? A quick response would be great.

---

Posting here the solution for adding a new view in fullcalendar.js. I needed to implement an Agenda or List view in fullcalendar.js for one of my projects. In this process, I got a chance to reverse engineer the code by Adam. I must say that this plugin uses some very good coding practices and javascript concepts.

I think that it would be useful for users if I share my findings and solution here. Included list view has following features:

• Fully functional and customizable List/Agenda View
• Pagination using the included arrow buttons
• Click/Hover effects on the events
• Dynamic calling of events for the list view using pagination

First of all, we CAN NOT do it without touching the fullcalendar sourcecode. Javascript does not allow that kind of extensibility. Howvever, I have kept things as simple as possible and I am also posting the steps to replicate it from scratch along with the sourcecode. This will be helpful in case of future updates of fullcalendar.js

1. First of all we need to define a new view for showing the list of events. Views are defined as objects in fullcalendar.js and can be added using constructor functions. You can find the construction function for list view on this URL https://gist.github.com/amitesh-m/5744528. This function defines and initializes a new view called "list". Inside it, renderEvents is the main member function that renders the available events on this view and attaches the click/hover event triggers.

2. Next we need to change the updateEvents function of Calendar object (around line# 500). This is done to unlink the default event calling behavior of fullcalendar.js for the list view. Modified function will look like this:

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

Everything will work as earlier for other views but now the calendar will send a slightly different request to the event server for the list view. Now, fullcalendar will set "start=0" and "end=1" when somebody clicks on the list view. Number of items to show on the page is to be managed by the server.

1. Next, we need to make a change in renderView() function of the calendar object (around line#374). This is to enable pagination on our list based on the arrow buttons which are alreaedy included in fullcalendar.js. This function should look like this:

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

Now, when somebody clicks on previous or next buttons, the calendar will send a request for new event data to the server. Value of "start" will remain 0 throughout for the list view, while the value for "end" will represent the subsequent page numbers.

1. That's it. All you need to do now is call the list view in your full calendar options. This can be done by adding "list" to the "right" of header object as follows

   header: { left: 'prev,next today', center: 'title', right: 'list,month,agendaWeek,agendaDay' }

The demo is available on this URL: http://tas.co.in/fullcalendar-with-listview/

---

the clientEvents method will retrieve all the events fullCalendar has fetched & has in memory. not sure if this will help you all the way

http://arshaw.com/fullcalendar/docs/event_data/clientEvents/