My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 289: List View (similar to Google Calendar's "Agenda" view)
144 people starred this issue.
Comments by non-members will not trigger notification emails to users who starred this issue.
Back to list
Status:  ExportedToGithub
Owner:  ----
Closed:  Aug 2015


Sign in to add a comment
 
Reported by eterni...@gmail.com, Jan 13, 2010
Hi! It would be great to see a feature request for Google Calendar-like 
agendaYear view, which is very helpful in seeing a list of events. Is there 
currently a way to do this? 
agendaYear.jpg
70.1 KB   View   Download
Jan 13, 2010
#1 travisco...@gmail.com
Yeah, just a long list of the events!
Jan 19, 2010
Project Member #2 adamrs...@gmail.com
I agree, would probably call this "list" view do differentiate it from fullcalendar's
agenda views, since it is so different.

instead of display all events within a year, i think its time-range should be
configurable. also, it'd be cool to configure groups of events in the near future,
like "this week" or "this month"

not going to "accept" this yet because there are plenty of other features/bugs that
take a higher priority, but this seems like something that [either i or someone else]
could implement atop the plugin architecture i plan to have in 1.5

thanks
Summary: List View (similar to Google Calendar's "Agenda" view)
Labels: -Type-Defect Type-Enhancement
Feb 14, 2010
#3 jaco...@gmail.com
Yeah, this would be a great feature for FullCalendar imo
Mar 17, 2010
#4 gcm....@gmail.com
This would be a great addition to this project!

I agree with you Adam, limiting the Timeframe of upcoming events is essential.

One other idea I had was that if we could have it to only display events from
specified 'className' (or multiple class names).
- the idea being, that we would have this "List View" maybe on the homepage of a
website, and then we could only have the IMPORTANT/Special events listed in this
view, and the regular weekly stuff would not be displayed.
- therefore minimizing the number of events in view, to the important ones.

Thanks!
-J
Jul 30, 2010
#6 pino.des...@gmail.com
useful feature.
Aug 19, 2010
#7 picha...@gmail.com
it would be nice to be able to create custom views, agreed.  I would like to have a "Pay period" view which is essentially the month view but cut into two week segments according to a specific start and stop boundary... 
Aug 24, 2010
#8 rowden....@gmail.com
This feature would be great—I'd love to be able to list events in a simple <ul>. The current Agenda views art cutting it for my current project.
Aug 24, 2010
#9 Sudarsha...@gmail.com
Yeah,Would love to have this feature.It makes great sense displaying all the events in a list.(sorted by latest)
Sep 20, 2010
#10 chrisvan...@gmail.com
Would really be a usefull feature!
Oct 7, 2010
Project Member #11 adamrs...@gmail.com
(No comment was entered for this change.)
Status: MaybePlugin
Oct 13, 2010
#12 96t...@gmail.com
Having access to a configurable list view of events (including the ability to toggle on/off calendar layers on a per-list-view-basis) is the deciding factor whether to standardize on Google calendar or not.  It would be immensely useful to managing event data and display in our organization, and aid in adoption of a single master calendar.
Oct 27, 2010
#13 ivan.san...@gmail.com
+1 for upcoming events or list view
Nov 5, 2010
#14 sherifgm...@gmail.com
+1 As well... this would be a huge win!
Nov 17, 2010
#15 Jennifer...@gmail.com
Is this planned for a release any time soon?  I need this feature too!
Nov 17, 2010
#16 paolo%gn...@gtempaccount.com
That would be a great feature for me as well! +1
Nov 21, 2010
#17 gregorym...@gmail.com
Yes, I very much need this. I hope this can be added to Google calendar as an option for an embedded view. The regular calendar view is not always the best way to display information. In many cases, an embedded list would be a lot more helpful. Maybe then we could choose to list one week's events, one months' events, a quarter's worth of events or a year's. Thanks for all the comments here. I hope it happens.
Feb 2, 2011
#18 brca...@gmail.com
You already saved Google Calender from the scrapbin by fixing their lack of word wrap!

This is the last feature I need to make my Club's website calender functionality perfect.   I am trying to put a simple list in a sidebar for "Next X Events" and the built in Agenda view in Google Calender is too clunky.
Feb 9, 2011
#19 dasp...@gmail.com
Would love this feature, but I don't like how Google calendar agenda view repeats multiple-day events every day.  It would be nice if the list view was at least configurable to only list the event only once (twice at the most--once on the event actual start date and once on the current date/calendar initial date if the event start date was before the current date/calendar initial date and ended after the current date/calendar initial date).
Apr 1, 2011
Project Member #20 althaus.it
 Issue 877  has been merged into this issue.
Apr 1, 2011
#21 p.stud...@gmail.com
Very much indeed needed :) And starred.
Thanks- searched but did not find this issue. Sorry for duplicating.

Apr 6, 2011
#22 p.stud...@gmail.com
Hi I have been trying to change the code my self in an attempt to create some sort of list. I noticed everything is based on buildSkeleton() 
If you look at the basicWeek view I want to rotate the table -90 degrees.
Have the days on the left and entries horizontally displayed.

But it seems that the way buildSkeloton() builds the html table in a static manner. head  then body.
I tried flipping this logic but it seems the rest of the code relies that the table be built like this. essentially trying to build a flipped table internally using buildSkelton() seems impossible? 

This is driving me a bit mental. I could use clientEvents to render my own list.. but more ajax calls and styling issues.. its a nightmare :(

Look at this wherer the agenda has many (in my case potentially up to 120 entries) per day are possible..

And what i want to get is something like the sketch




many.jpg
62.9 KB   View   Download
sketch.jpg
55.6 KB   View   Download
May 13, 2011
#23 morris....@gmail.com
Mind boggling that such a basic issue has received so little attention from Google. I imagine that many people have been observing this issue without commenting in hopes of resolution. My case is simple: I would like to send teachers a recap (as in agenda view) of the classes they have to teach from Sept through June. I understand there may be some work-around solutions, but that's not what I look for in a calendar. So here's my move from the presumably silent majority to those voicing a simple "C'mon guys already" to the Google team.
May 13, 2011
#24 p.stud...@gmail.com
Google team? I doubt Google I working on this code. And yes! this is a MASSIVE pitfall to the calendar- as my previous post shows.. But i tell you something Adam Shaw has done a brilliant free plugin otherwise! The wait continues..
May 13, 2011
Project Member #25 althaus.it
fullcalendar ist NOT a Google project... ;-)

https://code.google.com/p/fullcalendar/people/list
Jun 26, 2011
#26 chris.po...@gmail.com
Same as p.studioz, I would even go a bit further by implementing a timeline in the header of the list, so the user can drag and drop events along that time line during the day.
I have the same issue, more than 100 events per day makes it unreadable.

I'll update this thread with my code soon (hopefully).

++ 
Aug 10, 2011
#27 kshaw%qu...@gtempaccount.com
Version 1.5 has shipped.  Is there a plugin architecture to build custom views atop?
Sep 3, 2011
#28 admin@westhouseit.co.uk
Well, how about pledging a certain amount to have this done. I'd certainly be willing to put in $10. Anyone else willing to add more?

Nov 15, 2011
#29 sephirot...@gmail.com
Yes a "list" view would be very nice. at that point you have a js library that will be able to do just about anything someone would want to do with a calendar 
Nov 19, 2011
#30 cecilphi...@gmail.com
I would like to see a listview / timeline implemented also.
Maybe something resembling 
http://www.dhtmlx.com/docs/products/dhtmlxScheduler/sample_timeline.shtml
Nov 30, 2011
#31 Deac.Ka...@gmail.com
I would throw in AT LEAST $10 on it.
Nov 30, 2011
#32 allon.mo...@gmail.com
I've spend already 100$...
Jan 4, 2012
#33 st.fisc...@gmail.com
Yes, please. Make a list function.... Please...
Jan 11, 2012
#35 paul.wol...@gmail.com
If you realy need it now, you can start with this quickly made php (and smarty) code.
the rest of the code you can find above.

<div id="agenda">
<table>
   <?smarty foreach from=$items key=key item=item ?>
      <?smarty foreach from=$item item=i ?></body>
         <tr>
	 <td style="width:200px;text-align:right;"><?smarty $key|date_format:"%A, %e %B" ?></td>
	 <td style="width:200px;"><?smarty if $i.allDay == 1 ?>Hele dag<?smarty else ?><?smarty $i.time_start ?> - <?smarty $i.time_end ?><?smarty /if ?></td>
	 <td style="width:200px;text-align:left;"><?smarty $i.title ?></td>
         </tr>
      <?smarty /foreach ?>
   <?smarty /foreach ?>
</table>
</div>


to get the events from my database i use:

function getEventsStartingToday() {
	global $obj_db;
	$str_query = 'SELECT * , event_id AS id,    concat_ws( " ", date_start, time_start ) AS
	START , concat_ws( " ", date_end, time_end ) AS
	END FROM EVENTS WHERE date_start >= DATE( NOW( ) )
	OR (
	date_start < DATE( NOW( ) )
	AND date_end > DATE( NOW( ) )
	)
	ORDER BY date_start ';
	$obj_result = mysqli_query($obj_db, $str_query);

  	while ($arr_line = mysqli_fetch_array($obj_result, MYSQLI_ASSOC)) {
		$arr_content[] = $arr_line;
	}
	$arr_result = array();

	foreach($arr_content as $event) {
		// several days event
		if($event['date_end'] != $event['date_start']) {
		$days_in_between = getDays($event['date_start'], $event['date_end']);
			foreach($days_in_between as $day) {
				$arr_result[$day][] = $event;
			}
		} else {
			$arr_result[$event['date_start']][] = $event;
		}
	}
	$obj_smarty = new Smarty();
	$obj_smarty->compile_dir = '../templates_c/';
	$obj_smarty->assign('items', $arr_result);
	$obj_smarty->display(FULLCAL_DIR.'/view/agenda.html');
}

To find all the days in moredays events i use this function:

function getDays($sStartDate, $sEndDate){
	$sStartDate 	= date("Y-m-d", strtotime($sStartDate));
  	$sEndDate 		= date("Y-m-d", strtotime($sEndDate));
	$aDays[] 		= $sStartDate;
  	$sCurrentDate 	= $sStartDate;

  	while($sCurrentDate < $sEndDate){
		$sCurrentDate = date("Y-m-d", strtotime("+1 day", strtotime($sCurrentDate)));
    	$aDays[] = $sCurrentDate;
  	}
  	return $aDays;
}
Jan 11, 2012
#36 paul.wol...@gmail.com
forgot the screenshot
screenshot_simple_listview.JPG
42.4 KB   View   Download
Mar 5, 2012
#37 ellis.ra...@gmail.com
I will also donate if this is done.
Mar 7, 2012
#38 paul.wol...@gmail.com
I made it look a bit more like google calendar agendaview.
http://www.paulthedutchman.nl/calendar_standalone/?action=agenda

<style type='text/css'>

	body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: arial,"Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}

	#wrap {
		width: 1100px;
		margin: 0 auto;
		}

	.agenda_title {
		background: none repeat scroll 0 0 #E5ECF9;
		font-size: small;
		padding:3px 3px 3px 6px;
		font-weight:bold;
	}
	.agenda_item {
		background-color:#fff;
		border-bottom: 1px solid #E5ECF9;
		font-size: small;
		padding:3px 3px 3px 6px;
	}
