Fullcalendar: Year View with 12 Mini-Calendars

[arshaw]

Originally reported on Google Code with ID 871

The attach file is a year view sample.
I made it by fullcalendar version.

Reported by kebin.liu on 2011-03-28 09:10:48

---

• _Attachment: fullCalendar15.rar_

Imported with 51 stars.

[arshaw]

tried this out, this is really cool! i can't say it will be part of an official release
any time soon, but i will definitely hold on to this, and think about what to do next.
thanks for your work!

Reported by adamrshaw on 2011-04-02 19:26:46

• Status changed: MaybePlugin

[arshaw]

Issue 1092 has been merged into this issue.

Reported by adamrshaw on 2011-04-03 23:34:34

[arshaw]

Issue 924 has been merged into this issue.

Reported by adamrshaw on 2011-04-03 23:35:03

[arshaw]

Excellent. This is really good. Had to comment and say thanks!

Reported by p.studioz on 2011-04-15 11:47:03

[arshaw]

This would be a valuable addition to fullCalendar, please merge :)

It has issues of it's own: moving an event (from a different view) doesn't update the
year view; and it would be nice to be able to drill down by clicking month's name.

Keep up the great work!

Reported by corin.lawson on 2011-06-26 03:11:20

[arshaw]

I dig

Reported by jmm.seasons on 2011-06-27 00:17:24

[arshaw]

Another bug is allday events spanning for more than 1 day.

Reported by diogorr on 2011-07-19 11:17:53

[arshaw]

Hello, thanks for this great version. Anyway I found a bug in there. If you change a
year, then classes of each day remain same as in the previous year, so events are not
drawn on them. I'm attaching a patch which should solve it.

Reported by dalibor.horinek on 2011-08-09 15:34:14

---

• _Attachment: fullcalendar.patch_

[arshaw]

Great! Is there a way to make this work with a JSON eventSource so that you can set
the background/foreground of each event rather than it being hard coded to fc-year-have-event?
Also for it to show the start and end date if the event has multiple days to it, on
the year view?

Awesome contribution, I hope it makes it into the full release

Reported by tdluk09 on 2011-08-28 08:44:39

[arshaw]

This is Awesome. Really would like to see this added to the full version.
How can I make it so that events showing on the year view are clickable (either shows
the month view or day view).
Or at minimum the ability to drill down to the desired month view (as per comment #5
above)
Great Work all involved!

Reported by adam.logopogo on 2011-09-29 01:53:33

[arshaw]

Very Good work !

But i can't click on day and it's so impossible to edit the "year view".
I read the code, there is dragging and clicking callback...
i don't understand !

please someone to help me ?!

Reported by nicolas.perussel on 2011-10-04 07:43:00

[arshaw]

This is great!!
Using fullCalendar15.rar patch (fullcalendar.js file) in year view, multi-day events
display only first and lasat day as marked, and non of the days between first and last
day.show any events (you can also see this problem in demo file - just check multiday
events).

I believe by adding an extra classes "fc-first" and "fc-last" to <td> with events should
resolve this problem.
Question is how to add above classes to td (e.g. "<td class="fc-widget-content fc-day-2011-11-14
fc-year-have-event">")?

By looking at fullcalendar.js (for view calendar) I'm not sure what has to be changed
in in function "updateCells" and/or function "renderDaySegs" to add these classes to
td?

Thanks and Regards,
I

Reported by ivicakralj on 2011-12-08 04:54:03

[arshaw]

Am a Newbie and i just wanted to know how to implement the year view provided for download
on this issues. Specifically this download fullCalendar15.rar

Reported by loui.amon on 2012-01-09 10:34:36

[arshaw]

Supporting clicks in the YearView:

This is not perfect, nor tested exhaustively, but if you're hoping to get click events
working this may help.

1. In BasicYearView.buildSkeleton around line 2142, where the <td> for each day is
added, add an additional "fc-day" class (no suffix).

        s +="<td class='fc- " + contentClass + " fc-day fc-day" + dayStr + "'>" + // need
fc- for setDayID

2. Select these elements at the end of the function (dayBind was previously commented
out).

        var dayCells = table.find(".fc-day");
        dayBind(dayCells);

3. Update dayClick() to extract the date from the original fc-day-yyyy-mm-dd class.

    function dayClick(ev) {
        if (!opt('selectable')) { // if selectable, SelectionManager will worry about dayClick

            // Find the correct classname, and extract the date
            var pos = this.className.search(/\bfc\-day-(\d\d\d\d-\d\d-\d\d)\b/);
            var datestr = this.className.substr(pos + 7, 10); 

            // Convert to a date
            var year = parseInt(datestr.substr(0, 4));
            var month = parseInt(datestr.substr(5, 2)) - 1; // January=0
            var day = parseInt(datestr.substr(8, 2));
            var date = new Date(year, month, day);

            trigger('dayClick', this, date, true, ev);
        }
    }

Many thanks for this plugin,
P.

Reported by wilber.jenkins on 2012-02-03 11:03:48

[arshaw]

Hello, I have tested yearview, applied patch and modify code to support clicks but I
get this error:

"headCells is not defined"

