Im trying to create a custom view for FullCalendar.

What I'm trying to achieve is similar to the month view, but to only show the current and next four weeks.

So for example, if today is the 11th December 2014, then only want to see from 8th December to the 11th of January.

I should not be-able to click the previous and next buttons to see other dates.

Something similar to the image below.

Theres a few questions on creating custom views for full calendar on StackOverflow but a lot of them are using the old version which no longer are applicable for the latest version.

This answer creates a custom view with the latest version but unfortunately I was not able to tweak it to create my custom view.

Any help would be much appreciated.

Im trying to create a custom view for FullCalendar.

What I'm trying to achieve is similar to the month view, but to only show the current and next four weeks.

So for example, if today is the 11th December 2014, then only want to see from 8th December to the 11th of January.

I should not be-able to click the previous and next buttons to see other dates.

Something similar to the image below.

Theres a few questions on creating custom views for full calendar on StackOverflow but a lot of them are using the old version which no longer are applicable for the latest version.

This answer creates a custom view with the latest version but unfortunately I was not able to tweak it to create my custom view.

Any help would be much appreciated.

• javascript
• jquery
• fullcalendar

Share Improve this question Follow edited May 23, 2017 at 12:15 CommunityBot 111 silver badge asked Dec 11, 2014 at 17:26 Oliver EvansOliver Evans 98922 gold badges2020 silver badges4545 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can create your own custom view in the fullcalendar.js file. I used the month view as a template (lines 7742 - 7813). Copy (or modify) the month view. Then you need to modify the code to work it as you want:

this.intervalStart = date.clone().stripTime().startOf('week');

This will set the start of the view to be the first day of the current week.

this.intervalEnd = this.intervalStart.clone().add(4, 'weeks');

This will set the end of the view to be the start day + 4 weeks.

I believe that is all you need to modify. Let me know if you run into issues, I might have missed something.

Also, This sounds very familiar to my current assignment ;)

I was looking for this too. Finally I ended up defining a new view:

views: {
    agendaFourWeeks: {
        type: 'month',
        duration: { weeks: 4},
        buttonText: '4 Weeks',
        fixedWeekCount : false
    }
}