</style>
</head>
<body>

<div id="wrap">
<a href="<?smarty $smarty.const.FULLCAL_URL ?>">Go to the calendar</a>
<div id="agenda" style="text-align:left;background-color:#E5ECF9;padding:4px;">

	<?smarty foreach from=$items key=key item=item ?>
	<div class="agenda_title"><?smarty $key|date_format:"%A, %e %B" ?></div>
	<?smarty foreach from=$item item=i ?>
	<div class="agenda_item"><?smarty if $i.allDay == 1 ?><?smarty else ?> <?smarty $i.time_start|date_format:"%H:%M" ?> - <?smarty $i.time_end|date_format:"%H:%M" ?><?smarty /if ?>
			<?smarty $i.title ?></div>

	        <?smarty /foreach ?>
	<?smarty /foreach ?>

</div>
</div>
Mar 7, 2012
#39 allon.mo...@gmail.com
Looks great...would be nice to have it integrated into fullcalendar itself.
Apr 5, 2012
#40 smallp...@gmail.com
+1 to this... Right now it's a drawback in my current project.
May 5, 2012
#41 paul.wol...@gmail.com
I've hacked in fullcalendar.js a bit to add a button and an agendaview. Hopefully Adam will make something like this in the future integrated in fullceldnar itself, but for now it's enough for me...

http://screencast.com/t/vb9sjfdRU

I will put the code here in a few days.

I still can't upload attachments, otherwise i would have send the js file right now..
May 5, 2012
#43 paul.wol...@gmail.com
I've updated the example calendar: 
http://www.paulthedutchman.nl/calendar_standalone/

So you could get the fullcalendar.js from there ... (if you have firebug)

in the fullcalendar function you have to add one line:

$('#calendar').fullCalendar({
    header: {
	left: 'prev,next today',
	center: 'title',
	right: 'month,agendaWeek,agendaDay'
},
showAgendaButton: true,     <----- this line
....
May 8, 2012
#45 allon.mo...@gmail.com
It looks really promising!! But since this project is pretty much dead I guess your code wouldn't make it into the official release....
Feb 7, 2013
#46 bshogu...@gmail.com
This looks great @paul... Although I can't get the button to show up. I've added your fullcalendar.js and I've set showAgendaButton as true... Anything I need to do in the header or w/e with the calendar_standalone. 

And does this work with Google Calendar ? 


Thanks
Feb 8, 2013
#47 paul.wol...@gmail.com
hmm,  you have downloaded all my code? it should work then ...
Did you include the shoAgendaButton: true in the right place?
Any errors?

do you mean does the agendaview work with google calendar? not out of the box i' m afraid. i have it working on my local pc. . i am using the ical url from my google calendar and use that to build the agendaview.
if you want to see google cals in fullcalendar you have to include gcal.js and do some programming to mmake it work. I can post some code to help  you get started. I try to post it this weekend .. 
Mar 4, 2013
#48 n8cs...@gmail.com
I am working on an upgrade to a project that will require a calendar list view. We already have one we created, but the client would really like to have it available in the same tab list as the other views (in fullCalendar). 

I believe they would be willing to pay you to make this part of fullCalendar. If this is possible Adam, please let me know.
Mar 4, 2013
#50 floriandegenhardt85
not bad, i have an idea:

you could hide days, which have no events. 


Mar 7, 2013
#52 paul.wol...@gmail.com
nice work. I see a timeline.js too. Is that working? How can i get that view working? i tried to add 'timeline' to the header/right buttons, but that doesn't work..
Mar 7, 2013
#53 hasanoz...@gmail.com
hi paul, 

timeline works weekly and daily view. You can see my demo page. optons default { timeline: true }

https://c9.io/hasanozgan/fullcalendar/workspace/fullcalendar/demos/agenda-list.html
Mar 7, 2013
#54 paul.wol...@gmail.com
ah ok, now i see it, the red line, nice feature btw, i thought it might be a timelineview like i put on my example page:
http://www.paulthedutchman.nl/calendar_standalone/
Mar 17, 2013
#55 paul.wol...@gmail.com
i agree with Florian, the days with no events should be hidden. like the google listview...
and now there are shown 2 weeks in the listview, i think it would be nicer if that would a month.
Apr 26, 2013
#56 anders.r...@gmail.com
Yes please!
List view, with configurable time window, e.g. "this calendar year" or "next 30 days".
May 2, 2013
#57 garza.jo...@gmail.com
@hasanoz
I really like your agenda list.
Is there a way to limit the change the list size? (ie. 10 or even 50 events)


May 2, 2013
#58 garza.jo...@gmail.com
I noticed that the start time for the event list defaults to 12:00. Is this a bug or is there a certain format to follow?
May 7, 2013
#59 vipin.na...@gmail.com
Hi hasanozgan,

You really provided a very good solution, but you are using jquery-1.7.1.min.js, which itself has many issues for example datpicker doesnot work with this.

Please upgrade the jquery version or if can provide som solution so that on agnda list view, I can place datepicker and button, on button click i get the events for selected date in date picker.

Thanks,

May 7, 2013
#60 vipin.na...@gmail.com
Hi,

Another issue , though datepickr is not working, if you try to pull the events between two dates and set the header title to the from date then it will allways display events for 30 days from the fromDate.
Is there any way so that it will actually display the events for daterange(60 days)?

I'm using following code:

function GetAgendaEvents(datefrom, dateTo) {
          var fromDate = new Date($("#from").val());
          var toDate = new Date($("#to").val());

          if (fromDate.getTime() <= toDate.getTime()) {

              $('#fullcal').fullCalendar('removeEvents').fullCalendar('addEventSource', events);
              $('#fullcal').fullCalendar('refetchEvents');

              var filteredEvent = $('#fullcal').fullCalendar('clientEvents', function (event) {
                  return event.start >= fromDate && event.start <= toDate;
              });
              $('#fullcal').fullCalendar('removeEvents').fullCalendar('addEventSource', filteredEvent);
              $('#fullcal').fullCalendar('refetchEvents');
             
              $('#fullcal').fullCalendar('gotoDate', fromDate.getFullYear(), fromDate.getMonth(), fromDate.getDate());
              $('#fullcal').fullCalendar('changeView', 'agenda'/* or 'basicDay' */);
          }
          else {
              alert("Please enter correct date range");
          }
      }

the above script is called from button click on agendalist view.
May 9, 2013
#61 m...@digitalcreative.tv
This piece of code is perfect bar the lack of a google like "agenda" or list view.

It would allow the simple creation of scrollable agenda widgets to be used anywhere on a webpage.
Jun 9, 2013
#62 amites...@gmail.com
Hi everybody,

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. This function is available on this URL: https://gist.github.com/amitesh-m/5744558. 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. The event data is managed on fullcalendar.js as shown on this URL: http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/. 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. 

3. 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 code is available on https://gist.github.com/amitesh-m/5744639.  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.

4. 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'
                  }
Here is a quick and dirty PHP file that sends back the event data to full calendar with listview.
https://gist.github.com/amitesh-m/5745224

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

Jun 12, 2013
#63 paul.wol...@gmail.com
amites, thanks for sharing your code, looks great!
Jun 12, 2013
#64 allon.mo...@gmail.com
Rundcube implemented the list view long time ago on their fork. Adam just didn't include the pull request https://github.com/arshaw/fullcalendar/pull/48 . I merged the roundcube code with the latest version 1.6.1, the demo can be found here http://joomla.digital-peak.com/demo/dpc . They implemented also a table view which I didn't use at the end. I thought this will be of interest for some of you guys. The whole project is a Joomla calendar extension from Digital Peak http://joomla.digital-peak.com.
Perhaps you guys can add votes to the pull request that it get's included into the official code base that we don't have to hack the code anymore :-)
Jun 13, 2013
#65 paul.wol...@gmail.com
I've changed Amitesh's view a bit (so it looks more like my view :o)): 

