Year View with 12 Mini-Calendars #1140

arshaw · 2015-08-19T11:21:13Z

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](https://storage.googleapis.com/google-code-attachments/fullcalendar/issue-871/comment-0/fullCalendar15.rar)_

Imported with 51 stars.

The text was updated successfully, but these errors were encountered:

arshaw · 2015-08-19T11:21:13Z

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 · 2015-08-19T11:21:14Z

Issue 1092 has been merged into this issue.

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

arshaw · 2015-08-19T11:21:15Z

Issue 924 has been merged into this issue.

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

arshaw · 2015-08-19T11:21:16Z

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

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

arshaw · 2015-08-19T11:21:16Z

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 · 2015-08-19T11:21:17Z

I dig

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

arshaw · 2015-08-19T11:21:18Z

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

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

arshaw · 2015-08-19T11:21:18Z

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](https://storage.googleapis.com/google-code-attachments/fullcalendar/issue-871/comment-8/fullcalendar.patch)_

arshaw · 2015-08-19T11:21:19Z

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 · 2015-08-19T11:21:20Z

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 · 2015-08-19T11:21:20Z

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 · 2015-08-19T11:21:21Z

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 · 2015-08-19T11:21:22Z

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 · 2015-08-19T11:21:22Z

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 · 2015-08-19T11:21:23Z

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 victor@gen72.com on 2012-02-07 09:57:44

arshaw · 2015-08-19T11:21:24Z

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 · 2015-08-19T11:21:24Z

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 · 2015-08-19T11:21:25Z

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 · 2015-08-19T11:21:26Z

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 · 2015-08-19T11:21:27Z

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 · 2015-08-19T11:21:27Z

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 · 2015-08-19T11:21:28Z

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 · 2015-08-19T11:21:29Z

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 · 2015-08-19T11:21:29Z

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 · 2015-08-19T11:21:30Z

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 · 2015-08-19T11:21:31Z

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 · 2015-08-19T11:21:31Z

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

devsullo · 2018-12-25T13:24:15Z

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

Lynn-cc · 2018-12-27T02:49:08Z

@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:

columnHeader param didn't support.
removeEventSource didn't effective, I can't clear the events so that I have to rebuild the calendar.
.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.
classes start with .fc-day- didn't reset when the year changes.
I can't hide the .fc-other-month days.
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.
Mouse events functions didn't effective.

devsullo · 2019-01-16T17:54:36Z

@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 · 2019-03-20T08:38:36Z

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

sfarzoso · 2019-06-20T10:24:27Z

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

shreyas-agrawal · 2019-09-19T10:58:57Z

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

lovecoding-git · 2020-04-11T00:18:24Z

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

cressije · 2020-04-11T07:31:59Z

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

Nandishju · 2021-02-02T12:57:36Z

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

Can you please give me a repo link? I want to use year view ..please

pamgaiguer · 2021-11-04T05:41:41Z

Any idea when the Year view will be available?!

dusanm65 · 2021-11-04T08:45:10Z

Never the owner of the repo is useless and never merged my work

…

On Thu, Nov 4, 2021, 05:41 Pamella Gaiguer ***@***.***> wrote: Any idea when the Year view will be available?! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1140 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AG5TDFFM3CF2PL5F2OG24TDUKIMKLANCNFSM4BOWEKIA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

spookycookie27 · 2021-11-04T19:06:56Z

I used this full Calender in year view by copying the approach used by someone else higher up the comments. I think it was basically 12 mini calendars but from what I remember it worked fine and was easy to implement. Its been a few years since I worked on it. Pretty sure its still live and working. But there are much newer Calendars if you search around and ones that are still actively maintained. But Kudos must be given to the guy (or girl) that created it @dusanm65 .
If you have commits that could have been merged in, you could easily fork this repo and release your updates, Im sure loads of ppl will be thankful. :)

SimonBrazell · 2021-11-04T23:27:52Z

Could try this, worked well for me in the past.

pamgaiguer · 2021-11-15T02:07:43Z

thanks @SimonBrazell but i need the angular version :/

srinipatha · 2022-11-16T14:53:05Z

I am unable to use this feature (year view), is there any specific subscription required, if yes please let me know.

arshaw · 2023-02-02T23:41:25Z

This feature has been implemented:

docs: Multi-Month Grid
github release: v6.1.0
blog post: Multi-Month and more in v6.1

arshaw self-assigned this Aug 19, 2015

arshaw added Type-Feature Discussing labels Aug 19, 2015

acerix mentioned this issue Feb 4, 2019

Year View Render #4482

Closed

acerix mentioned this issue May 3, 2019

Created year-view.html demo #4667

Closed

arshaw mentioned this issue Jul 25, 2019

Show events without overlapping in year view #4431

Closed

acerix mentioned this issue Aug 2, 2019

In fullcalendar year view date are behind by one day. #4956

Closed

acerix mentioned this issue Oct 29, 2019

Eary calendar #5115

Closed

melloware mentioned this issue Jun 16, 2020

Schedule: additional year view primefaces/primefaces#3522

Closed

acerix mentioned this issue Mar 21, 2022

Calendar year view #6764

Closed

arshaw added this to the v7 milestone Aug 7, 2022

arshaw modified the milestones: v7, v6-new-ui-features Jan 10, 2023

arshaw modified the milestones: v6-new-ui-features, v6.0.4 Jan 24, 2023

arshaw closed this as completed Feb 2, 2023

fullcalendar locked as resolved and limited conversation to collaborators Feb 2, 2023

Year View with 12 Mini-Calendars #1140

Year View with 12 Mini-Calendars #1140

Comments

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

arshaw commented Aug 19, 2015

devsullo commented Dec 25, 2018

Lynn-cc commented Dec 27, 2018 • edited

devsullo commented Jan 16, 2019 • edited

wojciechlampa commented Mar 20, 2019

sfarzoso commented Jun 20, 2019

shreyas-agrawal commented Sep 19, 2019

lovecoding-git commented Apr 11, 2020 • edited

cressije commented Apr 11, 2020 • edited

Nandishju commented Feb 2, 2021

pamgaiguer commented Nov 4, 2021

dusanm65 commented Nov 4, 2021 via email

spookycookie27 commented Nov 4, 2021 • edited

SimonBrazell commented Nov 4, 2021

pamgaiguer commented Nov 15, 2021

srinipatha commented Nov 16, 2022

arshaw commented Feb 2, 2023

Lynn-cc commented Dec 27, 2018 •

edited

devsullo commented Jan 16, 2019 •

edited

lovecoding-git commented Apr 11, 2020 •

edited

cressije commented Apr 11, 2020 •

edited

spookycookie27 commented Nov 4, 2021 •

edited