List View (similar to Google Calendar's "Agenda" view)

[arshaw]

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]

Yeah, just a long list of the events!

Reported by traviscooper on 2010-01-13 23:01:05

[arshaw]

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]

Yeah, this would be a great feature for FullCalendar imo

Reported by jacob87 on 2010-02-14 16:55:40

[arshaw]

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]

useful feature.

Reported by pino.desalvo on 2010-07-30 13:45:39

[arshaw]

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]

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]

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]

Would really be a usefull feature!

Reported by chrisvangysel on 2010-09-21 00:10:43

[arshaw]

Reported by adamrshaw on 2010-10-07 21:06:19

• Status changed: MaybePlugin

[arshaw]

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]

+1 for upcoming events or list view

Reported by ivan.santiesteban on 2010-10-27 23:36:33

[arshaw]

+1 As well... this would be a huge win!

Reported by sherifgmansour on 2010-11-06 06:56:57

[arshaw]

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]

That would be a great feature for me as well! +1

Reported by paolo%gnuband.org@gtempaccount.com on 2010-11-18 07:25:24

[arshaw]

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]

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]

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]

Issue 1146 has been merged into this issue.

Reported by althaus.it on 2011-04-01 09:52:59

[arshaw]

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]

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]

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]

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]

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]

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]

Version 1.5 has shipped.  Is there a plugin architecture to build custom views atop?

Reported by kshaw%qualys.com@gtempaccount.com on 2011-08-11 01:46:17

[arshaw]

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 admin@westhouseit.co.uk on 2011-09-03 18:31:25

[arshaw]

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]

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]

I would throw in AT LEAST $10 on it.

Reported by Deac.Karns on 2011-11-30 21:08:31

[arshaw]

I've spend already 100$...

Reported by allon.moritz on 2011-12-01 07:06:21

[arshaw]

Yes, please. Make a list function.... Please...

Reported by st.fischer on 2012-01-04 11:00:05

[arshaw]

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]

forgot the screenshot

Reported by paul.wolbers on 2012-01-11 17:50:45

---

• _Attachment: screenshot_simple_listview.JPG_

[arshaw]

I will also donate if this is done.

Reported by ellis.rahhal on 2012-03-06 07:24:58

[arshaw]

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]

Looks great...would be nice to have it integrated into fullcalendar itself.

Reported by allon.moritz on 2012-03-07 20:28:59

[arshaw]

+1 to this... Right now it's a drawback in my current project.

Reported by smallpawn on 2012-04-05 07:26:54

[arshaw]

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]

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]

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]

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]

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]

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]

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]

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]

demo
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]

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]

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]

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