function renderEvents(events, modifiedEventId) {
            var html = $("<div style='border-bottom:1px solid #CCCCCC;'></div>");
            // Fetch and Show events.
            for (evt in events) {
                var dt, tm;
                var olddt = dt;
                if (events[evt]) {

                    dt = formatDate(events[evt].start, 'dddd, MMM d, yyyy');
                    tm = formatDate(events[evt].start, 'h(:mm)tt');
		//tm = formatDate(events[evt].start, 'h:mm');

                    if (dt !== olddt) {
                        dtelem = $("<div style='border:1px solid #CCCCCC;background-color:#FFF;font-size:small;padding-left:3px;padding-bottom:5px;padding-top:5px;'><b>" + dt + "</b></div>").appendTo(html);
                    }
                    eventelem = $("<div>" +
                        "<div style='background-color:#FFFFCC;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC;padding:3px;'><span style=''>" + (!events[evt].allDay ? tm  : '') +' ' + events[evt].title + "</span></div>" +
                        "</div>").appendTo(html);
                    eventElementHandlers(events[evt], eventelem);
                }
            }
            $(element).html(html);
          }

Jul 19, 2013
#66 patrick.maniraho@gmail.com
Hi All,

Adam Shaw plugin is great work he did and easy to customize. The only think we needed was to add list view and once you read the existing code, it is easy to add this. I made changes without touching any other function to make life easier once a new release is out, you can just copy and paste again these changes or maybe the new reelease will have the function intergrated.

Feel free to grab the code below and paste it at the end of your file and all you need is to follow these two steps below.

1. Add the code below at end of your fullcalendar.js
2. Add agendaList to your header object to call your list view
                          header: {
				                    left: 'prev,next today',
				                    center: 'title',
			   	                    right: 'month,basicWeek,basicDay,agendaList'
			                    }
3. That's all you need, you are good !

PS: I have used unordered list to display the events and some css file to make it look nice
    I have also designed the function to display events of one month at time but, this can be changed by modifying the code inside renderEvents function.
    The rest of the code looks similar to agendaDay and agendaWeek code. 

Here is the example of the list view
   http://apex.oracle.com/pls/apex/f?p=28419:1

and here is the code

// new view and its button
fcViews.agendaList = agendaListView;
defaults.buttonText.agendaList='Agenda';
defaults.titleFormat.agendaList='MMMM yyyy';