headCells.each(function(i, _e) {   (line 2399)

Any help?
Thanks

Reported by [email protected] on 2012-02-07 09:57:44

[arshaw]

I tried to use above mentioned code to have click event in year view. But I am having
the same 'headcells' undefined error.
Click support in year view would be great!!

Reported by adi.shoukat on 2012-02-19 01:31:40

[arshaw]

When you change the event source and the events are re-fetched from new source. In year
view it shows Events from new source as well as events from older sources.
It just need to clear all the events before showing events from any source.
Any help/suggestion would be appreciated

Reported by adi.shoukat on 2012-02-21 00:49:13

[arshaw]

If you are getting the error:

"headCells is not defined"

with

"headCells.each(function(i, _e) {   (line 2399)"

you can do a simple patch by adding two lines to the problematic function to check
if headCells is undefined:

coordinateGrid = new CoordinateGrid(function(rows, cols) {
        var e, n, p;
                if(headCells === undefined)
                    return;
        headCells.each(function(i, _e) {

Reported by bizerk88 on 2012-03-17 02:22:12

[arshaw]

Hi, how and where to post my code that implemented FullCalendar?
I'm sorry for the english.

Reported by EduardoLuizWilhelm on 2012-04-09 13:44:55

[arshaw]

Great work - thank you!

Everything works fine.  But now I want a second event in another color. There are never
two events on one day.  Do you have any idea?

Reported by elernen on 2012-04-16 18:29:25

[arshaw]

hello !!
I want to know, if it is possible to implement this option for the plugin spip ???

Reported by laurent.gataleta on 2012-04-17 17:07:49

[arshaw]

Has anybody made an attempt at implementing multi-day events?  So defining an event
with "start" and "end" values on different days would result in an event that spanned
as many days as necessary between those two attributes.

Reported by dmcooper on 2012-04-26 01:57:59

[arshaw]

How to display event title in yearview?It shows only the event date in blue color..

Reported by remyabv on 2012-05-07 06:19:49

[arshaw]

Just to add a note to comment number 15: the parseInt method should be used with two
parameters, the second one specifying a radix (the numerical system to be used), e.g.:

var year = parseInt(datestr.substr(0, 4), 10);

Without the second parameter months after July return wrong date.

Reported by mateusz.jarus on 2012-06-10 15:46:54

[arshaw]

Great addition. To use the eventRender approach at http://stackoverflow.com/questions/3366654/update-an-event-by-dropping-an-external-event
for making an event droppable I seems to require a newer version of jquery-ui than
packaged in the original download here (fullcalendar15). The following works:

jquery-ui-1.8.12.custom.css

Reported by dave.milstone on 2012-07-08 08:18:38

[arshaw]

RE: comment 28 (mine) three files are required:

jquery-ui-1.8.12.custom.css

Reported by dave.milstone on 2012-07-08 08:19:47

[arshaw]

Re: comment 28: the two other files were not included previously (despite being sent):
jquery-1.5.2.min.js

Reported by dave.milstone on 2012-07-08 08:21:01

[arshaw]

RE: comment 28: the third file is below. I guess only one will be included per post
- sorry.
jquery-ui-1.8.12.custom.min.js

Reported by dave.milstone on 2012-07-08 08:22:17

[arshaw]

How would I merge the year view version with an existing implementation of the most
recent version of fullcalendar that has some of my own edits built in?

Should I load this year-view version as a separate lib, or is there a way I can merge
into a single source?

The attached .rar does not include the fullcalendar source, it is the output of the
build, so, it seems like I'd need to load it separately. Is that correct?

Reported by chris.farrell on 2012-08-20 17:04:20

[arshaw]

Hi,
I've tried to make the year view days clickable, but I can't.

I've used the rar then applied the patch and the code on comment 15 but the events
are still unclickable...what am I wrong ?!?

You can download js code I'm using from this url (the agenda-views.html is the original)
:

http://nero.joomlafree.it/docs/fullcalendar.zip

Please help me!!! Maybe some of yours can compare his own fullcalendar.js code with
mine and tell me the difference...

Thank you in advance!

Reported by [email protected] on 2012-10-05 20:44:14

[arshaw]

same thing happens to me
I have no error in the JS console but nothing happens do Clickk
Someone could achieve this, it?

Reported by egugli2011 on 2012-10-08 06:34:02

[arshaw]

up!

any chance to get help from anyone here ?!?

Is there anyone who could post his complete working version of the code please ???

Thank you again...

Reported by [email protected] on 2012-10-10 09:30:21

[arshaw]

This is great, but 'eventClick' event is not working .anyone can help me

Reported by channa2d on 2012-10-31 05:53:52

[arshaw]

Anyone got a fix to display the events on the year preview the same way as the month
view?
The current code is not showing the end date.

Reported by steffersonj on 2012-11-13 11:35:28

[arshaw]

Hi all, 
I've found out that year view doesn't care about firstDay setting and always starts
from Sunday. I just made some modification to support firstDay settings. 

in buildSkeleton function in year view should be around line 2175

        for(var mi=0; mi<12; mi++){
            di.setFullYear(di.getFullYear(),mi,1);
            df = cloneDate(di);
            di.setFullYear(di.getFullYear(),mi,1-di.getDay()+firstDay);

            if ( di > df ) {
                di.setFullYear(di.getFullYear(),mi,di.getDate()-7);
            }

and also change updateCells function around line 2262
        subTables.each(function(i, _sub){
        var d = cloneDate(t.curYear);
        d.setFullYear(d.getFullYear(),i,1);
        var df = cloneDate(d);
        d.setFullYear(d.getFullYear(),i,1-d.getDay()+firstDay);

        if ( d > df ) {
            d.setFullYear(d.getFullYear(),i,d.getDate()-7);
        }

Reported by dalibor.horinek on 2012-11-14 11:23:16

[arshaw]

Hi All,

I made some improvements on the calendar adding some of the ideas above and some of
mine, including the month click from the year view. Here you can find the complete
pack working:
http://www.it-design.es/libs/fullcalendar.rar

I still need help to make the events display exactly the same on the year preview as
the month preview.

Reported by steffersonj on 2012-11-16 19:15:27

[arshaw]

Hi Stef,

I’ve downloaded and run your code, but it seems there’s still something “broken”. When
I click from a day with events configured on from year view, all the month days (in
year view) change color (become red) but the “month view” doesn’t activate.

I would like to click on a day with events from year view and then the user should
be redirected to the month view...

Can you help me please ?

Than you!

Riccardo Piccini
Analisi e Sviluppo Software
SOFTWARE 4U SRL
[email protected]


From: [email protected] 
Sent: Friday, November 16, 2012 8:15 PM
To: [email protected] 
Subject: Re: Issue 871 in fullcalendar: Year View with 12 Mini-Calendars

Reported by [email protected] on 2012-11-19 10:37:47

[arshaw]

I just re-uploaded everything. It was missing a file.
Just run the html file inside the demo folder so you can see how everything works.

I still need some help with the year view if someone can give me hand with that.

Reported by steffersonj on 2012-11-21 11:27:10

[arshaw]

Thank you Stef!

Do you know reason why I’m getting an “undefined” instead of “week” and “day” label
when I activate these kind of view too ??

I still need some help with the year view if someone can give me hand with 
that. 
<<

Anyway, let us know which kind of help you need on year view...it seems it’s already
working properly...what do you want to do ?

Bye,

Riccardo Piccini
Analisi e Sviluppo Software
SOFTWARE 4U SRL
[email protected]


From: [email protected] 
Sent: Wednesday, November 21, 2012 12:27 PM
To: [email protected] 
Subject: Re: Issue 871 in fullcalendar: Year View with 12 Mini-Calendars

Reported by [email protected] on 2012-11-21 15:01:05

[arshaw]

The year view only display the event start date with 1 color all hardcoded.
I need that to be exactly the same as the monthly view(1 line with different colors)
or several lines if there's more than 1 event on the same date. 
Just the line without the event name.

Mmmmm, it might be some line commented on the js generating those undefined.

Reported by steffersonj on 2012-11-21 16:14:18

[arshaw]

Hello Stef,
Are you sure of what you want to achieve?

Keep in mind that in one day can potentially be present 10 different events or more
... how could you to represent them all in a space as small as a single day in the
year view?

I believe that just as it is set now, with a color that is hard-coded to be a good
solution: the color more pronounced on the day indicates that by that time will surely
find one or more events, then click on the day and go to see what the situation is.

The only other solution I thought is this one: create, inside the single day-DIV, as
many "mini-DIV" (with background color same as the single event) as events stored for
that day... but I think it's pretty hard job to do and you can’t have the guarantee
of a good result ...

Try to think back and see if what you want to do is really necessary ...

See you soon!

Riccardo Piccini
Analisi e Sviluppo Software
SOFTWARE 4U SRL
[email protected]


From: [email protected] 
Sent: Wednesday, November 21, 2012 5:14 PM
To: [email protected] 
Subject: Re: Issue 871 in fullcalendar: Year View with 12 Mini-Calendars

Reported by [email protected] on 2012-11-21 20:39:43

[arshaw]

Thanks for this!, fantastic work

Reported by ddools on 2012-12-07 13:43:05

[arshaw]

changeview to year not working

Reported by kongaraju on 2012-12-10 11:21:30

[arshaw]

Hi everyone,
I find this topic today, thanks a lot for this work !
I needed to add multi day event color and i think i find the problem.
formatDate function could not parse the date in parameter, we have just to pass the
sd parameters

//---------
Line 2677 to 2681

Replace while loop by:

while(sd.getTime() < segs[i].end.getTime()){
    rowsTd.filter('.fc-day-'+formatDate(sd, 'yyyy-MM-dd')).addClass('fc-year-have-event');
    addDays(sd,1);
}
//-------

Hope this help, sorry for my bad english :)

Reported by faxii.moro on 2013-02-09 11:09:37

[arshaw]

I am new to jquery, I still need some help with full calendar year view ,can anybody
upload source having all above mentioned changes/fixes?

Reported by nira.khaire on 2013-02-20 14:24:38

[arshaw]

if you want use firstday simple replace in fullcalendar.js
in function BasicYearView in buildSkeleton next rows:

for (i=0; i<colCnt; i++) {
     s +="<th class='fc-year-month-weekly-head'>"+ localWeekNames[((firstDay+i)%7)]+"</th>";
}

and in function BasicYearView in updateCells next rows:

subTables.each(function(i, _sub){
var d = cloneDate(t.start);
d.setFullYear(d.getFullYear(),i,1);
d.setFullYear(d.getFullYear(),i,1-d.getDay()+firstDay);

Reported by UstyuzhaninAA on 2013-03-13 20:03:44

[arshaw]

Hi all,

This patch is great. Thank you Kebin and of course all the authors of fullcalendar.
I'm working on integrating this for use on edcaliber.com (site for teachers. Allows
class scheduling).

I forked the repository on github and have been working on fixes and additions.
https://github.com/martiantim/fullcalendar/commits/master
We need to show individual events like steffers and Riccardo where discussing above
so my plan is to make that an option.

I have also fixed the following bugs so far:
-don't show extra week if all days in the next month
-didn't handle opt('weekends') properly
-didn't handle changing the month dimensions properly (seems like this should be an
option?)

We'd love to get this pulled back into master at some point. Any thoughts from the
fullcalendar authors would be great. Happy to do cleanup (original patch has a lot
of dead code) and changes to support new stuff that has come about since the patch
was originally written.

Cheers,
Tim

Reported by martiantim on 2013-03-25 21:51:12

[arshaw]

Hi!

Now I have managed to make fc to show year and monday first:)

But I still have problems with the clicking ability on year view...

Could it has something to do with the class finding on the row

var pos = this.className.search(/\bfc\-day-(\d\d\d\d-\d\d-\d\d)\b/);

???

And how to change colors in the cells in year view depending on the event being displayed??

Hoping fore some help!

Regards
Marcus

Reported by mrhjortsberg on 2013-03-27 01:08:29

[arshaw]

Many thanks for this work. 

As mentionned before, there is a bug with multiple days events. Here is a fix : 

Within function renderDaySegs(segs, modifiedEventId), replace : 

rowsTd.filter('.fc-day-'+formatDate(segs[i].start, 'yyyy-MM-dd')).addClass('fc-year-have-event');

by : 

rowsTd.filter('.fc-day-'+formatDate(sd, 'yyyy-MM-dd')).addClass('fc-year-have-event');

Reported by akyrho on 2013-06-12 14:08:29

[arshaw]

is there a final version of this that can be easily setup? i am seeing so many versions
and patches of this..

thanks!

Reported by kneidels on 2013-06-18 14:55:19

[arshaw]

Hi all,

I've fixed some bugs and made some improvements to this patch. It's all on github at
https://github.com/martiantim/fullcalendar. I'll send a pull request soon. We are enabling
it on http://edcaliber.com monday (6/24/13) if you'd like to try it out without building.

Cheers,
Tim

Reported by martiantim on 2013-06-21 22:44:20

[arshaw]

Hi Tim

I just tried it out (took me a while to figure out that i need to add "year" the view
options!)
and it looks great - cheer!

Reported by kneidels on 2013-06-24 20:47:41

[arshaw]

@ martian : Is-it possible to have a build version ?
thanks

Reported by elecoest on 2013-07-18 17:41:56

[arshaw]

OK. I've generated a compiled version but it doesn't work for me : css are ugly and
I have a event not on the good day but on the top of calendar.

Reported by elecoest on 2013-07-19 18:24:56

[arshaw]

Hi Eleco,

I'm sorry you're having issues. We've overriden a lot of the default styles on edcaliber.com
to fit in with our site look and feel. I'm sure I missed something important with the
default styles. Could you send me a screenshot of what you're getting? tim (at) edcaliber.com

Thanks,
Tim

Reported by martiantim on 2013-07-19 19:15:08

[arshaw]

Hi martian :)

Thanks you for your help. I will send you my url site. 

See you soon !

Reported by elecoest on 2013-07-24 19:09:06

[arshaw]

Hello,

The events's json file is ok in the demo/theme sample.
But les results is ko with the integration of year view in a joomla compoenent. I think
the FC.js calculate the position from the body and not from the div's container.

Reported by elecoest on 2013-07-26 07:29:56

[arshaw]

Reported by adamrshaw on 2013-08-14 01:59:39

• Status changed: Discussing
• Labels added: Type-Feature

[arshaw]

Issue 1287 has been merged into this issue.

Reported by adamrshaw on 2013-08-15 22:32:38

[arshaw]

Issue 1484 has been merged into this issue.

Reported by adamrshaw on 2013-08-18 19:55:17

[arshaw]

Issue 1758 has been merged into this issue.

Reported by adamrshaw on 2013-08-24 21:32:20

[arshaw]

Does anybody know how to get it working in 1.6.4 version or even better, is anyone trying
to achieve this? Do you need some help?

Reported by scoob.junior on 2013-10-25 09:34:52

[arshaw]

I have a problem with FirstDay event in 2013 on December start from second of decmber
from monday. How fix this?

Reported by pawelfatyga on 2013-10-28 23:02:44

[arshaw]

Would really like this in v1.6.* form if anyone has made it work.

Reported by buckzd on 2013-10-30 20:14:09

[arshaw]

http://epsy.ath.cx/fullcalendar-yearview/demos/year.html

https://github.com/tpruvot/fullcalendar/

Reported by tanguy.pruvot on 2013-12-22 11:58:00

[arshaw]

Thank you very much.
Just one note, the dragStart, dragStop are implemented for all views except the year
view.
Is there a plan to add them?

Reported by amir.dresler on 2013-12-22 18:32:42

[arshaw]

Great job, it's a big leg-up with my project. My app is an AngularJS single-page and
I'm using the wrapper from https://github.com/angular-ui/ui-calendar

Been playing with the year view from http://epsy.ath.cx/fullcalendar-yearview/ and
I've made some modifications so that the Prev/Next buttons move a month rather than
a whole year which is more intuitive. Also, so the initial view is the current month
e.g. Feb rather than Jan. I've tried drag-n-drop of events and these are working.

I don't know the status of this view given all of the updates. No doubt I'll be working
through everyone's comments to get the features I need working. Noticed something about
day clicks which I'll read.

Ideally, I'd like a multiple month view which was selectable from a button e.g. 3 months,
12 months. Also would be very nice so the Year title on-click opened a menu to select
a particular year on a carousel (not essential).

Looks like the code needs some re-factoring somehow. A one month view is only a year
view with one month chosen in the options. Really, it's not a view, all the other views
could be made to support multiple months with the number of months shown selected from
an option.

Maybe related to a 3-month view, got a bit confused with firstMonth and lastMonth options
and couldn't find any documentation that related, what are they for?


As I say got some way to go to make sure it fits my needs wrapped in an AngularJS directive,
maybe I'll be posting again.

Reported by [email protected] on 2014-02-08 19:21:04

---

• _Attachment: fullcalendar.js_

[arshaw]

http://en.wikipedia.org/wiki/Cascading_Style_Sheets

Reported by Max.Da.Mustermann on 2014-02-10 16:13:23

[arshaw]

Nice work nick, that's what i was looking for but i have just one problem with overlay
days on every month, is there any way to disable them?
I'll attach a picture so you can see it.
Thanks again :)!

Reported by [email protected] on 2014-02-12 11:24:18

---

• _Attachment: calendari_overlay.PNG
  _

[arshaw]

dragStart, dragStop was implemented this morning... thanks for the report

Reported by tanguy.pruvot on 2014-02-14 16:11:34

[arshaw]

http://epsy.ath.cx/fullcalendar-yearview/demos/external-dragging.html

Reported by tanguy.pruvot on 2014-02-14 16:29:19

[arshaw]

segments widths over two months should be ok now...

Reported by tanguy.pruvot on 2014-02-15 14:36:18

[arshaw]

Works like a charm, Thanks!!

Reported by [email protected] on 2014-02-17 08:31:14

[arshaw]

currently under work :
- hidden weekends with firstDay != 1 
- v2

other features to implement :
- week numbers

Reported by tanguy.pruvot on 2014-02-17 15:54:55

[arshaw]

Any estimates when week numbers are ready? Thanks in advance

Reported by daskog on 2014-02-20 17:57:22

[arshaw]

its made, but its really hard to fix the hidden weekend feature :/

Reported by tanguy.pruvot on 2014-02-23 11:44:48

[arshaw]

Thank you for the hard work you are putting into this.

My reasoning for asking for week numbers is because it is best pratice in the calendar
world to have it there. For me clients running different rental business requires it
/ or do want it.

Reported by daskog on 2014-02-26 21:47:08

[arshaw]

Where can i find the file with week numbers? Tnx

Reported by daskog on 2014-02-26 21:50:34

[arshaw]

On github, in file releases

Reported by tanguy.pruvot on 2014-02-26 22:57:56

[arshaw]

Can you help me out with making a version ready with full year, week numbers? this whole
github thing is really new for me!

Br,
Daniel

Reported by daskog on 2014-02-26 23:38:25

[arshaw]

https://github.com/tpruvot/fullcalendar/releases

http://epsy.ath.cx/fullcalendar-yearview/tests/week_numbers.html

Reported by tanguy.pruvot on 2014-02-27 00:52:49

[arshaw]

Hi there, 
Im wondering if it is possible to configure your code to display X months instead of
a full year?

Greate work by the way!

Regards Nicals

Reported by [email protected] on 2014-04-09 19:07:13

[arshaw]

great feature! 

is there a way to change the length of day names in year view? 

I'd like to use dayNamesShortest instead of dayNamesShort

great work

Reported by patrickwasp on 2014-04-10 16:53:59

[arshaw]

Brillant work ! Works like a charm, Thanks!!

Reported by gopi4kasturi on 2014-04-28 17:33:20

[arshaw]

Hello Tanguy,

It's the first time were all is OK ! Tanks a lot.

A little comportement : on the same line, you have three month and each month have
the weeks. If in a day you have 5 events, the minicalendar is extended but not 2 others.

So VERY GOOD JOB !!

Reported by elecoest on 2014-04-30 05:48:26

---

• _Attachment: Capture.PNG
  _

[arshaw]

Hello. This is a great job!

Two things (I don't know if it's possible):

- How to set height on the year view?

- How to disable month clickable functionality on the year view? I don't want that
users click on month names...

Is this possible to achieve?

Reported by rwp.bworld on 2014-05-28 17:05:45

[arshaw]

the height cant be set yet, there is a min-height by cell, but depends a lot on the
usage of the calendar (in my case i can have 8 lines or more by day)

for the month link... that could be added but you can also do it easily with jQuery

Reported by tanguy.pruvot on 2014-05-28 19:47:31

[arshaw]

Thank you, Tanguy.

I tried with preventDefault() but without success. It was that what you were suggesting?

Reported by rwp.bworld on 2014-06-01 13:50:24

[arshaw]

i was suggesting something like jQuery('.fc-year-monthly-name a').removeAttr('href');

here is my new demo url : http://epsy.linuxd.net/fullcalendar-yearview/demos/year.html

Reported by tanguy.pruvot on 2014-06-06 16:48:59

[arshaw]

Issue 2115 has been merged into this issue.

Reported by adamrshaw on 2014-06-07 22:20:52

[arshaw]

Hi.
Thank you for your answer but what you suggested didn't work. So I replaced <a> tag
for a <label> tag.

What I did:
$('#myDiv').find('.fc-year-monthly-name a').replaceWith(function() {
      return $('<label />', {html: $(this).html()}).css({color: 'black', 'font-weight':
'bold', 'font-size': '15px'});
});

Reported by rwp.bworld on 2014-06-09 18:07:51

[arshaw]

I'm not seeing the fc-header-left or right.  The html code is there but they don't show
up on the page.  The demo shows just fine and I copied and pasted the demo code into
my page plus I used the exact same css and fulcalendar.js files as the demo.

This fork is exactly what I needed for a rental booking site but I gotta figure out
why the buttons aren't showing.

Reported by donaldlafferty on 2014-07-07 03:33:48

[arshaw]

did you download it on github ? the rar file in the thread is not related


2014-07-07 5:34 GMT+02:00 <[email protected]>:

Reported by tanguy.pruvot on 2014-07-07 13:45:44

[arshaw]

No, I actually downloaded the .js and .css from the example from entry #95.  In that
example everything shows correctly so I figured if I used the exact same files it should
work for my.  It just seems so odd that the code would look the same yet on one page
it works and the other it doesn't.  I am using Codeigniter but the page should render
the same.

I will try using the github files.

Reported by donaldlafferty on 2014-07-07 14:18:05

[arshaw]

I grabbed the file from github and installed it in a working Fullcalendar implementation
I have and it works perfectly.  I will try the Github version when I get home.

Is this ever going to be merged into the official Fullcalendar?

Reported by donaldlafferty on 2014-07-07 14:32:48

[arshaw]

Not so sure... it should be rewrote when v2 will be stable
Le 7 juil. 2014 16:33, <[email protected]> a écrit :

Reported by tanguy.pruvot on 2014-07-07 14:41:12

[arshaw]

Whatever my issue was it's resolved now.  It had something to do with my links to the
.js and .css files.  I never did figure out which one was the bad line but it's working
as expected now.

This is something the official version really, really needs.  It's a very good plugin
as is but this would make it great.

Reported by donaldlafferty on 2014-07-08 01:37:00

[arshaw]

Great enhancement to the fullcalendar plugin! How can I modify this to render fiscal
year instead of calendar (i.e., September to October)? TYA

Reported by jenjenva on 2014-07-21 18:53:55

[arshaw]

tx, see scholar sample

Reported by tanguy.pruvot on 2014-07-21 19:07:51

[arshaw]

got it... tx!

Reported by jenjenva on 2014-07-23 14:11:43

[arshaw]

Hello.
Thanks for the improvement in fullcalendar plugin.
Will the upgrade to version 2.0?

Reported by sadomeni on 2014-08-06 10:10:20

[arshaw]

Not for the moment ;)

Reported by tanguy.pruvot on 2014-08-06 10:37:33

[arshaw]

Is there an event similar to dayRender on the full year view?  I know the days get rendered
but dayRender only triggers when in Month view.

Reported by donaldlafferty on 2014-08-28 02:18:16

[arshaw]

i didnt added this trigger indeed...

Reported by tanguy.pruvot on 2014-08-28 07:47:39

[arshaw]

http://epsy.linuxd.net/fullcalendar-yearview/tests/day_render.html

Reported by tanguy.pruvot on 2014-08-28 08:14:38

[arshaw]

Is there a way to have year view in fullcalendar2.1.1 version?

Reported by anjjana.s.s on 2014-09-06 07:42:38

[arshaw]

not for the moment, im busy on other projects and 1.64 works well

Reported by tanguy.pruvot on 2014-09-06 07:44:14

[arshaw]

Hey Tanguy,
I appreciate your effort on getting this plugin to such a great level. I have been
using this plugin for one of my school project and it has been working like a charm
so far. I understand that you have been busy with other projects but I would really
appreciate if you can add the basic year view to the latest version 2.1.1.

Thanks.

Reported by balajimohan4u on 2014-09-10 05:34:13

[arshaw]

Hi Tanguy,
You are doing good work. it really help full for many people.
we need basic year view in 2.*.
how we can add that one.
thanks

Reported by Rabadiya.nilesh on 2014-09-11 18:04:27

[arshaw]

Event Background color on year view:

function renderDaySegs(segs, modifiedEventId) {

...

rowsTd.filter('.fc-day-'+formatDate(sd, 'yyyy-MM-dd')).css('background-color',segs[i].event.color);

...

Reported by ocio.miguel on 2014-09-19 07:19:13

[arshaw]

Hi, I want to have year view in fullcalendar2.1.1. can anyone help?

Reported by anjjana.s.s on 2014-09-29 07:31:49

[arshaw]

Hi Tanguy,

Thanks for amazing work. This has really simplified my work. Is there a simple way
for adding a quarter view to this? 

Regards,
Rijo John

Reported by rijojohn85 on 2014-10-22 08:14:28

[arshaw]

link down http://epsy.linuxd.net/fullcalendar-yearview/demos/year.html

Reported by elecoest on 2014-12-17 08:02:26

[arshaw]

Hello Tanguy,

I've a pb when the firstDay=Monday. When firstday =Sunday it's good.


Can you help me ?

Mau

Reported by elecoest on 2014-12-17 08:42:13

---

• _Attachment: year_view_error.JPG_

[arshaw]

for the link its now : http://epsy.linuxd.org/fullcalendar-yearview/demos/

For your problem, never experienced that, and im french with mondays first too

Reported by tanguy.pruvot on 2014-12-17 08:59:17

[arshaw]

OK. i'm continue my searchs :)

Je regarde car çà m'étonne aussi ce comportement :/
Manu
et merci pour le lien

Reported by elecoest on 2014-12-17 09:08:05

[arshaw]

OK I'found it et kill it.

The origine : I defined my firstDay like a char firstDay:'1'
so in your code, when you compare i to firstDay+7 it will be interpreted like 17...

Thanks for your reply :)

Manu

Reported by elecoest on 2014-12-17 09:32:10

[arshaw]

Is this on v1?  If so when will it get updated to v2?  

Finally why is this not part of the main release yet?

Reported by patcouch22 on 2014-12-19 17:12:23

[arshaw]

Currently working on the v2...

i accept paypal gifts on this email tanguy.pruvot@... gmail for private publishing,
as i didnt received anything for the first version except some thanks ;)

Reported by tanguy.pruvot on 2015-01-07 14:53:45

[arshaw]

Issue 2431 has been merged into this issue.

Reported by adamrshaw on 2015-02-10 02:49:15

[arshaw]

Hello all,
I noticed an issue while trying to display future events on year view : Januray, February,
March are OK, but the next ones are displayed on the first 3 months instead of the
right month :( It seems it should add more px if it comes to another block (1 block
equals for me 3 months displayed in a row)

Does anyone have the same issue ?

Reported by ziiicos on 2015-04-03 03:57:38

[arshaw]

I just published the Yearview v2.2.5

Reported by tanguy.pruvot on 2015-04-03 10:31:45

[arshaw]

https://github.com/tpruvot/fullcalendar

demo : http://epsy.linuxd.org/fullcalendar/demos/

Reported by tanguy.pruvot on 2015-04-03 10:34:39

[arshaw]

thank you so much!!!

Reported by sadomeni on 2015-04-03 10:57:51

[arshaw]

It's slow to render the year view. Is there any way I can show a blockui while the client
responds? is there any other way to do this?

Reported by brendanelly.banda on 2015-04-14 04:47:15

[arshaw]

Got problems setting the height of the year view.
E.G. Trying to set the height of 300px, the fullcalendar reports 300px after that,
but the actual size is much larger (in my case 508px).
Is there a possibility to fix the issue?

Reported by [email protected] on 2015-05-06 11:55:53

---

• _Attachment: Screenshot 2015-05-06 14.55.30.png
  _
• _Attachment: Screenshot 2015-05-06 14.53.42.png
  _

[arshaw]

Yearview, exactly what I was looking for!  nice work to go along with the fantastic
work of FullCalendar.  I hope they get merged.  

Reported by sday757 on 2015-05-20 00:20:36

[arshaw]

Great work. 
But, I cannot get the lang option to work. 
When showing the year view, the lang: 'fr' option is not used, instead it uses the
last included language file. This does not work in a multi language implementation.

Month, day and week views work fine, just not the year view. Bug?
Cheers!

Reported by [email protected] on 2015-06-17 20:19:36

[arshaw]

http://epsy.linuxd.org/fullcalendar/demos/year-french.html

2015-06-17 22:19 GMT+02:00 <[email protected]>:

Reported by tanguy.pruvot on 2015-06-17 20:21:38

[arshaw]

Let me clarify - (I actually tried to delete my first comment and upload two other images
but that does not work in this forum, using Chrome)  
In my code the lang: 'en' option is set. But in the attached image it uses French for
the smaller 12-month calendars but English elsewhere. Bug?
Cheers!

Reported by [email protected] on 2015-06-17 20:33:34

---

• _Attachment: Publishing Schedule.png
  _

[arshaw]

i dont know, and its german ;) sorry, i'm busy on other open source projects

Reported by tanguy.pruvot on 2015-06-17 20:37:52

[arshaw]

Sorry, I got the images confused, but here's the bug/not supported feature:
The lang: '(language abbreviation)' option is not used/not supported in year view.

Instead fullCalendar uses the language in the last included language file. 
The documentation states it will use the last included language file, but only when
the "lang" option is not set. 
This will not work in a multi-language environment where you include the language files
you want, or use the "all" language file. 
Another options is to include only one language file dynamically, but I rather not
for performance reasons.

Reported by [email protected] on 2015-06-17 21:05:13

[arshaw]

Fix this and I'll donate $30 - I'm stuck without the same language support as fullCalendar.

Reported by [email protected] on 2015-06-17 21:07:03

[arshaw]

ok, i will implement that.. and also maybe create a new branch based on a newer version

Reported by tanguy.pruvot on 2015-06-17 22:22:44

[arshaw]

That would be totally awesome!

Reported by [email protected] on 2015-06-17 22:33:22

[arshaw]

Pushed to my repo...

I accept bitcoins : 1QAyxsrgcixkxtC3yEyWfmfJoAJf9ihVKy
... else my paypal account is my email :p

Working on the new branch...

Reported by tanguy.pruvot on 2015-06-17 22:34:53

[arshaw]

http://epsy.linuxd.org/fullcalendar/demos/languages.html

Reported by tanguy.pruvot on 2015-06-17 22:35:31

[arshaw]

https://github.com/tpruvot/fullcalendar/releases/tag/v2.2.7-yearview

Reported by tanguy.pruvot on 2015-06-18 00:03:52

[arshaw]

@tanguy thanks a lot! It would be cool to be able to extract that into a simple plugin.


Is there a lot of hooks missing in core to be able to achieve that?

Reported by guillaume86 on 2015-06-18 10:09:19

[arshaw]

@tanguy - $35 coming your way. 
Thank you for working on this. =)

Reported by [email protected] on 2015-06-18 21:18:33

[arshaw]

thanks a lot... there is one last thing which is not translated correctly. its the popup
with "+ N events".

If i remember right, adam fixed that in the 2.3.x

Reported by tanguy.pruvot on 2015-06-19 00:10:55

[arshaw]

@guillaume: its already like a plugin... in the source code point of view... 

Reported by tanguy.pruvot on 2015-06-19 00:12:12

[arshaw]

q: when a user clicks an event in the year calendar, I'd like to highlight all segments
for the same event. Events often stretch over 7 days, causing events to be split into
segments. How can I achieve that? 

Reported by [email protected] on 2015-06-19 16:47:07

[arshaw]

a: I'm sure there is a better way, but I did a workaround which works for me. 
1. Add a unique css class for each event
2. When rendering, even if the event stretches across weekends, the class is applied
to all segments.
3. When user clicks a segment: 
$("." + calEvent.className).addClass('red');

When you drag an event the other segments, belonging to the same event, are hidden,
so fullCalendar is aware of the other segments, but I have not found a ways to access
them through the API.

Reported by [email protected] on 2015-06-19 17:17:40

[arshaw]

question: is it possible to have the year-view start from September, rather than January?
I would want for Sep-August, to match the school year.

thanks!

Reported by coda.apps on 2015-06-22 21:52:19

[arshaw]

NICE!!! thats what iam searching for

Reported by david.blaa on 2015-08-08 06:39:04

[piyushchauhan2011]

:+1:

[phammer]

@arshaw : Any more or less official plan to release such a year view in the official release? We started to prototype with tanguy.pruvot's year view.

[valteraki]

Hello! I am using this and till now all went smooth ... But now i encountered a problem .. is it possible to choose a event by yearview (considering there will always only be 1 event for 1 day) and for example go to a page or get the title (url:) all this only on the yearview... P.S: I am a newbie and all the code kinda confuses me so i am struggling to try comprehend. Sry i am being annoying or this question isnt very relevant

[LorenGr]

Hi all, tanguy's addition to fullcalendar is absolutely great, fullcalendar however is moving forward in versions and year view is getting outdated. Please help me update tanguy's yearview with the latest fullcalendar version. I already did work to adapt to the updated fullcalendar grid and view api's. Please find it here : http://plnkr.co/edit/5U6vua
I am not managing to get the renderSelection mechanism working. And the css is missing, but most of yearview is now working with the latest fullcalendar version, check out the plunker above.

[G89Angel]

Would be great to have this in the new 3.0.1 version. Any plans of implementing it anytime soon?

[espen]

@G89Angel 3.0.1 is already released. https://github.com/fullcalendar/fullcalendar/releases/tag/v3.0.1

[arshaw]

A year view can be created via a list view but I believe this ticket is concerned with rendering a year as 12 tiled mini month-view calendars.

[spookycookie27]

This is great by the way. 👍
What would be the correct way to get the year view to start on the current month, rather than defaulting to January ? Am I missing something obvious ? :)

[meoz]

Is there any update on this request ? Is the full-year calendar still worked on ?

[ghost]

Hi @arshaw , Adam this I believe would be a very welcome addition. As it is, I've had to implement a view changer in my CMS for my client's that switches between the Calendar, and a table showing previous months events. Will the year view show events placed into the calendar, and be able to switch to that month chosen, and render the placed events?

[senzaikenn]

+1

[dusanm65]

I have modified above metioned plunker and added dragging, resizing and selection, please have a look: http://plnkr.co/edit/1I9qfzuHSsoZnQq4lzz5?p=preview

[koganei]

Hi @arshaw, do you have some sort of ETA on when we can expect this to be in an official release?
Thank you

[dusanm65]

Hi @koganei ,
I am happy to see that you're interested in this feature.
In the mean time while it's on its way to the main release,
is there anything you would like to see there that would improve the functionality?

Thanks in advance

[MaddHatters]

Hi @arshaw @dusanm65. I just wanted to add my support for the mini calendar addition. I think it will really be a nice asset. If I have any suggestions or comments, is this issue the best place to leave them?

[espen]

@MaddHatters yes, suggestions and comments are much welcome here :) Also make sure you vote for this issue as explained here

