Issue 4: Add support for Agenda view
Status:  Done
Owner: ----
Closed:  May 2009
Reported by abelie...@gmail.com, May 2, 2009
Possible to add an agenda view? this would be excellent as you can have a
main calendar view and on the front page have an agenda view for upcoming
events. 

Either way top job.
May 4, 2009
Project Member #1 adamrs...@gmail.com
do you mean just a plain list of the upcoming events (just text)?
when you mean 'front page', do you mean on a different HTML page altogether?

if my assumptions are correct, this might be better suited as a completely different
plugin. or not as a jquery plugin at all, rather as a server-side script
Labels: -Type-Defect -Priority-Medium Type-Enhancement Priority-Low
May 5, 2009
#2 abelie...@gmail.com
THat's right, a plain list of upcoming events. Preferably each attribute, ie day,
month description, etc wrapped in a seperate tag to allow css formatting.

If you have any links or pointers on how to do this server side that would be great.

thanks
May 25, 2009
#3 paul.wol...@gmail.com
If it's just a list you want, you can do it with PHP. Get the events for the next *
days in PHP form a MySQL database , put it in an array and show it in your template. 
May 25, 2009
Project Member #4 adamrs...@gmail.com
FullCalendar might include some serverside [PHP] scripts in the future on getting a
barebones database set up + connecting to it, but for now its just a javascript
widget. what you're asking can be done w/ basic PHP and MySQL queries, like what Paul
said.

If what you are envisioning something really dynamic + w/ AJAX, you would need to
have some javascript involved too. but its probably out of the scope of FullCalendar.
Status: Done
May 25, 2009
#5 abelie...@gmail.com
Thanks, will investigate. Much appreciated.
Dec 8, 2009
#6 bacoope...@gmail.com
I think what abeliever was getting at is something similar to what google calendar
does.  They have "day", "week", "month", "4-day", and "agenda" views.  The only
problem with keeping this functionality completely outside the scope of the calendar
is that there would be no way to add the "agenda" button to the list of views and
then be able to toggle between those views.  It would have to be a button completely
separate from the other view buttons outside of the calendar widget.  And then once
you switch into agenda view, how do you switch back to one of the supported views,
since the entire calendar widget would be replaced by this agenda view?
Dec 8, 2009
#7 bacoope...@gmail.com
Maybe an alternate solution could be to support the addition of custom views or
custom buttons.  Maybe you can add a button with a click event that can make a js or
ajax call to load some html.
Dec 9, 2009
Project Member #8 adamrs...@gmail.com
ah, now i understand, that last tab on google calendar...