defaults.agendaDisType   = true;

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


        // exports
        t.render = render;

        // imports
        ListView.call(t, element, calendar );
        var opt = t.opt;
        var renderAgendaList = t.renderAgendaList;
        var formatDate = calendar.formatDate;
		
		
	function render(date, delta) {
	    if (delta) {
		   addMonths(date, delta);
		   date.setDate(1);
		}
		var start, end, visStart, visEnd;
        start		= cloneDate(date, true);
		start.setDate(1);
		end = addMonths(cloneDate(start), 1);
		visStart = cloneDate(start);
		visEnd   = cloneDate(end);
		// I will keep all params and discuss with the group about the header 
		// as well as if we should use June 1st or start of the calendar view date
		t.title = formatDate(start, 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 renderOverlay = t.renderOverlay;
        var clearOverlays = t.clearOverlays;
        var daySelectionMousedown = t.daySelectionMousedown;
        var formatDate = calendar.formatDate;

        // locals
        var updateEvents = t.calendar.updateEvents;
        var table;
        var head;
        var headCells;
        var body;
        var bodyRows;
        var bodyCells;
        var bodyFirstCells;
        var bodyCellTopInners;
        var daySegmentContainer;

        var viewWidth;
        var viewHeight;
        var colWidth;
        var weekNumberWidth;

        var rowCnt, colCnt;
        var coordinateGrid;
        var hoverListener;
        var colContentPositions;

        var rtl, dis, dit;
        var firstDay;
        var nwe; 
        var tm;
        var colFormat;
        var showWeekNumbers;
        var weekNumberTitle;
        var weekNumberFormat;
        var eventElementHandlers = t.eventElementHandlers;



        function renderAgendaList() {
            var firstTime = !body;
            if (firstTime) {
                buildTable();
            } else {
                clearEvents();
            }
        }


        function buildTable() {
            body = true;
        }


		function setHeight(height) {
		viewHeight = height;
		var bodyHeight = viewHeight; 
		}
		
		function setWidth(width) {
			viewWidth = width;	
		}
		
		var reportEventClear = t.reportEventClear;
		var getDaySegmentContainer = t.getDaySegmentContainer;


		function renderEvents(events, modifiedEventId) {
			var html = $("<div class='fc-listcalendar'></div>");
			$("<ul class='listCalendar'></ul>").appendTo(html);
			var lMonth, lDay, lTime, lDate, lUrl, lTitle;
			var temp, i = 0;
            var vMonth = formatDate(t.visStart, 'MM');
            var arr = [];

            for (i in events) {
                z = i;
                eMonth = formatDate(events[i].start, 'MM');
                
                if ( eMonth == vMonth ) {
                    lMonth  = formatDate(events[i].start, 'MMM');
                    lDay    = formatDate(events[i].start, 'dddd');
                    lDate   = formatDate(events[i].start, 'MMM d');
                    lDDay   = formatDate(events[i].start, 'dddd, MMM d');
                    lTitle  = events[i].title;
                    allDay  = events[i].allDay;
                    lTime   = formatDate(events[i].start, 'h(:mm)tt');
                    lUrl    = events[i].url;				
                    if (lUrl != null) {
                        lTitle = "<a href='"+htmlEscape(lUrl)+"'>"+lTitle+"</a>";
                    }
                    if (i != temp) {
                        if ( ! dayHeaderExists(arr, lDDay) ) {
                           $("<li class='dayHeader'>"+lDDay+"</li>").appendTo(html);
                           temp = z;
                           arr.push(lDDay);
                           console.log(i+' '+arr);
                        }
                    }
                    if (i % 2 == 0) {  
                        if (allDay) {
                        eventdisplay = $("<li class='dayDetails even'>"+lTitle+"</a><span style='float:right'>"+ opt('allDayText') +"</span></li>").appendTo(html);
                        }
                        else {
                        eventdisplay = $("<li class='dayDetails even'>"+lTitle+"</a><span style='float:right'>"+lTime+"</span></li>").appendTo(html);
                        }
                    }
                    else {  
                        if (allDay) {
                        eventdisplay = $("<li class='dayDetails odd'>"+lTitle+"</a><span style='float:right'>"+ opt('allDayText') +"</span></li>").appendTo(html);
                        }
                        else {
                        eventdisplay = $("<li class='dayDetails odd'>"+lTitle+"</a><span style='float:right'>"+lTime+"</span></li>").appendTo(html);
                        }
                    }
                    eventElementHandlers(events[i], eventdisplay);
                }
                else{
                console.log('out');
                }
			}
			eventdisplay = $("<li class='listEndCap'> </li>").appendTo(html);
		$(element).html(html);
        trigger('eventAfterAllRender');
        }
        
        function dayHeaderExists( arr, header ) {
           for (var i = 0; i < arr.length; i++ ) {
               if ( arr[i] == header ) return true;
           }
        return false;
        }

		function clearEvents() {
			reportEventClear();
		}
    }

    ;
    
Jul 20, 2013
#68 paul.wol...@gmail.com
Great work Patrick!

btw, there are still 2 console.logs in your code, so IE users will get js
errors ! So anyone who implements the code, first remove the console.log
lines.
Jul 22, 2013
#69 patrick.maniraho@gmail.com
Thanks Paul ! My mistake, I forgot to remove them.. hope everyone will catch that.
Jul 27, 2013
#70 eleco...@gmail.com
some adaptation in renderEvents function :

- use the timeFormat
           lTime   = formatDate(events[i].start, opt('timeFormat'))
                    
- use the event.textcolor and event.ClassName 

Following the function.

@ patricke : thanks a lot !

		function renderEvents(events, modifiedEventId) {
			var html = $("<div class='fc-listcalendar'></div>");
			var ClassName = "" ; 
			$("<ul class='listCalendar'></ul>").appendTo(html);
			var lMonth, lDay, lTime, lDate, lUrl, lTitle;
			var temp, i = 0;
            var vMonth = formatDate(t.visStart, 'MM');
            var arr = [];

            for (i in events) {
                z = i;
                eMonth = formatDate(events[i].start, 'MM');
                
                if ( eMonth == vMonth ) {
                    lMonth  = formatDate(events[i].start, 'MMM');
                    lDay    = formatDate(events[i].start, 'dddd');
                    lDate   = formatDate(events[i].start, 'MMM d');
                    lDDay   = formatDate(events[i].start, 'dddd, MMM d');
                    lTitle  = events[i].title;
                    allDay  = events[i].allDay;
                    ClassName = events[i].className ; 
                    textColor  = events[i].textColor ; 
                    lTime   = formatDate(events[i].start, opt('timeFormat'))
                    //lTime   = formatDate(events[i].start, 'h(:mm)tt');
                    lUrl    = events[i].url;				
                    if (lUrl != null) {
                        lTitle = "<a href='"+htmlEscape(lUrl)+"'>"+lTitle+"</a>";
                    }
                    if (i != temp) {
                        if ( ! dayHeaderExists(arr, lDDay) ) {
                           $("<li class='dayHeader ui-widget-header'>"+lDDay+"</li>").appendTo(html);
                           temp = z;
                           arr.push(lDDay);
//                           console.log(i+' '+arr);
                        }
                    }
                    if (i % 2 == 0) {  
                        if (allDay) {
                        eventdisplay = $("<li style='color:"+textColor+";' class='"+ClassName.join(' ')+" dayDetails even'>"+lTitle+"</a><span style='float:right'>"+ opt('allDayText') +"</span></li>").appendTo(html);
                        }
                        else {
                        eventdisplay = $("<li style='color:"+textColor+";' class='"+ClassName.join(' ')+" dayDetails even'>"+lTitle+"</a><span style='float:right'>"+lTime+"</span></li>").appendTo(html);
                        }
                    }
                    else {  
                        if (allDay) {
                        eventdisplay = $("<li style='color:"+textColor+";' class='"+ClassName.join(' ')+" dayDetails odd'>"+lTitle+"</a><span style='float:right'>"+ opt('allDayText') +"</span></li>").appendTo(html);
                        }
                        else {
                        eventdisplay = $("<li style='color:"+textColor+";' class='"+ClassName.join(' ')+" dayDetails odd'>"+lTitle+"</a><span style='float:right'>"+lTime+"</span></li>").appendTo(html);
                        }
                    }
                    eventElementHandlers(events[i], eventdisplay);
                }
                else{
//                console.log('out');
                }
			}
			eventdisplay = $("<li class='listEndCap'> </li>").appendTo(html);
		$(element).html(html);
        trigger('eventAfterAllRender');
        }

Jul 29, 2013
#71 patrick.maniraho@gmail.com
Thanks Lecoester ! Looks good.
Jul 30, 2013
#73 patrick.maniraho@gmail.com
If you are interested in using different time formats, I would advise to use the locale technique. where you will have the file that is picked up depending on the language of your browser. I can provide example if anyone is interested. This is not necessary related to list view but the whole fullcalendar.

Patrick
Aug 13, 2013
Project Member #74 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Accepted
Labels: -Type-Enhancement Type-Feature Status-Discussing
Aug 13, 2013
Project Member #75 adamrs...@gmail.com
(No comment was entered for this change.)
Labels: -Status-Discussing
Aug 13, 2013
Project Member #76 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Discussing
Aug 13, 2013
Project Member #77 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Accepted
Aug 14, 2013
Project Member #78 adamrs...@gmail.com
 Issue 1214  has been merged into this issue.
Aug 15, 2013
Project Member #79 adamrs...@gmail.com
 Issue 1572  has been merged into this issue.
Aug 15, 2013
Project Member #80 adamrs...@gmail.com
 Issue 1266  has been merged into this issue.
Aug 15, 2013
Project Member #81 adamrs...@gmail.com
 Issue 1374  has been merged into this issue.
Aug 15, 2013
Project Member #82 adamrs...@gmail.com
 Issue 1374  has been merged into this issue.
Aug 18, 2013
Project Member #83 adamrs...@gmail.com
 Issue 1471  has been merged into this issue.
Aug 20, 2013
#84 yat.c...@gmail.com
Hurray for "Accepted"! Thank you Adam!!
Aug 22, 2013
Project Member #85 adamrs...@gmail.com
 Issue 1705  has been merged into this issue.
Aug 23, 2013
Project Member #86 adamrs...@gmail.com
 Issue 1735  has been merged into this issue.
Aug 29, 2013
#87 R...@mobilizecloud.com
Hey Adam,
Any update on when this might be done?

I'll donate some money depending on the date when it will be ready.

Thanks
Rob
Aug 31, 2013
#88 eleco...@gmail.com
for information
this code is not compatible with the version 1.6.3 due to the disparition of the reportEventClear function.

Impact : thes prev & next button generate a error

Above my new code (very simple correction)

//---------------------------------------------------------------
//
// FULLCALENDAR LIST
//
//---------------------------------------------------------------

// new view and its button
fcViews.agendaList = agendaListView;
defaults.buttonText.agendaList = 'Agenda';
defaults.titleFormat.agendaList = 'MMMM yyyy';


defaults.agendaDisType = true;

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


   // exports
   t.render = render;

   // imports
   ListView.call(t, element, calendar);
   var opt = t.opt;
   var renderAgendaList = t.renderAgendaList;
   var formatDate = calendar.formatDate;


   function render(date, delta)
   {
      if (delta)
      {
         addMonths(date, delta);
         date.setDate(1);
      }
      var start, end, visStart, visEnd;
      start = cloneDate(date, true);
      start.setDate(1);
      end = addMonths(cloneDate(start), 1);
      visStart = cloneDate(start);
      visEnd = cloneDate(end);
      // I will keep all params and discuss with the group about the header 
      // as well as if we should use June 1st or start of the calendar view date
      t.title = formatDate(start, 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 renderOverlay = t.renderOverlay;
   var clearOverlays = t.clearOverlays;
   var daySelectionMousedown = t.daySelectionMousedown;
   var formatDate = calendar.formatDate;

   // locals
   var updateEvents = t.calendar.updateEvents;
   var table;
   var head;
   var headCells;
   var body;
   var bodyRows;
   var bodyCells;
   var bodyFirstCells;
   var bodyCellTopInners;
   var daySegmentContainer;

   var viewWidth;
   var viewHeight;
   var colWidth;
   var weekNumberWidth;

   var rowCnt, colCnt;
   var coordinateGrid;
   var hoverListener;
   var colContentPositions;

   var rtl, dis, dit;
   var firstDay;
   var nwe;
   var tm;
   var colFormat;
   var showWeekNumbers;
   var weekNumberTitle;
   var weekNumberFormat;
   var eventElementHandlers = t.eventElementHandlers;



   function renderAgendaList()
   {
      var firstTime = !body;
      if (firstTime)
      {
         buildTable();
      }
      else
      {
         clearEvents();
      }
   }


   function buildTable()
   {
      body = true;
   }


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

   function setWidth(width)
   {
      viewWidth = width;
   }

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


   function renderEvents(events, modifiedEventId)
   {
      var EmptyMonth = true ;
      var html = $("<div class='fc-listcalendar'></div>");
      var ClassName = "";
      $("<ul class='listCalendar'></ul>").appendTo(html);
      var lMonth, lDay, lTime, lDate, lUrl, lTitle;
      var temp, i = 0;
      var vMonth = formatDate(t.visStart, 'MM');
      var arr = [];

      for (i in events)
      {
         z = i;
         eMonth = formatDate(events[i].start, 'MM');
      
         if (eMonth == vMonth)
         {
            EmptyMonth = false ;
            
            lMonth = formatDate(events[i].start, 'MMM');
            lDay = formatDate(events[i].start, 'dddd');
            lDate = formatDate(events[i].start, 'd MMM');
            lDDay = formatDate(events[i].start, 'dddd, d MMM');
            lTitle = events[i].title;
            allDay = events[i].allDay;
            ClassName = events[i].className;
            textColor = events[i].textColor;
            if (formatDate(events[i].start, 'd MMM') == formatDate(events[i].end, 'd MMM'))
            {
               lTime = formatDate(events[i].start, opt('timeFormat')) + ' - ' + formatDate(events[i].end, opt('timeFormat'))
            }
            else            
            { 
               //alert (events[i].end) ; 
               if ( events[i].end == null)
               {
                  lTime = formatDate(events[i].start, opt('timeFormat')) ;
               } 
               else
               {
                  lTime = '=> '+ formatDate(events[i].end, 'd MMM') ; 
               }
            }
            lUrl = events[i].url;
            if (lUrl != null)
            {
               lTitle = "<a href='" + htmlEscape(lUrl) + "'>" + lTitle + "</a>";
            }
            if (i != temp)
            {
               if (!dayHeaderExists(arr, lDDay))
               {
                  $("<li class='dayHeader ui-widget-header'>" + lDDay + "</li>").appendTo(html);
                  temp = z;
                  arr.push(lDDay);
               }
            }
            if (i % 2 == 0)
            {
               if (allDay)
               {
                  eventdisplay = $("<li style='color:" + textColor + ";' class='" + ClassName.join(' ') + " dayDetails even'>" + lTitle + "</a><span style='float:right'>" + opt('allDayText') + "</span></li>").appendTo(html);
               }
               else
               {
                  eventdisplay = $("<li style='color:" + textColor + ";' class='" + ClassName.join(' ') + " dayDetails even'>" + lTitle + "</a><span style='float:right'>" + lTime + "</span></li>").appendTo(html);
               }
            }
            else
            {
               if (allDay)
               {
                  eventdisplay = $("<li style='color:" + textColor + ";' class='" + ClassName.join(' ') + " dayDetails odd'>" + lTitle + "</a><span style='float:right'>" + opt('allDayText') + "</span></li>").appendTo(html);
               }
               else
               {
                  eventdisplay = $("<li style='color:" + textColor + ";' class='" + ClassName.join(' ') + " dayDetails odd'>" + lTitle + "</a><span style='float:right'>" + lTime + "</span></li>").appendTo(html);
               }
            }
            eventElementHandlers(events[i], eventdisplay);
         }
      }

      if (EmptyMonth == true)
      {
         $("<div>Aucun evenement</div>").appendTo(html)
      }
      else
      {    
         eventdisplay = $("<li class='listEndCap'> </li>").appendTo(html);
      }
       
      $(element).html(html);
      trigger('eventAfterAllRender');
   }

   function dayHeaderExists(arr, header)
   {
      for (var i = 0; i < arr.length; i++)
      {
         if (arr[i] == header) return true;
      }
      return false;
   }

   function clearEvents()
   {
      //reportEventClear();
   }
}

;    

Aug 31, 2013
#89 allon.mo...@gmail.com
Do you have a demo available?

Sent from my android.
Sep 4, 2013
#91 m37...@gmail.com
When you include a google feed with another local source of event data, the list view above is not sequence correctly by date.  Any plans to incorporate this feature?
Sep 17, 2013
#92 Jaybi...@gmail.com
I think this could be also the solution to make the FC more responsive.
Would it be handy if you could change the view between agendaList and the basic calendar, based on the current viewport size? For example week view on desktop, and agenda list if using a mobile device.
Nov 4, 2013
#93 tobias.l...@gmail.com
@ m37651: try sorting your google feed by adding "?orderby=starttime&sortorder=ascending" to the url.
Nov 7, 2013
#94 patrick.maniraho@gmail.com

@elecoest - thanks, i had not yet updated my file 
I recently made the code much cleaner and shorter and compartible with 1.6.4 and fixed issue with sorting.

you can find a demo here (using fullcalendar v. 1.6.4) :
http://apex.oracle.com/pls/apex/f?p=28419:1:581090523204:::::

I am attaching sample css file as well or you can get it from the above link
again big thanks to Adam ... this is great work !



//-------------- LIST VIEW --------------

fcViews.agendaList = agendaListView;
defaults.buttonText.agendaList='Agenda';
defaults.titleFormat.agendaList='MMMM yyyy';


defaults.agendaDisType   = true;

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


        // exports
        t.render = render;

        // imports
        ListView.call(t, element, calendar );
        var opt = t.opt;
        //var renderAgendaList = t.renderAgendaList;
        var formatDate = calendar.formatDate;
		
		
	function render(date, delta) {
	    if (delta) {
		   addMonths(date, delta);
		   date.setDate(1);
		}
		var start, end, visStart, visEnd;
        start		= cloneDate(date, true);
		start.setDate(1);
		end = addMonths(cloneDate(start), 1);
		visStart = cloneDate(start);
		visEnd   = cloneDate(end);

		t.title = formatDate(start, opt('titleFormat'));
		t.start = start;
		t.end   = end;
		t.visStart = visStart;
		t.visEnd   = visEnd;	
	}
}

    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;



        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;

        
		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);
                tend   = cloneDate(events[i].end);
                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, 'MM');

            for (i in displayeventlist) {
                z = i;
                em = formatDate(displayeventlist[i].start, 'MM');
                // make sure we display the current view month events only
                // this can be changed and may be display events from today + 30 days (google does sth like this)
                // these css classes, can cleaned up much better to have fullcalendar consistent view
                if ( em == vm ) {
                    dd      = formatDate(displayeventlist[i].start, 'dddd');
                    lday    = formatDate(displayeventlist[i].start, 'MMMM d, yyyy');
                    ltitle  = displayeventlist[i].title;
                    allDay  = displayeventlist[i].allDay;
                    st      = formatDate(displayeventlist[i].start, 'h(:mm)tt');
                    et      = formatDate(displayeventlist[i].end, 'h(:mm)tt');
                    lurl    = displayeventlist[i].url;
                    classes = displayeventlist[i].className;
                    
                    if (lday != temp) {
                        $("<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'>All Day</span>"+
                                            "</div>"+
                                            "<div class='fc-agendaList-eventDetails'>"+
                                              "<div class='fc-eventlist-title'>"+ltitle+"</div>"+
                                              "<div class='fc-eventlist-desc'>"+ltitle+"</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+"</span> "+
                                                "<span class='fc-event-end-time'>"+et+"</span>"+
                                            "</div>"+
                                            "<div class='fc-agendaList-eventDetails'>"+
                                              "<div class='fc-eventlist-title'>"+ltitle+"</div>"+
                                              "<div class='fc-eventlist-desc'>"+ltitle+"</div>"+
                                            "</div>"+
                                          "</" + (lurl ? "a" : "div") + ">"+                                        
                                        "</li>").appendTo(html);   
                    }
                    eventElementHandlers(displayeventlist[i], eventdisplay);
                }
			}
		    $(element).html(html);
            trigger('eventAfterAllRender');
        }

    }
