Fullcalendar: List View (similar to Google Calendar's "Agenda" view)
Originally reported on Google Code with ID 289
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?
Reported by eternitey on 2010-01-13 15:29:14
- _Attachment: agendaYear.jpg_
Imported with 144 stars
arshaw
👍19
All 183 comments
Yeah, just a long list of the events!
Reported by traviscooper on 2010-01-13 23:01:05
arshaw
on 19 Aug 2015
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
Reported by adamrshaw on 2010-01-20 02:16:43
- Labels added: Type-Enhancement
- Labels removed: Type-Defect
arshaw
on 19 Aug 2015
Yeah, this would be a great feature for FullCalendar imo
Reported by jacob87 on 2010-02-14 16:55:40
arshaw
on 19 Aug 2015
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
Reported by gcm.pgc on 2010-03-17 17:04:12
arshaw
on 19 Aug 2015
useful feature.
Reported by pino.desalvo on 2010-07-30 13:45:39
arshaw
on 19 Aug 2015
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...
Reported by pichardd on 2010-08-19 18:05:14
arshaw
on 19 Aug 2015
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.
Reported by rowden.dan on 2010-08-24 12:31:06
arshaw
on 19 Aug 2015
Yeah,Would love to have this feature.It makes great sense displaying all the events
in a list.(sorted by latest)
Reported by Sudarshan.rao7 on 2010-08-24 14:57:58
arshaw
on 19 Aug 2015
Would really be a usefull feature!
Reported by chrisvangysel on 2010-09-21 00:10:43
arshaw
on 19 Aug 2015
Reported by adamrshaw on 2010-10-07 21:06:19
- Status changed:
MaybePlugin
arshaw
on 19 Aug 2015
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.
Reported by 96txag on 2010-10-13 17:39:46
arshaw
on 19 Aug 2015
+1 for upcoming events or list view
Reported by ivan.santiesteban on 2010-10-27 23:36:33
arshaw
on 19 Aug 2015
+1 As well... this would be a huge win!
Reported by sherifgmansour on 2010-11-06 06:56:57
arshaw
on 19 Aug 2015
Is this planned for a release any time soon? I need this feature too!
Reported by JenniferBoltmanWilliams on 2010-11-18 03:56:30
arshaw
on 19 Aug 2015
That would be a great feature for me as well! +1
Reported by paolo%[email protected] on 2010-11-18 07:25:24
arshaw
on 19 Aug 2015
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.
Reported by gregorymsnyder on 2010-11-21 14:07:05
arshaw
on 19 Aug 2015
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.
Reported by brcarls on 2011-02-02 22:04:16
arshaw
on 19 Aug 2015
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).
Reported by daspost on 2011-02-09 18:59:13
arshaw
on 19 Aug 2015
Issue 1146 has been merged into this issue.
Reported by althaus.it on 2011-04-01 09:52:59
arshaw
on 19 Aug 2015
Very much indeed needed :) And starred.
Thanks- searched but did not find this issue. Sorry for duplicating.
Reported by p.studioz on 2011-04-01 10:24:31
arshaw
on 19 Aug 2015
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
Reported by p.studioz on 2011-04-06 11:02:59
- _Attachment: many.jpg_
- _Attachment: sketch.jpg_
arshaw
on 19 Aug 2015
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.
Reported by morris.ron on 2011-05-13 10:04:53
arshaw
on 19 Aug 2015
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..
Reported by p.studioz on 2011-05-13 10:11:34
arshaw
on 19 Aug 2015
fullcalendar ist NOT a Google project... ;-)
http://code.google.com/p/fullcalendar/people/list
Reported by althaus.it on 2011-05-13 10:17:55
arshaw
on 19 Aug 2015
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).
++
Reported by chris.pourchot on 2011-06-27 01:24:09
arshaw
on 19 Aug 2015
Version 1.5 has shipped. Is there a plugin architecture to build custom views atop?
Reported by kshaw%[email protected] on 2011-08-11 01:46:17
arshaw
on 19 Aug 2015
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?
Reported by [email protected] on 2011-09-03 18:31:25
arshaw
on 19 Aug 2015
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
Reported by sephirothnova on 2011-11-15 21:36:59
arshaw
on 19 Aug 2015
I would like to see a listview / timeline implemented also.
Maybe something resembling
http://www.dhtmlx.com/docs/products/dhtmlxScheduler/sample_timeline.shtml
Reported by cecilphillip on 2011-11-19 21:02:30
arshaw
on 19 Aug 2015
I would throw in AT LEAST $10 on it.
Reported by Deac.Karns on 2011-11-30 21:08:31
arshaw
on 19 Aug 2015
I've spend already 100$...
Reported by allon.moritz on 2011-12-01 07:06:21
arshaw
on 19 Aug 2015
Yes, please. Make a list function.... Please...
Reported by st.fischer on 2012-01-04 11:00:05
arshaw
on 19 Aug 2015
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;
}
Reported by paul.wolbers on 2012-01-11 17:49:45
arshaw
on 19 Aug 2015
forgot the screenshot
Reported by paul.wolbers on 2012-01-11 17:50:45
- _Attachment: screenshot_simple_listview.JPG_
arshaw
on 19 Aug 2015
I will also donate if this is done.
Reported by ellis.rahhal on 2012-03-06 07:24:58
arshaw
on 19 Aug 2015
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>
Reported by paul.wolbers on 2012-03-07 20:19:48
arshaw
on 19 Aug 2015
Looks great...would be nice to have it integrated into fullcalendar itself.
Reported by allon.moritz on 2012-03-07 20:28:59
arshaw
on 19 Aug 2015
+1 to this... Right now it's a drawback in my current project.
Reported by smallpawn on 2012-04-05 07:26:54
arshaw
on 19 Aug 2015
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..
Reported by paul.wolbers on 2012-05-05 09:55:58
arshaw
on 19 Aug 2015
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
....
Reported by paul.wolbers on 2012-05-05 11:44:41
arshaw
on 19 Aug 2015
It looks really promising!! But since this project is pretty much dead I guess your
code wouldn't make it into the official release....
Reported by allon.moritz on 2012-05-08 07:58:12
arshaw
on 19 Aug 2015
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
Reported by bshogue85 on 2013-02-07 21:33:32
arshaw
on 19 Aug 2015
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 ..
Reported by paul.wolbers on 2013-02-08 16:28:14
arshaw
on 19 Aug 2015
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.
Reported by n8cshaw on 2013-03-04 16:50:19
arshaw
on 19 Aug 2015
I took a stab at creating a list view for my usage.
Demo: http://static.nwesd.org/fullcalendar-listview/current/demos/list-views.html
My Git Repo: http://static.nwesd.org/fullcalendar-listview/listview.git/
Chris
Reported by francyci on 2013-03-04 18:29:32
arshaw
on 19 Aug 2015
not bad, i have an idea:
you could hide days, which have no events.
Reported by floriandegenhardt85 on 2013-03-05 06:51:29
arshaw
on 19 Aug 2015
https://c9.io/hasanozgan/fullcalendar/workspace/fullcalendar/demos/agenda-list.html
my code repo
https://github.com/hasanozgan/fullcalendar/
pull request
https://github.com/arshaw/fullcalendar/pull/60
Reported by hasanozgan on 2013-03-05 07:19:05
arshaw
on 19 Aug 2015
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..
Reported by paul.wolbers on 2013-03-07 17:45:32
arshaw
on 19 Aug 2015
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
Reported by hasanozgan on 2013-03-07 18:09:23
arshaw
on 19 Aug 2015
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/
Reported by paul.wolbers on 2013-03-07 18:50:58
arshaw
on 19 Aug 2015
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.
Reported by paul.wolbers on 2013-03-17 18:30:28
arshaw
on 19 Aug 2015
Yes please!
List view, with configurable time window, e.g. "this calendar year" or "next 30 days".
Reported by anders.rohlen on 2013-04-26 17:32:08
arshaw
on 19 Aug 2015
@hasanoz
I really like your agenda list.
Is there a way to limit the change the list size? (ie. 10 or even 50 events)
Reported by garza.jonathan on 2013-05-02 15:35:11
arshaw
on 19 Aug 2015
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?
Reported by garza.jonathan on 2013-05-02 16:55:36
arshaw
on 19 Aug 2015
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,
Reported by vipin.narayane on 2013-05-07 09:52:16
arshaw
on 19 Aug 2015
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.
Reported by vipin.narayane on 2013-05-07 12:30:04
arshaw
on 19 Aug 2015
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.
Reported by [email protected] on 2013-05-09 12:25:41
arshaw
on 19 Aug 2015
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/
Reported by amitesh.m on 2013-06-09 21:21:58
arshaw
on 19 Aug 2015
amites, thanks for sharing your code, looks great!
Reported by paul.wolbers on 2013-06-12 18:03:22
arshaw
on 19 Aug 2015
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 :-)
Reported by allon.moritz on 2013-06-12 18:36:41
arshaw
on 19 Aug 2015
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;'>"
+ dt + "</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);
}
Reported by paul.wolbers on 2013-06-13 20:40:04
arshaw
on 19 Aug 2015
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();
}
}
;
Reported by patrick.maniraho on 2013-07-19 19:56:16
arshaw
on 19 Aug 2015
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.
Reported by paul.wolbers on 2013-07-20 08:14:43
arshaw
on 19 Aug 2015
Thanks Paul ! My mistake, I forgot to remove them.. hope everyone will catch that.
Reported by patrick.maniraho on 2013-07-22 15:35:46
arshaw
on 19 Aug 2015
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');
}
Reported by elecoest on 2013-07-27 14:50:57
arshaw
on 19 Aug 2015
Thanks Lecoester ! Looks good.
Reported by patrick.maniraho on 2013-07-29 22:49:58
arshaw
on 19 Aug 2015
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
Reported by patrick.maniraho on 2013-07-30 20:05:35
arshaw
on 19 Aug 2015
Reported by adamrshaw on 2013-08-14 01:43:29
- Status changed:
Accepted - Labels added: Type-Feature, Status-Discussing
- Labels removed: Type-Enhancement
arshaw
on 19 Aug 2015
Reported by adamrshaw on 2013-08-14 01:44:01
- Labels removed: Status-Discussing
arshaw
on 19 Aug 2015
Reported by adamrshaw on 2013-08-14 01:44:19
- Status changed:
Discussing
arshaw
on 19 Aug 2015
Reported by adamrshaw on 2013-08-14 01:45:53
- Status changed:
Accepted
arshaw
on 19 Aug 2015
Issue 1214 has been merged into this issue.
Reported by adamrshaw on 2013-08-15 04:26:27
arshaw
on 19 Aug 2015
Issue 1572 has been merged into this issue.
Reported by adamrshaw on 2013-08-15 17:20:29
arshaw
on 19 Aug 2015
Issue 1266 has been merged into this issue.
Reported by adamrshaw on 2013-08-15 22:17:52
arshaw
on 19 Aug 2015
Issue 1374 has been merged into this issue.
Reported by adamrshaw on 2013-08-16 04:56:04
arshaw
on 19 Aug 2015
Issue 1374 has been merged into this issue.
Reported by adamrshaw on 2013-08-16 04:56:05
arshaw
on 19 Aug 2015
Issue 1471 has been merged into this issue.
Reported by adamrshaw on 2013-08-18 19:46:07
arshaw
on 19 Aug 2015
Hurray for "Accepted"! Thank you Adam!!
Reported by yat.cumc on 2013-08-20 20:56:23
arshaw
on 19 Aug 2015
Issue 1705 has been merged into this issue.
Reported by adamrshaw on 2013-08-22 07:06:44
arshaw
on 19 Aug 2015
Issue 1735 has been merged into this issue.
Reported by adamrshaw on 2013-08-24 02:56:53
arshaw
on 19 Aug 2015
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
Reported by [email protected] on 2013-08-29 15:06:46
arshaw
on 19 Aug 2015
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();
}
}
;
Reported by elecoest on 2013-08-31 17:30:51
arshaw
on 19 Aug 2015
Do you have a demo available?
Sent from my android.
Reported by allon.moritz on 2013-08-31 17:39:01
arshaw
on 19 Aug 2015
http://st-andre.sgdf-lille-flandres.fr/index.php?option=com_allevents&task=display&view=fullcalendar
Reported by elecoest on 2013-08-31 17:54:57
arshaw
on 19 Aug 2015
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?
Reported by m37651 on 2013-09-05 05:28:18
arshaw
on 19 Aug 2015
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.
Reported by Jaybizle on 2013-09-17 08:58:20
arshaw
on 19 Aug 2015
@ m37651: try sorting your google feed by adding "?orderby=starttime&sortorder=ascending"
to the url.
Reported by tobias.ludwig.84 on 2013-11-04 22:02:00
arshaw
on 19 Aug 2015
@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');
}
}
;;
Reported by patrick.maniraho on 2013-11-07 21:18:17
- _Attachment: agendalist.css_
arshaw
on 19 Aug 2015
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
}
}
;;
Reported by gaspard80 on 2013-12-05 09:36:02
arshaw
on 19 Aug 2015
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;
}
Reported by paul.wolbers on 2013-12-08 13:16:22
arshaw
on 19 Aug 2015
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> "+
Reported by paul.wolbers on 2013-12-08 13:19:54
arshaw
on 19 Aug 2015
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?
Reported by Crazy4SB on 2014-02-07 02:50:02
arshaw
on 19 Aug 2015
@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.
Reported by schrader.bill on 2014-02-10 16:16:08
- _Attachment: fullcalendar.customized.js_
arshaw
on 19 Aug 2015
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.
Reported by bernardsmj on 2014-02-14 18:53:16
arshaw
on 19 Aug 2015
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.
Reported by m37651 on 2014-02-21 23:32:54
arshaw
on 19 Aug 2015
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
Reported by m37651 on 2014-02-23 04:49:48
arshaw
on 19 Aug 2015
@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 ?
Reported by patrick.maniraho on 2014-02-25 23:23:14
arshaw
on 19 Aug 2015
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.
Reported by m37651 on 2014-02-26 00:05:07
arshaw
on 19 Aug 2015
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..
Reported by hrdaeva7 on 2014-04-28 16:59:27
arshaw
on 19 Aug 2015
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)
Reported by paul.wolbers on 2014-04-28 17:38:19
- _Attachment: colors in listview.JPG_
arshaw
on 19 Aug 2015
pcolor = displayeventlist[i].color;
"<"+ (lurl ? "a href='"+ lurl +"'" : "div") + " class='fc-agendaList-event fc-eventlist
"+classes+"' style='border-left:4px solid "+pcolor+"'>"+
Reported by paul.wolbers on 2014-04-28 17:39:39
arshaw
on 19 Aug 2015
@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.
Reported by adamrshaw on 2014-06-06 15:14:56
arshaw
on 19 Aug 2015
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.
Reported by s4Logic on 2014-06-14 00:02:36
arshaw
on 19 Aug 2015
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
Reported by s4Logic on 2014-06-21 01:26:52
arshaw
on 19 Aug 2015
I would be interested. I have been waiting for Patrick to make some updates to fix
the all date feature in his listing.
Reported by m37651 on 2014-06-26 06:12:19
arshaw
on 19 Aug 2015
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.
Reported by [email protected] on 2014-06-30 21:04:45
arshaw
on 19 Aug 2015
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.
Reported by crunchierthanyouthink on 2014-07-14 17:50:18
arshaw
on 19 Aug 2015
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
Reported by patrick.maniraho on 2014-07-14 22:33:53
- _Attachment: agendalist.css_
- _Attachment: fullcalendarlist.js_
arshaw
on 19 Aug 2015
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
Reported by ipeto77 on 2014-07-26 10:07:30
arshaw
on 19 Aug 2015
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
Reported by paul.wolbers on 2014-07-29 12:21:01
arshaw
on 19 Aug 2015
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
Reported by paul.wolbers on 2014-07-29 13:26:43
arshaw
on 19 Aug 2015
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
Reported by maciej.pienczewski on 2014-08-12 08:08:05
arshaw
on 19 Aug 2015
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
Reported by f.albonico on 2014-08-27 06:22:32
arshaw
on 19 Aug 2015
@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.
Reported by adamrshaw on 2014-08-27 09:48:15
arshaw
on 19 Aug 2015
FYI I ended up abandoning my work on this and decided to work with a bootstrap-compatible
calendar that better fit my needs
Reported by s4Logic on 2014-08-27 10:29:37
arshaw
on 19 Aug 2015
tO [email protected]
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
Reported by hujianju on 2014-08-31 18:09:12
arshaw
on 19 Aug 2015
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
Reported by patrick.maniraho on 2014-09-02 13:36:09
arshaw
on 19 Aug 2015
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?
Reported by samedii on 2014-09-16 21:15:07
arshaw
on 19 Aug 2015
Here is my fork with an added list view inspired by the old roundcube fork
https://github.com/samedii/fullcalendar
Reported by samedii on 2014-09-19 13:45:25
arshaw
on 19 Aug 2015
@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?
Reported by [email protected] on 2014-09-19 18:16:45
arshaw
on 19 Aug 2015
@rbend,
Dist files are pushed now
Reported by samedii on 2014-09-22 09:12:07
arshaw
on 19 Aug 2015
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.
Reported by flyboytyler on 2014-09-22 18:56:15
arshaw
on 19 Aug 2015
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
Reported by samedii on 2014-09-22 21:18:33
- _Attachment: Screen Shot 2014-09-22 at 23.15.36.png
_
arshaw
on 19 Aug 2015
any chance we can get a vertical month view as well?
Reported by RebelLabs on 2014-10-20 17:49:19
arshaw
on 19 Aug 2015
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
Reported by patrick.maniraho on 2014-10-23 16:46:25
- _Attachment: agendalist.css_
- _Attachment: fullcalendarlist.js_
arshaw
on 19 Aug 2015
hi,
can you give me the pagination in the agenda list view?
Reported by [email protected] on 2014-11-11 05:50:07
arshaw
on 19 Aug 2015
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.
Reported by dergan on 2014-11-13 20:42:51
arshaw
on 19 Aug 2015
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.
Reported by dergan on 2014-11-13 20:47:18
arshaw
on 19 Aug 2015
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.
Reported by dergan on 2014-11-14 06:51:51
arshaw
on 19 Aug 2015
This modification is great, is there anyway to make it do just a week at a time?
Many thanks
Reported by flyboytyler on 2014-11-25 15:43:58
arshaw
on 19 Aug 2015
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?
Reported by [email protected] on 2014-12-02 19:36:16
arshaw
on 19 Aug 2015
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.
Reported by pgallanis on 2014-12-03 00:41:00
arshaw
on 19 Aug 2015
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.
Reported by pgallanis on 2014-12-05 17:21:44
arshaw
on 19 Aug 2015
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
Reported by mmarcucio on 2014-12-17 16:23:53
arshaw
on 19 Aug 2015
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
Reported by pgallanis on 2014-12-18 02:14:28
arshaw
on 19 Aug 2015
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.
Reported by mmarcucio on 2014-12-18 17:34:34
- _Attachment: Screen Shot 2014-12-18 at 12.27.46 PM.png
_
arshaw
on 19 Aug 2015
Any update on a two week view? should we have a separate issue to track votes/people
wanting that exact enhancement?
Reported by warath on 2014-12-23 14:18:20
arshaw
on 19 Aug 2015
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
Reported by mmarcucio on 2014-12-30 17:23:33
- _Attachment: Screen Shot 2014-12-30 at 12.23.04 PM.png
_
arshaw
on 19 Aug 2015
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
Reported by mmarcucio on 2014-12-30 18:14:09
- _Attachment: Screen Shot 2014-12-30 at 1.11.14 PM.png
_
arshaw
on 19 Aug 2015
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.
Reported by pmgberm on 2015-01-28 11:25:09
arshaw
on 19 Aug 2015
Hey! There is a way to do this now. The view is called "agendaDay". You can see an example
on the site.
Reported by abella793 on 2015-02-04 21:43:04
arshaw
on 19 Aug 2015
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.
Reported by frankcaumes on 2015-02-21 15:33:46
arshaw
on 19 Aug 2015
Hello, any update about the implementation of this feature ?
Reported by jorismansart on 2015-03-31 13:08:34
arshaw
on 19 Aug 2015
@frankcau, i need the same feature what you expecting in full calendar.. if you find
some thing please post in this thread..
Reported by [email protected] on 2015-04-01 10:33:21
arshaw
on 19 Aug 2015
@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.
Reported by steven.zeck on 2015-04-23 16:02:03
arshaw
on 19 Aug 2015
You should use the plugin method now. Here's an example of how I did it
Reported by samedii on 2015-04-28 09:09:05
- _Attachment: listView.js_
arshaw
on 19 Aug 2015
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
Reported by gaspard80 on 2015-04-29 13:06:12
arshaw
on 19 Aug 2015
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"
Reported by michaelwk on 2015-05-07 08:31:17
arshaw
on 19 Aug 2015
Issue 2500 has been merged into this issue.
Reported by adamrshaw on 2015-05-27 06:19:04
arshaw
on 19 Aug 2015
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
Reported by gaspard80 on 2015-06-16 08:20:17
- _Attachment: listview.js_
arshaw
on 19 Aug 2015
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
Reported by mahbub.e.khuda on 2015-06-16 11:20:06
arshaw
on 19 Aug 2015
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?
Reported by wpalchemy on 2015-06-17 23:16:25
arshaw
on 19 Aug 2015
@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.
Reported by [email protected] on 2015-06-25 14:56:57
arshaw
on 19 Aug 2015
@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.
Reported by [email protected] on 2015-06-25 21:28:27
arshaw
on 19 Aug 2015
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!
Reported by wpalchemy on 2015-06-26 04:26:25
arshaw
on 19 Aug 2015
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
Reported by gaspard80 on 2015-06-29 09:54:17
arshaw
on 19 Aug 2015
@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.
Reported by [email protected] on 2015-06-29 18:33:42
arshaw
on 19 Aug 2015
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
Reported by [email protected] on 2015-06-29 18:46:54
arshaw
on 19 Aug 2015
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);
},
Reported by gaspard80 on 2015-06-30 13:32:22
- _Attachment: listview.js_
arshaw
on 19 Aug 2015
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
})();
Reported by [email protected] on 2015-08-09 06:09:17
arshaw
on 19 Aug 2015
A screen shot to go along with my post above.
Reported by [email protected] on 2015-08-09 06:21:46
- _Attachment: image.jpg_
arshaw
on 19 Aug 2015
@arshaw Will there ever be an official "List View" in fullcalendar?
yabdab
on 27 Aug 2015
SirDre
on 17 Oct 2015
That looks fantastic, @SirDre!
jeremy-dentel
on 17 Oct 2015
+1 on this feature. Feel free to add it to the scheduler plugin, I'm happy to pay for it.
montulli
on 15 Dec 2015
+1
JonathanSchndr
on 28 Jan 2016
This is now the sixth year since this this high-demand feature was requested. Is there any sort of timeline or plans at all to implement it?
mikabre
on 11 Feb 2016
👍7
@mikabre well for those six years Fullcalendar has been open source but no one has made a pull request. Feel free to do so. Since there have not been a pull request perhaps it is not as in high demand as you assume.
espen
on 12 Feb 2016
+1
kieranklaassen
on 25 Mar 2016
@kieranklaassen Github now supports thumbs up (like a +1). Click "add reaction" on the right side of a comment.
espen
on 26 Mar 2016
👍3
please? we need this "list view" so much 🐙
renatopizarro
on 21 Apr 2016
👍5
❤3
This is one of the top feature requests, so pardon for asking again, but do you have plans to implement it in the closer future as mentioned in your blog post http://fullcalendar.io/blog/2016/01/the-past-year-and-roadmap-for-q1?
laoneo
on 8 Aug 2016
Hi @laoneo, to get List View up to the same standards as the other views (touch-friendly, printer-friendly, RTL, themeable, robust API), it's a non-trivial amount of work. Very important deliver on it though, given the high demand.
I'll likely make this a premium add-on in the same vein as scheduler. The incentive to continue to support this new view amidst the hundreds of other feature requests is just not there for me otherwise. I've run this idea past others and they seem receptive.
These two features are low-hanging fruit that I'll likely tackle first: #424 #429
Combined they are about 1/3rd the demand of List View, but probably 1/20th the effort.
I'll likely do one more minor release for scheduler (to cater to paying customers) and then begin work on List view. Given that, and given other things happening in my life, and estimating the effort to implement List view, that's likely a late October launch date. Hope that gives some clarity.
FYI, ranking of issue demand: http://fullcalendar.io/issues/
arshaw
on 10 Aug 2016
Scratch that! I've implemented this as part of the v3 pre-release:
- View Demo
- v3.0.0-beta release notes (contains minimal docs)
- download zip
- available on NPM and Bower
I reduced scope to make it was feasible in the near-term. It shows events in a simple list format and groups them by day. It is simple enough where it will be part of the free offering (not scheduler).
I have plans to make a more power-user rendition of this, optimized for larger quantities of events, with more customizable columns and rendering, and enhanced effects, such as endless scroll. This will eventually be part of the premium scheduler plugin.
Even though this implementation is somewhat minimal, hopefully it satisfies the majority of people. Can you please give me feedback on this new view?
arshaw
on 15 Aug 2016
👍13
🎉7
❤5
A couple of comment/suggestions...
If I look at the demo page on a mobile the list view doesn't go to the with of the view instead it stays at ~900px and then scales. Ideally I want to use this for mobile view and it needs to work well on that :)
My other suggestion is that when showing a week list view if the day has no entries you don't show the day. While this may seem fair enough at first glance our testing with customers (albeit limited) has shown that this confuses them. It also mean that if you want to click to add an event they is no way to select the day you want to add the event to.
thanks for the hard work I look forward to see the completed version of this.
starfishmod
on 15 Aug 2016
Nevermind ... found my own answer. Sorry!
scottiemac24
on 15 Aug 2016
@starfishmod The 900px width is simply what the container is set to via CSS. In your own implementation, you could simply do width: 100%. Regarding your other comment, I suppose it could be an option to show/hide empty days, although I could see it being annoying if there's a long period of time without any appointments - it would require a lot of scrolling.
caseyjhol
on 15 Aug 2016
@caseyjhol if you were scrolling I agree that this is an issues however when you are flicking week to week via buttons it is nice to see the week structure - just like in week view :) and yes was thinking this should be an option.
I'll have to download the demo and fiddle with it to check it out the width - although it would be good if the demo does this so people can be confident it scales appropriately.
starfishmod
on 16 Aug 2016
@starfishmod I'll try to adjust the viewport setting in the demos so they show better on mobile. Will do that in an upcoming release. Also, I see your point about a setting for force rendering for each individual day, regardless of events.
arshaw
on 16 Aug 2016
@arshaw very good, just started to tinker.
Feedback:
Be really cool if the event object could include an option to set icon (ie font awesome, 'fa fa-trash') this would take precedent over the default bullet.
Also, how do you set the correct height, ive tried the aspectRatio, height and contentHeight every combo I try I either end up two scroll bars(vertical) or if I set a height:9999 I end up with lots of empty space, just want an option to set dynamic with only one scroll bar, perhaps I'm missing something?
davidwoods
on 22 Aug 2016
Great! Happy to pay for a premium version with endless scroll.
espen
on 25 Aug 2016
List view has been officially released in v3!
https://fullcalendar.io/blog/2016/09/feature-packed-releases/
The main difference from v3-beta was switching the positions of the time text and event color dot. Looks better in most circumstances.
@starfishmod, I've decided to punt on the idea of showing days _without_ events on them. If there's more demand, I'll implement it.
@davidwoods, in the same vein as normal events with icons, I'm encouraging people to use eventRender to achieve that for now. works with the list views.
Please open up bugs or additional feature requests as separate tickets. Thanks!
arshaw
on 5 Sep 2016
Thanks so much, time to remove now my self backed list!!
laoneo
on 5 Sep 2016
Was this page helpful?
0 / 5 - 0 ratings
Related issues
nkostadinov
·
31Comments
arshaw
·
51Comments
arshaw
·
29Comments
StarpTech
·
41Comments
blag001
·
33Comments
Most helpful comment
Scratch that! I've implemented this as part of the v3 pre-release:
I reduced scope to make it was feasible in the near-term. It shows events in a simple list format and groups them by day. It is simple enough where it will be part of the free offering (not scheduler).
I have plans to make a more power-user rendition of this, optimized for larger quantities of events, with more customizable columns and rendering, and enhanced effects, such as endless scroll. This will eventually be part of the premium scheduler plugin.
Even though this implementation is somewhat minimal, hopefully it satisfies the majority of people. Can you please give me feedback on this new view?