yes bacooper, a way to make custom views/buttons would be really cool. i'm hoping to
get to this in a release soon. it would be perfect for implementing what abeliever
describes (although i probably wouln't implement it myself, a 3rd party developer could)
Jan 19, 2010
Project Member #9 adamrs...@gmail.com
abeliever, finally have a new issue to what were originally describing. i'm calling
it "List" view. probably won't happen in the near term, but here is the issue if u
want to star it...
https://code.google.com/p/fullcalendar/issues/detail?id=289
Mar 28, 2010
#10 noosal...@gmail.com
If it helps anyone above with regard to adding new buttons you can do it via jQuery in a more manual method as per the below example...

$('.fc-header-right tr').append('<td><div class="required classes"><a><span>New Button</span></a></div></td>');

Its a little hacky, but it does get the job done. With all the required classes looks like....

// this is based on the main DIV ID being calendarOffice
$('.fc-header-right tr','#calendarOffice').append('<td><div class="fc-button-agendaList ui-state-default ui-corner-right"><a><span>new 
button</span></a></div></td>');
// this next line just assists with keeping all the buttons looking correct within the theme.
$('.fc-header-right div.fc-button-month','#calendarOffice').removeClass('ui-corner-right').addClass('ui-no-right');

Sep 30, 2010
#14 daan.kor...@gmail.com
I've expanded on noosalife's idea by adding the code below. Pretty simple and could probably be done more efficient but it works and should get you started with a list view or use it for another kind of view.


JQuery:
$('.fc-header-right tr').append('<td><div class="fc-button-agendaList ui-state-default ui-corner-right"><a><span>list</span></a></div></td>');
$('.fc-header-right .fc-button-agendaDay').removeClass('ui-corner-right').addClass('ui-no-right');
$('.fc-button-agendaDay').click(function() {
	$('.fc-view-agendaList').remove();
	$('.fc-button-agendaList').removeClass('ui-state-active');
	$('.fc-view-agendaDay').css({'display': 'block'});
	$('.fc-button-agendaDay').addClass('ui-state-active');
});
$('.fc-button-agendaWeek').click(function() {
	$('.fc-view-agendaList').remove();
	$('.fc-button-agendaList').removeClass('ui-state-active');
	$('.fc-view-agendaWeek').css({'display': 'block'});
	$('.fc-button-agendaWeek').addClass('ui-state-active');
});
$('.fc-button-month').click(function() {
	$('.fc-view-agendaList').remove();
	$('.fc-button-agendaList').removeClass('ui-state-active');
	$('.fc-view-month').css({'display': 'block'});
	$('.fc-button-month').addClass('ui-state-active');
});
$('.fc-button-agendaList').click(function() {
	$('.fc-view-month').css({'display': 'none'});
	$('.fc-button-month').removeClass('ui-state-active');
	$('.fc-view-agendaWeek').css({'display': 'none'});
	$('.fc-button-agendaWeek').removeClass('ui-state-active');
	$('.fc-view-agendaDay').css({'display': 'none'});
	$('.fc-button-agendaDay').removeClass('ui-state-active');
	$('.fc-header-right div.fc-button-agendaList','#calendar').addClass('ui-state-active');
	$('.fc-header-title').html('Upcoming events');
	if(!$(".fc-view-agendaList")[0]){
		$('.fc-content').append('<div class="fc-view-agendaList">test</div>');
	}
});

Change "list" and "Upcoming events" to whatever you want.
The last JQuery line add a new div $('.fc-content').append('<div class="fc-view-agendaList">test</div>');
You can do whatever you want with that div... like show a list view ;)


CSS:
.fc-header .fc-button-agendaList:hover{
	background: #DADADA url(js/jquery-ui-1.8.5.custom/css/smoothness/images/ui-bg_glass_75_dadada_1x400.png) repeat-x 50% 50%;
	border: 1px solid #999;
	color: #212121;
	font-weight: normal;
}

.fc-header .fc-button-agendaList.ui-state-active{
	background: #fff;
	border: 1px solid #999;
	color: #212121;
	font-weight: normal;
}

The CSS is based on the smoothness theme.

Hope this helps!
Oct 3, 2011
#15 no1youkn...@gmail.com
In order for this to be easily adapted for Fullcalendar, I think it should be like this:

1) The Agenda List view navigates the same as the monthly view.
2) Use the existing events object that is currently cached by fullcalendar.
3) Render the Agenda List items iterating over this cached events object.  However, some manipulation of the object maybe needed.

This is what I have done (see images).  I'm only pulling in the events when needed (init, navigation, creation, edit) and the agenda list is then created from the cached events object.

My agenda list looks exactly like googles own... heh ;)
cal1.png
27.3 KB   View   Download
cal2.png
40.1 KB   View   Download
Oct 3, 2011
#16 no1youkn...@gmail.com
Oh I should say as well.  The agenda List creation is by Javascript only.  No backend process is used to create the view.
Oct 17, 2011
#17 mikeb...@gmail.com
I need to build a hybrid of the week and day agenda. Instead of having days of the week it will have an individual.  Basically multiple instances of the day agenda for columns of the week agenda.

Does anyone have an example with code of how to create a custom view without touching fullcalendar.js?
Does this task seem overly difficult?
proposedcalendar.png
32.7 KB   View   Download
Oct 27, 2011
#18 ties...@gmail.com
@no1youknows, would you be willing to share how you created that agenda view? That's pretty spiffy looking, and exactly meets a need I have at the moment.

Thanks.
Nov 3, 2011
#19 no1youkn...@gmail.com
@tiesont I am happy to share my code with adam, so long as he improves it and includes the agenda view as standard!

Adam, just drop me a line! :)
Nov 11, 2011
#20 gettinro...@gmail.com
Hi @no1youknows. I am looking for the same thing too. I would love it if you could share it with me too. I'd even be willing to compensate you for it. Drop me a line if you're interested. It doesn't seem like we'll be able to get Adams attention anytime soon.
Sep 17, 2012
#21 jamesin....@gmail.com
Do we have any news on the availability of an agenda view?
Sep 18, 2012
#22 paul.wol...@gmail.com
no1youknows, would you share your code with everybody else here then, Adam is not doing anything with this project for a long time...
I made an agendaview, but yours is much better, because it' s  really integrated in fullcalendar, like you said. my solution is php driven.   paulthedutchman.nl/calendar_standalone
It would be great if you would share it.    Paul
Oct 25, 2012
#23 wanghu...@gmail.com
no1youknows, you job is excellent. Can you please share it with the rest of us?
Dec 18, 2012
#24 mudasser...@gmail.com
Hi all, 

I am looking for the same solution that @mikeb pointed in comment # 17...

please share some code or advice helping link's 

thank you in advance

Jun 9, 2013
#25 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/

Oct 24, 2013
#26 lope.edm...@gmail.com
no1youknows, can you please share the agenda view code, this would help a lot on my project, thanks.