;;
agendalist.css
2.1 KB   View   Download
Dec 5, 2013
#96 gaspar...@gmail.com
Hi Patrick and Thanks to you for this code.
I had problem with your code, all of my events where duplicated.
Here is the solution, in your code (renderEvents function) 
replace :
tstart = cloneDate(events[i].start);
tend   = cloneDate(events[i].end);
with :
tstart = cloneDate(events[i].start,true);
tend   = cloneDate(events[i].end,true);

I have also adapted it to show the week events instead of the month.
Once again many thanks, great job

/***************** List View *********************/
// PMANIRAHO : adding a list view

//add new view and its button
fcViews.agendaList = agendaListView;
defaults.buttonText.agendaList='Agenda';
defaults.titleFormat.agendaList='W';


defaults.agendaDisType   = true;

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


        // exports
        t.render = render;

        // imports
        ListView.call(t, element, calendar );
        var opt = t.opt;
        //var renderAgendaList = t.renderAgendaList;
        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 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;
                    
                    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'>All Day</span>"+
                                            "</div>"+
                                            "<div class='fc-agendaList-eventDetails'>"+
                                              "<div class='fc-eventlist-title'>"+ltitle+"</div>"+
                                              "<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+"</span> "+
                                                "<span class='fc-event-end-time'>"+et+"</span>"+
                                            "</div>"+
                                            "<div class='fc-agendaList-eventDetails'>"+
                                              "<div class='fc-eventlist-title'>"+ltitle+"</div>"+
                                              "<div class='fc-eventlist-desc'>"+ltitle+"</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
		}
    }
;;

Dec 8, 2013
#97 paul.wol...@gmail.com
there was one thing in the css that messes up the start- and endtime in the agendaListview.
change this:

.fc-event-time {
      display: inline-block;
      vertical-align: top;
      width: 15%;
      margin-right: 8px;
    }

to: 
.fc-agendaList .fc-event-time {
      display: inline-block;
      vertical-align: top;
      width: 15%;
      margin-right: 8px;
    }
Dec 8, 2013
#98 paul.wol...@gmail.com
and when you want to show the times like this: 9:00 - 12:00 (next to eachother instead of beneath eachother)
change this in renderEvents:

"<span class='fc-event-start-time'>"+st+"</span> "+
"<span class='fc-event-start-time'>"+et+"</span> "+

in: 
"<span class='fc-event-start-time'>"+st+(et ? " - "+et : "")+"</span> "+
Feb 6, 2014
#99 Crazy...@gmail.com
In the examples people have given of how to make a list view, the two newest ones say in some part:

// make sure we display the current view month events only
// this can be changed and may be display events from today + 30 days (google does sth like this)
// these css classes, can cleaned up much better to have fullcalendar consistent view

How would one go about changing the code to display events from today + 30 days?
Feb 10, 2014
#100 schrader...@gmail.com
@Crazy...

