Fullcalendar: Multi-Month View
Originally reported on Google Code with ID 199
Please provide any additional information below.
I'm using the calendar to schedule videos for publishing online. I usually have
content for up to two to three months.
How can I display three months at the same time so I can drag videos from
one month to the next if neccesary?
Reported by garifuna on 2009-11-20 07:48:14
Imported with 47 stars.
arshaw
All 51 comments
Issue 403 has been merged into this issue.
Reported by adamrshaw on 2009-11-28 00:06:40
arshaw
on 19 Aug 2015
this is currently not possible with fullcalendar, but might make it so in the future
(maybe through an add-on)
Reported by adamrshaw on 2009-11-28 00:08:35
- Labels added: Type-Enhancement
- Labels removed: Type-Defect, Priority-Medium
arshaw
on 19 Aug 2015
Issue 536 has been merged into this issue.
Reported by adamrshaw on 2009-12-31 00:28:27
arshaw
on 19 Aug 2015
Issue 535 has been merged into this issue.
Reported by adamrshaw on 2010-01-20 05:41:03
arshaw
on 19 Aug 2015
There is one way to do this. Call any time you want the script by this:
<div id="calendar0"></div>
<div id="calendar1"></div>
<div id="calendar2"></div>
and modify
$('#calendar').fullCalendar(
{
...
}
by
$('#calendar0').fullCalendar(
{
...
};
$('#calendar1').fullCalendar(
{
...
}
etc..
Works great, and you can display any month you need to.
Reported by oldKing.18 on 2010-02-05 16:17:47
arshaw
on 19 Aug 2015
Hi.
Yes, that's an option. But out of the box, you get n-requests, where n is count of
your calendars.
One way to solve this would be to aggregate those calls into one function in
javascript, and then parse the callback and feed those calendars separately.
Reported by vytautas.civilis on 2010-02-05 22:31:24
arshaw
on 19 Aug 2015
Issue 647 has been merged into this issue.
Reported by adamrshaw on 2010-04-27 05:12:10
arshaw
on 19 Aug 2015
Reported by adamrshaw on 2010-04-27 05:12:33
arshaw
on 19 Aug 2015
Issue 727 has been merged into this issue.
Reported by adamrshaw on 2010-04-28 02:34:46
arshaw
on 19 Aug 2015
The biggest issue with implementing this is Screen real-estate. Thought needs to go
into how to crap a years worth of data (or multiple months) into a tighter space.
Once that is figured out, it should be relatively easy to add a new "view" to
fullCalendar.
Reported by urkle0 on 2010-04-29 18:53:48
arshaw
on 19 Aug 2015
Issue 772 has been merged into this issue.
Reported by adamrshaw on 2010-06-15 05:43:18
arshaw
on 19 Aug 2015
Issue 744 has been merged into this issue.
Reported by adamrshaw on 2010-06-15 05:43:29
arshaw
on 19 Aug 2015
Reported by adamrshaw on 2010-10-07 21:02:03
- Status changed:
Maybe
arshaw
on 19 Aug 2015
Issue 925 has been merged into this issue.
Reported by adamrshaw on 2010-10-08 00:55:25
arshaw
on 19 Aug 2015
thank you for your responses guys. I'll probably try some of these suggestions.
Reported by garifuna on 2010-10-08 06:24:40
arshaw
on 19 Aug 2015
Issue 933 has been merged into this issue.
Reported by adamrshaw on 2010-10-09 05:58:13
arshaw
on 19 Aug 2015
This is a "must have" for a calendar.. It doesnt need to display info about all the
events, just a color on the whole day; if there is an event attached to that day would
be good enough.. Maybe, if its a multiday, multiweek event, it can display some text,
but no biggie..
Reported by sunberg on 2010-10-28 19:59:52
arshaw
on 19 Aug 2015
Issue 985 has been merged into this issue.
Reported by adamrshaw on 2010-11-22 01:15:04
arshaw
on 19 Aug 2015
A new view, that display a full year should be developed, rather than mockups of multiple
month views glued together. I agree with sunberg, it's a "must have"/".
One note, keep it simple.
Reported by frode.fuglestad on 2010-12-01 08:51:50
arshaw
on 19 Aug 2015
I also agree with sunberg; having a year view that just displayed a tight 12 month calendar
with a classable marker to say that an event exists on a date is one of the few things
missing.
The ability to click on the date and either jump to an alternative specified (via a
property) view or fire an event that you could complete yourself would be perfect.
Keep up the good work.
Reported by [email protected] on 2010-12-31 10:19:06
arshaw
on 19 Aug 2015
Reported by adamrshaw on 2011-01-02 05:57:13
arshaw
on 19 Aug 2015
Year view would be great. Just look in Google lab - they have year view for Calendar.
It is table of 3 rows with 4 columns each month in a cell with days as simple numbers.
Reported by roznicki on 2011-01-30 10:12:39
arshaw
on 19 Aug 2015
Hi,
i want display the image on full calender
I'm using the calendar,i have a file in data base when i login the page that file will
be load to a perticuler date on calender (that i add as a event to a date).
my issue is when move that perticuler date then i want display the image (if file is
exist in databse else no image) how to change the javascript ........
please help me....
Thank You....
Reported by victor.athoti on 2011-02-15 15:05:40
arshaw
on 19 Aug 2015
Victor, this isn't a support forum, try posting on http://stackoverflow.com/questions/tagged/fullcalendar
for help on using fullcalendar
Reported by urkle0 on 2011-02-15 15:17:34
arshaw
on 19 Aug 2015
This would be a great addition to the full calendar. I do have a requirement on my current
project so if I make any modifications I will be sure to share.
Cheers!
Reported by tracedog on 2011-03-07 21:43:36
arshaw
on 19 Aug 2015
A year view/quarter view is something that my current customer would like.
Reported by bruffridge on 2011-03-09 20:26:12
arshaw
on 19 Aug 2015
Issue 1108 has been merged into this issue.
Reported by adamrshaw on 2011-03-25 02:05:03
arshaw
on 19 Aug 2015
just to make sure we are all on the same page, this feature request is for a view with
multiple FULL-SIZED months.
kebin created a new view in issue 1140 that is a "year view" or sorts, but it contains
12 mini-calendars. should check it out if you are interested.
Reported by adamrshaw on 2011-04-02 19:29:19
arshaw
on 19 Aug 2015
A multiple month view would be possible.. but only in terms of quickly jumping to the
focus month. In terms of the UI for this. I would consider something like the attachment.
Reported by nerkenator on 2011-11-08 23:19:08
- _Attachment: yearview.png
_
arshaw
on 19 Aug 2015
The year view from Issue 1140 works great, I'm using it and it provides full UI that
is expected from year view. Why not consider merge it into mainline?
Reported by dalibor.horinek on 2011-11-10 12:31:38
arshaw
on 19 Aug 2015
Great addition. However, when I use it the eventRender approach at http://stackoverflow.com/questions/3366654/update-an-event-by-dropping-an-external-event
for making an event droppable no longer works and I haven't been able to reconcile.
Any suggestions?
Reported by dave.milstone on 2012-07-05 06:34:57
arshaw
on 19 Aug 2015
Reported by adamrshaw on 2013-08-14 01:50:40
- Status changed:
Discussing - Labels added: Type-Feature
- Labels removed: Type-Enhancement
arshaw
on 19 Aug 2015
Issue 1592 has been merged into this issue.
Reported by adamrshaw on 2013-08-19 02:27:40
arshaw
on 19 Aug 2015
Issue 1677 has been merged into this issue.
Reported by adamrshaw on 2013-08-22 06:35:28
arshaw
on 19 Aug 2015
Issue 1677 has been merged into this issue.
Reported by adamrshaw on 2013-08-22 06:35:29
arshaw
on 19 Aug 2015
Issue 1724 has been merged into this issue.
Reported by adamrshaw on 2013-08-24 02:50:36
arshaw
on 19 Aug 2015
I do the separate div with individual calendars for each of the respective months.
IMHO, this is wholly inefficient. My customer has "events" that run multi-week or
even multi-month. I only show a quarter at a time from the first month in the events
and can page thru quarters at a time or display full timeline.
It would be great to just have the events across months feed into the js and it builds
the quarters (or years) accordingly.
Reported by z.hamman on 2013-10-28 18:15:54
arshaw
on 19 Aug 2015
I have tweaked the fullcalendar 2.0 to allow for more months in the month view. It's
set to show the months as one continuous set of dates. I don't know if this will help
anyone here and I've not tested it with dragging and dropping events. I just wanted
to be able to see a month or two months or three etc so I tweeked the code and added
some hooks to specify the period to view. I've attached it here to replace fullcalendar.js
with fullcalendar-cc.js. options can then be added:
cc_monthPrev: 1,
cc_monthNext: 0,
cc_monthPrev: 1, starts the calendar from a month previous etc. It also works in conjunction
with defaultView. It's only basic as well so it adds five rows to the calendar per
extra month, this will probably be one too many rows for most months but just right
for about 2 months out of the year and could therefore be better worked out. I might
do that one day. Anyway as I said it's not fully tested but works for my requirements.
Reported by Cannon303 on 2014-08-08 15:25:57
- _Attachment: fullcalendar-cc.js.zip_
arshaw
on 19 Aug 2015
My JSFiddle at http://jsfiddle.net/wijgerden/W77vt/ shows two months on one page, using
FullCalendar v2.0.2 as-is; synchronised using `viewRender` such that the user can use
the previous, next, and today buttons.
As mentioned above (see https://code.google.com/p/fullcalendar/issues/detail?id=199#c6)
this approach probably would produce n-requests for events, where n is the count of
your calendars. See comment #6 for suggested work-arounds.
Reported by [email protected] on 2014-08-12 22:36:07
arshaw
on 19 Aug 2015
The extension of Cannon worked for me very nicely.
I only had to adapt the range of calendar items fetched from the database.
(I did this server-side.)
Unfortunately I did not manage to port the changes to the newest fullcalendar release
2.1.
I would really appreciate if this function could be added to the official release!
Reported by [email protected] on 2014-10-11 14:54:50
arshaw
on 19 Aug 2015
Here is an example of how I imagine a multi month view to look. It is similar to how the calendar scrolls down with each month connected vertically on my android phone. I would imagine the configuration would allow you to at the least set the number of months to display vertically connected. An alternative would be to lazy load each row in a never ending scroll into future months.
masteroleary
on 16 Jun 2017
Any new way to do that with V4? Using multiple calendar is problematic with selection trought months...
REPH26
on 27 Mar 2019
would be nice to be able to render a calendar from a start date to an end date, with every date between visible, all in one calendar
tylerrussell
on 16 Nov 2019
With the team I work in, we came up with this solution (for Vue.js, but it can by applied to any version)
First, we create a view for multiple months. These are the parameters we send to the calendar component:
`
<fullcalendar
defaultView="multiMonths"
:views="{
multiMonths: {
type: 'dayGrid',
buttonText: 'Multi-months',
duration: {
months: 3
},
}
}"
:dayRender="dayRenderer" //this does the magic
:header="{
'right': 'prev today next'
}"
:editable="true"
start-date="2019-10-01" // this can be dynamic too
:weekends="true"
:fixed-week-count="false"
:show-non-current-dates="false"
/>
`
Then we have the dayRenderer function as it follows:
`
dayRenderer(day){
const date = moment(day.date);
const isDisabled = day.el.classList.contains('fc-disabled-day');
if (date.date() === 1 && !isDisabled) {
// Add the month name to the first day of every month
day.el.classList.add('text-weight-bold', 'text-smaller');
day.el.innerHTML += `
${date.format('MMMM')}
`;
} else if (isDisabled) {
// Change the style of days that are out of the "validRange" definition, so that they are visible
day.el.classList.add('bg-grey-lighter', 'p-2', 'text-right');
day.el.innerHTML += `
${date.format('DD')}
`;
}
if (!isDisabled) {
// Change the background color of cells based on months
const campaignStartMonth = moment.utc(CHANGE-IT-WITH-YOUR-START-MONTH).month();
const campaignStartEven = campaignStartMonth % 2 === 0;
if (
(campaignStartEven && date.month() % 2 !== 0)
|| (!campaignStartEven && date.month() % 2 === 0)
) {
day.el.classList.add('bg-grey');
}
}
}
`
So, you can have in a single calendar many months and they are differentiated from each other by the name of the month in the first day of it and by the background color. It works pretty well and, in contrast with the solution of having multiple instances of the calendar, here you can drag and drop events from one month to the other and create events that start in one month and end in the other.
miltonlaufer
on 13 Dec 2019
This is what I did. I thought I'd want +2 for calendar 3 but it seems the way the rendering works +1 works.
document.addEventListener('DOMContentLoaded', function() {
var calendar1 = document.getElementById('calendar1');
var calendar2 = document.getElementById('calendar2');
var calendar3 = document.getElementById('calendar3');
var calendar2 = new FullCalendar.Calendar(calendar2, {
plugins: [ 'dayGrid' ],
defaultView: 'dayGridMonth'
});
calendar2.render();
var calendar3 = new FullCalendar.Calendar(calendar3, {
plugins: [ 'dayGrid' ],
defaultView: 'dayGridMonth'
});
calendar3.render();
var calendar1 = new FullCalendar.Calendar(calendar1, {
plugins: [ 'dayGrid' ],
defaultView: 'dayGridMonth',
datesRender: function (view) {
if(view) {
// Calendar 1 Current Start date
var cal1Date = view.view.currentStart;
// Calendar 2 & 3 new dates
var cal2Date = new Date(cal1Date.setMonth(cal1Date.getMonth()+1));
var cal3Date = new Date(cal1Date.setMonth(cal1Date.getMonth()+1));
// Set new dates
calendar2.gotoDate( cal2Date );
calendar3.gotoDate( cal3Date );
}
}
});
calendar1.render();
});
JJZolper
on 24 Apr 2020
Any news on releasing this feature? Would like to get the premium version, but multi month is a must...
bogdancarmanus
on 6 May 2020
Its a great calendar... but I cant believe this feature (multi month) its not out of the box. :/
franciscoortiz16
on 20 Jun 2020
It would be even better when it is also possible to drag a selection over to further months, and scroll the view with it.
strarsis
on 25 Sep 2020
Please, can anyone make an example for v5 version.
webrafaelso
on 19 Oct 2020
@miltonlaufer: Your example is great, I tried a fiddle/pen of it. However, it is doesn't work like this with v5 as there are multiple day handlers now (for different aspects of the day element). With the new v5 API, would one have to use multiple linked calendar instances now?
strarsis
on 19 Oct 2020
Here's my example code for React JS dayGridMonth Multi-month using Fullcalendar v5.
React JS
Multi-month view
Library Version
"@fullcalendar/daygrid": "^5.3.2",
"@fullcalendar/interaction": "^5.3.1",
"@fullcalendar/react": "^5.3.1",
// calendarAPI= React.createRef(); to fetch calendar API
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
<FullCalendar
plugins={[ dayGridPlugin ]}
initialView="dayGridMonth" // dayGridMonth requires dayGridPlugin
ref={calendarAPI} // Optional for dynamic custom date
views ={{
dayGrid: {
type: 'dayGrid', // Applicable for: dayGrid and dayGridMonth
duration: { months: 2}, // Ex: Current month + (current)next month
}
}}
fixedWeekCount={false}
/>
I'm sorry, my English is not very good.
webrafaelso
on 19 Oct 2020
Related issues
arshaw
路
45Comments
arshaw
路
29Comments
StarpTech
路
41Comments
arshaw
路
56Comments
arshaw
路
42Comments
Most helpful comment
Any new way to do that with V4? Using multiple calendar is problematic with selection trought months...