[cansozeri]

When will this feature release ??

[jfranpino]

Excuse me but I do not understand something.
In the official version 3.7.0 you have the view of the year with 12 months?

[acerix]

The calendar does not yet have a built-in view with 12 mini calendars as described in this feature request.

It's hard to say when this will be added, there are many other open requests, but this one is at the top of the list by popularity.

[jfranpino]

ok, thank you acerix.

[marc-khoury-kronos]

Hi @acerix, any update on when this could be available? We would love to buy the Scheduler plugin, but since we're using a custom year view, we can't upgrade our fullcalendar from v2 to v3 to use the Scheduler plugin.

[gowsikk]

this.calendarOptions = {
editable: true,
eventLimit: false,
header: {
left: 'prev,today,next',
center: 'title',
right: 'year,month,basicWeek'
},
views: {
month:{

  },
   basicWeek: {

    },
  year: {
    type:'agenda',

    }
  },
    events: []
  };

}

This is my typescript code .In year, what type i need to gave except agenda.Because no other type is working.

[Lynn-cc]

The fullCalendar version of the year view version is very old so that the methods and events are very different from the current doc. I have to fixed bugs by myself. It would be better if you publish a version for this view.

[devsullo]

@Lynn-cc have you done anything? I've just started working the same way in TypeScript