I used one of the links above, then copied their version of the list view.  And it's working for me.  I have attached my working copy. Hope this helps.
fullcalendar.customized.js
168 KB   View   Download
Feb 14, 2014
#101 bernard...@gmail.com
Got month and agenda views to work perfectly :) Thank you for the AgendaList feature! Is there a way to edit the style of past events so that each event is updated once the day has passed? I know this is available for the month view via css with the class ".fc-view-month .fc-past" but this does not effect the agenda view and the agendalist is undocumented on Arshaw's site. Thank you in advance.
Feb 21, 2014
#102 m37...@gmail.com
I don't believe this agenda view hanldes multi-day events correctly.  A seven-day event is appear as 7 hours on the last day of the event.
Feb 22, 2014
#103 m37...@gmail.com
per the multiple day issue, if you sent parameters to:
events: [
{
title: 'Long Event - multiple days',
location: 'This is the location 2',
start: new Date(y, m, d-2),
end: new Date(y, m, d+1)
}

your will end up with the display:

Sunday    February 23, 2014

All Day Long Event - multiple days
This is the location 2

All Day  Long Event - multiple days
This is the location 2

All Day Long Event - multiple days
This is the location 2

All Day Long Event - multiple days
This is the location 2

Hope this helps
Feb 25, 2014
#104 patrick.maniraho@gmail.com
@crazy n all,

I will make changes and push the new code soon.. we will have current month or today+30 days. Actually I am thinking ability to scroll up/down as needed would be better.. what do you think ?
Feb 25, 2014
#105 m37...@gmail.com
If you are asking for feedback, I wouuld love to see you add the following options:
1) a parameter that would start the listing at the current day (default);
2) a parameter (possibly the same one) that would start the listing at the beginning of the month (vs the current day);
3) a parameter that would allow the list to go for today+18 months (ok, so ideally this would be a variable so for someone else it might be 1 month or 3 months).  My current calendar goes 18 months out;
4) a parameter that would organize the events be months vs the weeks that you have it now (weeks would be nice), but if I go 18 months out as I currently do, months is more appropriate;
5) There are other customizations that I would pay you to do too.  
Apr 28, 2014
#106 hrdae...@gmail.com
would be great if an (agenda) list item had a border-left to show the calendar color/ event color.
I'm using multiple calendars so it would be great to see the right colors. About a year ago i hacked in my own listview and it had the colors, but Patrick's real fullcalendarview is much better ofcourse..
Apr 28, 2014
#107 paul.wol...@gmail.com
ah, already found out. I changed the code a bit to show the colors. (btw. i accidentally posted the last comment with the googleaccount of my mother in law :o)
colors in listview.JPG
19.4 KB   View   Download
Apr 28, 2014
#108 paul.wol...@gmail.com
pcolor   = displayeventlist[i].color;

"<"+ (lurl ? "a href='"+ lurl +"'" : "div") + " class='fc-agendaList-event fc-eventlist "+classes+"' style='border-left:4px solid "+pcolor+"'>"+
                                            
Jun 6, 2014
Project Member #109 adamrs...@gmail.com
@hasanozgan, in his fork, has implemented this:
https://github.com/arshaw/fullcalendar/pull/60

It's based on a pretty old version of the code, and I have not extensively tested it, but might be worth checking out.
Jun 13, 2014
#111 s4Lo...@gmail.com
I have started working on this feature for integration with the latest version of fullcalendar (currently 2.0.0). Here is my plan:

- Rather than showing a set range of time, I intend to show a configurable number of events limited by a configurable time period. 
  - Furthermore, I intend to request for events at a configurable interval (the request interval) so if you want to show 10 events with a limit of a one year time period and a 30 day request interval then starting from the currently configured date, if the next month contains only 3 events then it will go to the next month and so on and so forth until 10 events are found or until it reaches one year. 
- It is also my intention to add buttons so that the user can configure how many events to be shown on each page. 
  - For simplicity this will be limited to three buttons with defaults of 5, 10 and 25 (also configurable)
  - Furthermore, the back button will still be supported so that users may view past events - this will also have a separate configurable time period limiting how far in the past the user will be able to view events 
- The limits to how far forward or how far backward one will be able to view events will be anchored by the current date.

Please share your thoughts, comments, concerns and/or criticisms. I hope to have a working sample up this weekend.
Jun 20, 2014
#112 s4Lo...@gmail.com
In case anyone is waiting for an update on this, I had to postpone work on this until at least after July 11th weekend due to my involvement with a new business venture, but I still intend to implement this once I have the time
Jun 25, 2014
#113 m37...@gmail.com
I would be interested.  I have been waiting for Patrick to make some updates to fix the all date feature in his listing.  
Jun 30, 2014
#114 jepst...@alz.org
I am just about to start a project where list view is the preferred default view. Right now I am planning on a separate ajax function to populate a div separate from FullCalendar, and having the nav switch between views (making the event source also available to FC of course.) Obviously, it would be very handy to keep everything in FC. What is described in #111 would be awesome if implemented.
Jul 14, 2014
#115 crunchie...@gmail.com
I'm also very interested in this. #111 sounds like a brilliant plan. I'm not 100% sure what options & features are ideal, but am happy to provide feedback and work on it as well.
Jul 14, 2014
#116 patrick.maniraho@gmail.com

Again Thanks to Adam, great work !!!


I have not been checking this thread for a while.
I just got sometime to go through 2.0.2 version and have made updates to my previous code. if you come across some issues, I will be happy to look at it again

I always try to keep the fullcalendar code intact, so my changes start from 7084, and you can grab he new version and paste those changes and you should be good to go

here is the css file again agendalist.css, i might have made some updates or it is the same as the previous version

the rest, do forget momentjs ofcourse

https://apex.oracle.com/pls/apex/f?p=28419:1:108144054600559
agendalist.css
2.0 KB   View   Download
fullcalendarlist.js
190 KB   View   Download
Jul 26, 2014
#117 ipet...@gmail.com
Hello,
is there a way to port this feature back to the 1.6.4 version? I use Fullcalendar as a Drupal module and it works only with 1.x version of FC
Jul 29, 2014
#118 paul.wol...@gmail.com
Hi Patrick, i'm using your previous version. Great work, there is just one little thing, i don't know is somebody else also saw it. I have a two-day event with start- and endtime 19:00 - 22:00, but the second day the starttime is rendered as 00:00 - 22:00 ... it should also be 19:00 - 22:00.
Thanks, Paul

Jul 29, 2014
#119 paul.wol...@gmail.com
Patrick , i fixed it. i changed this (the _ in front of 'start') :  
st      = formatDate(displayeventlist[i]._start, 'H:mm');

for some reason my 'start' was 00:00 or null
Aug 12, 2014
#120 maciej.p...@gmail.com
Hi Patrick, thank You for your work, ListViev works great.

Can you please tell me is there a way to change the list viev for a week list viev, not a motnh list viev ?

Thanks, Maciej



Aug 26, 2014
#121 f.albon...@gmail.com
Hello Adam, great to see FullCalendar 2.1.0 made available! Is there an update on the proposed "plugin architecture" that would allow anyone to extend FC with custom views? 
Many thanks and best regards
Aug 27, 2014
Project Member #122 adamrs...@gmail.com
@f.albonico, sorry no, same status as before: there actually already is a plugin architecture (that the built-in views use as well), but it is not finalized or documented yet. for now, you can explore the source to get an idea for how it works.
Aug 27, 2014
#123 s4Lo...@gmail.com
FYI I ended up abandoning my work on this and decided to work with a bootstrap-compatible calendar that better fit my needs
Aug 31, 2014
#124 hujia...@gmail.com
tO patrick.maniraho@gmail.com

Hi, Patrick,
I liked your latest patch of agendalist with fullcalendar 2.0.2.
I am wondering if you can patch the latest fullcalendar 2.1.0, which adds some important features that we need.  I tried to copy your agendalist code to it, but it does not work.

Thanks for your contribution.

George

Sep 2, 2014
#125 patrick.maniraho@gmail.com
Hi George,

I will be looking into this coming weeks.

@Maciej,
Yes, it is easy to change the view of the list.. actually, I was thinking of adding a scrollable view, which would allow a fixed set of number of events to be listed and then scroll up and down
Sep 16, 2014
#126 samedii
I'm working on this atm and it's almost done. Would be wonderful if someone with better insight into this code could check if i'm making use of the correct mechanics (of the huge codebase).. Anyone interested?
Sep 19, 2014
#127 samedii
Here is my fork with an added list view inspired by the old roundcube fork

https://github.com/samedii/fullcalendar
Sep 19, 2014
#128 rbend...@alienapparatus.com
@same,
I've checked out your code but the basicList view looks identical to the dayView with the exception of the title showing a range of days rather than just one day.  The list does not appear to be showing all events in this range, only the first day's events show, just like the dayView.  Am I missing something?
Sep 22, 2014
#130 samedii
@rbend,
Dist files are pushed now
Sep 22, 2014
#131 flyboyty...@gmail.com
This new dist still supports the list? I tried it out didn't get anything when I replaced the previous version I had on a page.
Sep 22, 2014
#132 samedii
This is what I have (of basic views demo)

Arshaw is ignoring the lib files (which include jquery and moment.js). He wouldn't want me to include those (if I'm gonna make a pull request later).

You can just use it in your own project or if you want to run the demos you need to run "sudo npm install" and "bower install" and it will install everything you need

p.s. I just corrected the default column format
Screen Shot 2014-09-22 at 23.15.36.png
61.6 KB   View   Download
Oct 20, 2014
#134 RebelL...@gmail.com
any chance we can get a vertical month view as well?
Oct 23, 2014
#135 patrick.maniraho@gmail.com
Hey ! 

It is been crazy days !! I just finished updated my changes to fc 2.1.1. Adam has refactored many function and I changed the previous code to follow the same coding style.I have again kept the changes out of the main code, so that upgrading will be much easier.

will update my demo page shortly 
https://apex.oracle.com/pls/apex/f?p=28419:1:108144054600559

Patrick

