Multi-Month View #470

arshaw · 2015-08-19T10:24:36Z

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.

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

arshaw · 2015-08-19T10:24:37Z

Issue 403 has been merged into this issue.

Reported by adamrshaw on 2009-11-28 00:06:40

arshaw · 2015-08-19T10:24:37Z

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 · 2015-08-19T10:24:38Z

Issue 536 has been merged into this issue.

Reported by adamrshaw on 2009-12-31 00:28:27

arshaw · 2015-08-19T10:24:39Z

Issue 535 has been merged into this issue.

Reported by adamrshaw on 2010-01-20 05:41:03

arshaw · 2015-08-19T10:24:39Z

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 · 2015-08-19T10:24:40Z

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 · 2015-08-19T10:24:41Z

Issue 647 has been merged into this issue.

Reported by adamrshaw on 2010-04-27 05:12:10

arshaw · 2015-08-19T10:24:41Z

Reported by adamrshaw on 2010-04-27 05:12:33

arshaw · 2015-08-19T10:24:42Z

Issue 727 has been merged into this issue.

Reported by adamrshaw on 2010-04-28 02:34:46

arshaw · 2015-08-19T10:24:43Z

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 · 2015-08-19T10:24:44Z

Issue 772 has been merged into this issue.

Reported by adamrshaw on 2010-06-15 05:43:18

arshaw · 2015-08-19T10:24:44Z

Issue 744 has been merged into this issue.

Reported by adamrshaw on 2010-06-15 05:43:29

arshaw · 2015-08-19T10:24:45Z

Reported by adamrshaw on 2010-10-07 21:02:03

Status changed: Maybe

arshaw · 2015-08-19T10:24:46Z

Issue 925 has been merged into this issue.

Reported by adamrshaw on 2010-10-08 00:55:25

arshaw · 2015-08-19T10:24:46Z

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 · 2015-08-19T10:24:47Z

Issue 933 has been merged into this issue.

Reported by adamrshaw on 2010-10-09 05:58:13

arshaw · 2015-08-19T10:24:48Z

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 · 2015-08-19T10:24:48Z

Issue 985 has been merged into this issue.

Reported by adamrshaw on 2010-11-22 01:15:04

arshaw · 2015-08-19T10:24:49Z

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 · 2015-08-19T10:24:50Z

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 itsystems@trinityconferences.co.uk on 2010-12-31 10:19:06

arshaw · 2015-08-19T10:24:50Z

Reported by adamrshaw on 2011-01-02 05:57:13

arshaw · 2015-08-19T10:24:51Z

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 · 2015-08-19T10:24:52Z

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 · 2015-08-19T10:24:53Z

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 · 2015-08-19T10:24:53Z

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 · 2015-08-19T10:24:54Z

A year view/quarter view is something that my current customer would like.

Reported by bruffridge on 2011-03-09 20:26:12

arshaw · 2015-08-19T10:24:55Z

Issue 1108 has been merged into this issue.

Reported by adamrshaw on 2011-03-25 02:05:03

masteroleary · 2017-06-16T13:45:14Z

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.

REPH26 · 2019-03-27T16:00:19Z

Any new way to do that with V4? Using multiple calendar is problematic with selection trought months...

tyzoo · 2019-11-16T02:29:03Z

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

miltonlaufer · 2019-12-13T17:58:11Z

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 += `
                    &nbsp;${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.

ghost · 2020-04-23T23:44:40Z

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();

});

bogdancarmanus · 2020-05-06T17:50:39Z

Any news on releasing this feature? Would like to get the premium version, but multi month is a must...

franciscoortiz16 · 2020-06-19T23:50:06Z

Its a great calendar... but I cant believe this feature (multi month) its not out of the box. :/

strarsis · 2020-09-25T17:35:05Z

It would be even better when it is also possible to drag a selection over to further months, and scroll the view with it.

webrafaelso · 2020-10-19T08:29:07Z

Please, can anyone make an example for v5 version.

strarsis · 2020-10-19T09:02:04Z

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

webrafaelso · 2020-10-19T11:17:53Z

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.

sanjana-ct · 2022-04-28T07:20:08Z

@

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.

calendarAPI= React.createRef();

thanks for this example. I wanted to know if you figured out a way to arrange these calendars side by side horizontally.

grazielleanna · 2022-06-27T16:32:01Z

Any update on this? I have the same problem.

gitalvininfo · 2022-11-15T02:52:10Z

@

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.

calendarAPI= React.createRef();

thanks for this example. I wanted to know if you figured out a way to arrange these calendars side by side horizontally.

Did you get it? Having the same exact issue.

arshaw · 2023-02-02T23:40:42Z

This feature has been implemented:

docs: Multi-Month Stack
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

arshaw removed the Discussing label Aug 27, 2015

arshaw added New View Accepted and removed Status-Accepted3 labels Jun 12, 2016

arshaw mentioned this issue Mar 30, 2017

FullCalendar print multiple months #3605

Closed

arshaw mentioned this issue Aug 10, 2017

Output at once three months (quarter) #3780

Closed

arshaw removed their assignment Nov 30, 2017

acerix mentioned this issue Jul 27, 2018

year views #4261

Closed

adhrinae mentioned this issue Nov 4, 2021

Display semesters, cycles of years, seasons and combination. nhn/toast-ui.vue-calendar#59

Closed

arshaw added this to the v6-new-ui-features milestone Jan 10, 2023

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

acerix mentioned this issue Jan 30, 2023

Add option to show multiple months #7172

Closed

2 tasks

arshaw closed this as completed Feb 2, 2023

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

Multi-Month View #470

Multi-Month View #470

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

masteroleary commented Jun 16, 2017

REPH26 commented Mar 27, 2019

tyzoo commented Nov 16, 2019

miltonlaufer commented Dec 13, 2019 • edited

ghost commented Apr 23, 2020 • edited by ghost

bogdancarmanus commented May 6, 2020

franciscoortiz16 commented Jun 19, 2020

strarsis commented Sep 25, 2020

webrafaelso commented Oct 19, 2020

strarsis commented Oct 19, 2020 • edited

webrafaelso commented Oct 19, 2020 • edited

sanjana-ct commented Apr 28, 2022

grazielleanna commented Jun 27, 2022

gitalvininfo commented Nov 15, 2022

arshaw commented Feb 2, 2023

miltonlaufer commented Dec 13, 2019 •

edited

ghost commented Apr 23, 2020 •

edited by ghost

strarsis commented Oct 19, 2020 •

edited

webrafaelso commented Oct 19, 2020 •

edited