[Lynn-cc]

@devsullo yes, I've modified a few code. And I've found that some fullCalendar's new features in the recent version didn't support or didn't effective because of bugs.
I think I could give you some of the modifies and problems I found:

1. columnHeader param didn't support.
2. removeEventSource didn't effective, I can't clear the events so that I have to rebuild the calendar.
3. .fc-year-monthly-header class of the localMonthNames dom didn't wrap with a <th> so that I can't add styles for the text.
4. classes start with .fc-day- didn't reset when the year changes.
5. I can't hide the .fc-other-month days.
6. The className of the event param didn't add to the day dom, so that I can't add style for them. I don't know how recent version do with the param, probably there is some other better way to add styles for the days with events.
7. Mouse events functions didn't effective.

[devsullo]

@Lynn-cc I've created year view based on current version, you can checkout here fullcalendar-year-view
But it still needs testing
You can install it via npm i fullcalendar-year-view

[wojciechlampa]

@acerix Do you plan to include year view for v4 of fullcalendar?

[CalvinWu4]

@Lynn-cc I've created year view based on current version, you can checkout here fullcalendar-year-view
But it still needs testing
You can install it via npm i fullcalendar-year-view

Can you provide a screenshot of what it looks like?

[sfarzoso]

I would like to buy the premium version of FullCalendar, but I need the year view, will this feature implemented soon?

[shreyas-agrawal]

By when we can expect this feature of having year view with 12 mini calendars to be released in fullcalendar?

[lovecoding-git]

Hi I would like to get year view function even though it would be expensive. When could you release it?

[cressije]

Maybe here : https://year-calendar.github.io