agendalist.css
2.0 KB   View   Download
fullcalendarlist.js
249 KB   View   Download
Nov 10, 2014
#137 prabahar...@i-waves.com
hi,

can you give me the pagination in the agenda list view?


Nov 13, 2014
#138 der...@gmail.com
Patrick, I think if you add

this.trigger('eventRender', displayeventlist[i], displayeventlist[i], eventdisplay);

after line 8579, the eventRender hook will work properly again for the displayed elements, in my limited experience.

Still looking how to fix eventClick.

Nov 13, 2014
#139 der...@gmail.com
Also, you might want to change line 8533 to

lurl = displayeventlist[i].url ? htmlEscape(displayeventlist[i].url) : false;

to avoid lurl being defined as 'undefined' and all the items getting that as the url even for events without an url property.
Nov 13, 2014
#140 der...@gmail.com
If you apply #138 you can then handle the funcionality of eventClick in a roundabout manner by doing a bind in eventRender - so it doesn't matter anymore that eventClick doesn't work directly. Somewhat ugly but it does the job in a pinch.
Nov 25, 2014
#141 flyboyty...@gmail.com
This modification is great, is there anyway to make it do just a week at a time?

Many thanks
Dec 2, 2014
#142 ferre...@rheacounty.org
Patrick,

Thanks for all your work on this addition! I'm currently working it in to FC 2.2.3. All my events come from a Google calendar, using the latest gcal.js and the new API. Events in the Google calendar that have start and end times (i.e. aren't "all day") are showing up in agenda list view with the full date repeated (e.g. "December 11, 2014 / December 11, 2014") instead of the start and end times. Could the API switch have cause some confusion in the startDate and endDate variables?
Dec 2, 2014
#143 pgalla...@gmail.com
I had the same problem with the date being displayed in list view instead of the time.  I changed the default columnFormat.agendaList property to 'HH:mm' instead of 'MMMM D, YYYY' at line 8398, to get the time to display.

I'm curious because the demo displays the time, so we may have a little source code disconnect from what was provided late october. I'm pretty new to this so, I may have missed downloading an update or something.
Dec 5, 2014
#144 pgalla...@gmail.com
Well, my solution was based on a lack of experience and a less than full understanding of the code. Instead of changing the value of the property for columnFormat.agendaList, add another line after 8398 to:

defaults.timeFormat.agendaList = 'HH:mm';

Then I added the following statements around 8532 to create a formatted time using the timeFormat option for the start and end times:

startTime = htmlEscape(formatDate(displayeventlist[i].start, this.opt('timeFormat')));
endTime = htmlEscape(formatDate(displayeventlist[i].end, this.opt('timeFormat')));

Then use startTime and endTime around 8571 where the times are generated.

I'm sure there's a more efficient way to do this, but I just wanted to get something working.
Dec 17, 2014
#145 mmarcu...@gmail.com
are these changes in a github repo somewhere so that I can pull into my branch to try to get working or finish the functionality?

Thanks
Dec 17, 2014
#146 pgalla...@gmail.com
I am also looking for an updated version of the source with clicking on the event processing the eventClick property in agendaList mode (it works in everything but agendaList). I've tried #138 without any success.

Thank you
Dec 18, 2014
#147 mmarcu...@gmail.com
I made a basic list view here, works well for what I need:

https://github.com/marcucio/fullcalendar

WhenI'm done cleaning up I'll submit a pull request into the main branch to see if they will accept it.


Screen Shot 2014-12-18 at 12.27.46 PM.png
64.7 KB   View   Download
Dec 23, 2014
#148 war...@gmail.com
Any update on a two week view? should we have a separate issue to track votes/people wanting that exact enhancement? 
Dec 30, 2014
#149 mmarcu...@gmail.com
two week view is now possible with the latest changes (check in yesterday) just by setting the duration.weeks = 2. See screen shot for what this looks like
Screen Shot 2014-12-30 at 12.23.04 PM.png
47.2 KB   View   Download
Dec 30, 2014
#150 mmarcu...@gmail.com
I updated my list view to be able to display the dates to the left (like in my previous screen shot) or above the day like in the other examples listed in this thread. Attached is what it looks like.

all changes are checked in here:

https://github.com/marcucio/fullcalendar


Screen Shot 2014-12-30 at 1.11.14 PM.png
54.8 KB   View   Download
Jan 28, 2015
#151 pmgb...@gmail.com
Hello, is any of these agendaLists already integrated in the code? It seems so reading this thread but I can't see any in the docs.
Feb 4, 2015
#152 abella...@gmail.com
Hey! There is a way to do this now. The view is called "agendaDay". You can see an example on the site. 
Feb 21, 2015
#154 frankcau...@gmail.com
No, "agendaDay" is not the list view that is asked on this post.
@marcucio : Thanks for your code. I would like to display the month like on your screenshot for example December 2014 and not a range. For the moment I get a range from the current day + 30 days added ?..
Also, I would like to hide empty days, when there is no event.
Thanks for your help.
Mar 31, 2015
#155 jorisman...@gmail.com
Hello, any update about the implementation of this feature ? 
Apr 1, 2015
#156 prashant...@inflexiontech.com
@frankcau, i need the same feature what you expecting in full calendar.. if you find some thing please post in this thread.. 
Apr 23, 2015
#157 steven.z...@gmail.com
@mmarcu did you ever submit a pull request for your commit last December for the list view?  That view is really the only complete, mobile friendly view available for FullCalendar.
Apr 28, 2015
#158 samedii
You should use the plugin method now. Here's an example of how I did it


listView.js
7.6 KB   View   Download
Apr 29, 2015
#159 gaspar...@gmail.com
Very nice, many thanks samedii.

I am trying to format the title to get something like the AgendaWeek View : 29th april 20015 - 8th May 2015 (instead of 29th april 20015)
Here is my actual config 
views: {
list: {
		type: 'ListView',
		duration: { days: 10 },
		buttonText: 'Liste',
		titleFormat: 'D MMMM YYYY'
	}
}

I have tried titleFormat: 'D MMMM YYYY, D MMMM YYYY' and 'D MMMM YYYY [D MMMM YYYY]'
Do you have any idea how can I achive this ?
Regards and thanks for your view
May 7, 2015
#160 michae...@gmail.com
Maybe delete in listView.js : 

computeTitle: function() {
            return moment().format(this.opt('titleFormat'));
        },

and use :

titleFormat: 'll' 

you'll obtain sth like 
"7 mai — 4 août 2015"
May 26, 2015
Project Member #161 adamrs...@gmail.com
 Issue 2500  has been merged into this issue.
Jun 16, 2015
#164 gaspar...@gmail.com
Hi there,
I am trying to implement the latest version of Fullcalendar (2.3.2) with the samedii listview plugin (attach below).

I get this error : Uncaught TypeError: Cannot read property 'apply' of undefined (line 50) which correspond to 
View.prototype.render.apply(this, arguments); 
in the render function

I have tried and search for a solution without any success.

Anyone can help on this ?
Regards
listview.js
7.9 KB   View   Download
Jun 16, 2015
#165 mahbub.e...@gmail.com
Hallo,

I must appreciate samedii's effort as I am using his listview.js file for my project. However there is an issue I need your help. 

In computeRange method we can set the day range(e.g. days: 10). So, each time events are loading for 10 days. Now if I don't have any events from Jun 16 to Jun 25 (10 days) it is not showing any events but may be there are events after Jun 25. I can see them on click Next button.

So, I want to show all upcoming events without any date range. I want to show upcoming events from now to whenever the last event.

Thank you
Jun 17, 2015
#166 wpalch...@gmail.com
I am trying to use samedii's solution, but it isn't having any effect.  This probably means I'm doing it wrong.  I have pasted samedii's code into a file, followed by: 
$('#events-full-calendar').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay,ListView'
		},
		timeFormat: 'H:mm',
		columnFormat: {
			month: 'ddd',
			week: 'ddd, DD/MM',
			day: 'dddd'
		},
		firstDay: emCalendarArgs.firstWeekDay,
		events: emCalendarArgs.events,
		editable: false
    });

That is having no effect on my site.  Do I need to do something else to make the code work?
Jun 25, 2015
#167 st...@madmadmad.com
@wpalch

Using samedii's plug-in, the view is called "list" not "ListView. So...

right: 'month,agendaWeek,agendaDay,list'

@marcucio

Your branch does not work at all with the latest Google Calendar plug-in. Too bad. It's the best list view here.
Jun 25, 2015
#168 st...@madmadmad.com
@gaspar

That appears to be a bug. A discrepancy between the minified and non-minified code?

If you use fullcalendar.min.js all should be well.
Jun 25, 2015
#169 wpalch...@gmail.com
Thank you, @madmadmad!

Like gaspar, I am getting error messages from line 50:
TypeError: View.prototype.render is undefined

For now, I am using @mercucio's fork, and that is working very nicely - thank you!
Jun 29, 2015
#170 gaspar...@gmail.com
Hello and thanks for answering madmadmad.
I have also tried with the non minified version of Fullcalendar and the error is still there.

I am working with 2.3.2 version of Fullcalendar

Here you can reproduce the problem http://jsbin.com/qotedicubo/1/edit?html,js,output
Click on the List button to get the error
Jun 29, 2015
#171 st...@madmadmad.com
@gaspar

Looks like there's something amiss between 2.3.1 and 2.3.2.

I tried 2.3.1 in your jsbin and the list view worked.
Jun 29, 2015
#172 st...@madmadmad.com
Also... if y'all are using @samdii's plugin (listview.js) and you want to pick up the class names via the Google Calendar plug-in (gcal.js), it's at or around line 136.

Change this: 

<tr class="fc-row fc-event-container fc-content">\

To this:

<tr class="fc-row fc-event-container fc-content '+ e.source.className[0]+'">\

Here's a work in progress using FullCalendar, listview.js (modified) and multiple Google cals via gcal.js plugin:

http://woodlane.madmadmad.net/cal/g.html




Jun 30, 2015
#173 gaspar...@gmail.com
If you want to use Samedii's list view work with Fullcalendar 2.3.2 here is the file.
It is actually the same file than samedii's one, I just commented the lines that used to create the bug 
render: function() {
            // responsible for displaying the skeleton of the view within the already-defined
            // this.el, a jQuery element.
            //View.prototype.render.apply(this, arguments);
        },
.... and ....
destroyEvents: function() {
            // responsible for undoing everything in renderEvents
            //View.prototype.destroyEvents.apply(this, arguments);
        },


listview.js
7.9 KB   View   Download
Aug 8, 2015
#174 webmas...@wcyouth.org
All -
I've had a great amount of luck in digesting and reprocessing a more custom configuration that includes "month" "week" "day" and "list" views. These are coming from 4 separate Google Calendar feeds and have clickability of showing details in a modal pop up. I want to thank each of you that have posted your issues and code fixes that have helped knowledge and understanding of this project. At the end of the day I'm really left with only one "simple" question. The darn code organizes the events by calendar feed order and pays no attention to the event time. I have struggled with this for the past two days without any success. I would think a simple order based on start time would be easy....... I have found it was not. Any help in this endeavor would be greatly appreciated. The ListView code I'm using is below. This is currently working in conjunction with FullCalendar 2.3.2

(function() {
    'strict';


    var FC = $.fullCalendar, // a reference to FullCalendar's root namespace
        View = FC.View, // the class that all views must inherit from
        ListView; // our subclass

    ListView = View.extend({ // make a subclass of View

        computeRange: function(date) {
            var intervalDuration = moment.duration(this.opt('duration') || this.constructor.duration || {
                days: 10
            });
            var intervalUnit = 'day';
            var intervalStart = date.clone().startOf(intervalUnit);
            var intervalEnd = intervalStart.clone().add(intervalDuration);
            var start, end;

            // normalize the range's time-ambiguity
            intervalStart.stripTime();
            intervalEnd.stripTime();

            start = intervalStart.clone();
            start = this.skipHiddenDays(start);
            end = intervalEnd.clone();
            end = this.skipHiddenDays(end, -1, true); // exclusively move backwards

            return {
                intervalDuration: intervalDuration,
                intervalUnit: intervalUnit,
                intervalStart: intervalStart,
                intervalEnd: intervalEnd,
                start: start,
                end: end
            };
        },
                
                initialize: function() {
            // called once when the view is instantiated, when the user switches to the view.
            // initialize member variables or do other setup tasks.

            View.prototype.initialize.apply(this, arguments);
        },
                
                render: function() {

            // responsible for displaying the skeleton of the view within the already-defined
            // this.el, a jQuery element.
            //View.prototype.render.apply(this, arguments);
        },

        computeTitle: function() {
            // return moment().format(this.opt('titleFormat'));
            return moment(this.start).format('MMM D') + " - " + moment(this.end).format('MMM D, YYYY');
        },

        setHeight: function(height, isAuto) {
            // responsible for adjusting the pixel-height of the view. if isAuto is true, the
            // view may be its natural height, and `height` becomes merely a suggestion.
            this.el.height(height);

            View.prototype.setHeight.apply(this, arguments);
        },

        renderEvents: function(events) {
            // reponsible for rendering the given Event Objects

            var noDebug = true;
            noDebug || console.log(events);

            var eventsCopy = events.slice().reverse(); //copy and reverse so we can modify while looping

            var tbody = $('<ul class="fc-agendaList"></ul>');

            this.scrollerEl = this.el.addClass('fc-scroller');

            this.el.html('')
                .append('<div></div>').children()
                .append(tbody);

            var periodEnd = this.end.clone(); //clone so as to not accidentally modify

            noDebug || console.log('Period start: ' + this.start.format("YYYY MM DD HH:mm:ss Z") + ', and end: ' + this.end.format("YYYY MM DD HH:mm:ss Z"));

            var currentDayStart = this.start.clone();
            while (currentDayStart.isBefore(periodEnd)) {

                var didAddDayHeader = false;
                var currentDayEnd = currentDayStart.clone().add(1, 'days');

                noDebug || console.log('=== this day start: ' + currentDayStart.format("YYYY MM DD HH:mm:ss Z") + ', and end: ' + currentDayEnd.format("YYYY MM DD HH:mm:ss Z"));

                //Assume events were ordered descending originally (notice we reversed them)
                for (var i = eventsCopy.length - 1; i >= 0; --i) {
                    var e = eventsCopy[i];

                    var eventStart = e.start.clone();
                    var eventEnd = this.calendar.getEventEnd(e);

                    if (!noDebug) {
                        console.log(e.title);
                        console.log('event index: ' + (events.length - i - 1) + ', and in copy: ' + i);
                        console.log('event start: ' + eventStart.format("YYYY MM DD HH:mm:ss Z"));
                        console.log('event end: ' + this.calendar.getEventEnd(e).format("YYYY MM DD HH:mm:ss Z"));
                        console.log('currentDayEnd: ' + currentDayEnd.format("YYYY MM DD HH:mm:ss Z"));
                        console.log(currentDayEnd.isAfter(eventStart));
                    }

                    if (currentDayStart.isAfter(eventEnd) || (currentDayStart.isSame(eventEnd) && !eventStart.isSame(eventEnd)) || periodEnd.isBefore(eventStart)) {
                        eventsCopy.splice(i, 1);
                        noDebug || console.log("--- Removed the above event");
                    } else if (currentDayEnd.isAfter(eventStart)) {
                        //We found an event to display

                        noDebug || console.log("+++ We added the above event");

                        if (!didAddDayHeader) {                                         
                                                        tbody.append("<li class='fc-agendaList-dayHeader ui-widget-header'>" +
                            "<span class='fc-agendaList-day'>"+ currentDayStart.format('dddd') +"</span>" +
                            " <span class='fc-agendaList-date'>"+ currentDayStart.format("Do MMMM YYYY") +"</span>" +
                        "</li>");

                            didAddDayHeader = true;
                        }

                        /*
                        <td class="fc-event-handle">\
                                <span class="fc-event"></span>\
                            </td>\
                         */

                                        var segEl = $("<li class='fc-agendaList-item fc-today fc-thu'>"+
                                        "<div class='fc-agendaList-event-"+ e.source.className[0]+" fc-eventlist'>"+
                                            "<div class='fc-event-time'>"+
                                                "<span class='fc-event-start-time'>"+ (e.allDay ? this.opt('allDayText') : e.start.format('(h:mm)t') +"</span> "+
                                                "<span class='fc-event-time-space'>"+ ' - ' +
                                                "<span class='fc-event-end-time'>"+ e.end.format('(h:mm)t')) +"</span>"+
                                            "</div>"+
                                              "<span class='fc-eventlist-title'>"+e.title+"</span><br />"+
                                              "<div class='fc-eventlist-desc'>"+e.description+"</div>"+
                                          "</div>"+                                        
                                        "</li>");   
                        tbody.append(segEl);

                        //Tried to use fullcalendar code for this stuff but to no avail
                        (function(_this, myEvent, mySegEl) { //temp bug fix because 'e' seems to change
                            segEl.on('click', function(ev) {
                                return _this.trigger('eventClick', mySegEl, myEvent, ev);
                            });
                        })(this, e, segEl);

                    }

                }

                currentDayStart.add(1, 'days');
            }

            this.updateHeight();

            View.prototype.renderEvents.apply(this, arguments);
        },

        destroyEvents: function() {
            // responsible for undoing everything in renderEvents
            //View.prototype.destroyEvents.apply(this, arguments);
        },

        renderSelection: function(range) {
            // accepts a {start,end} object made of Moments, and must render the selection
            View.prototype.renderSelection.apply(this, arguments);
        },

        destroySelection: function() {
            // responsible for undoing everything in renderSelection
            View.prototype.destroySelection.apply(this, arguments);
        }

    });

    FC.views.list = ListView; // register our class with the view system
        
        
})();
Aug 8, 2015
#175 webmas...@wcyouth.org
A screen shot to go along with my post above.
image.jpg
688 KB   View   Download
Aug 22, 2015
Project Member #176 adamrs...@gmail.com
Discussion for this issue has moved to the following URL:
https://github.com/fullcalendar/fullcalendar/issues/560

This is because Google Code is shutting down. Apologies if you are being pestered with these notifications. This is a one-time event.

Happy coding,
Adam
Status: ExportedToGithub
Sign in to add a comment

Powered by Google Project Hosting