FullCalendar weeks of the month view

Question

I need to display the weeks of any month in a calendar. I am trying to figure out how could that be done using FullCalendar but I am having a hard time. Do I need to make a custom render? or is it a complete modification?

Thanks.

Link to a descriptive image of the desired result: https://i.stack.imgur.com/iPRB2.png

Take a look at [this](https://stackoverflow.com/a/2483785/1114171) answer to a similar question to get the number of weeks in the month, looking at the src of FullCalendar it looks like you could create your own 'view render plugin' — T I, Dec 29 '11 at 01:10
Thanks. I can get the needed numbers for the date and month (number of weeks, week of X event). I need help figuring out how to customize the render. And is that even feasible in FullCalendar? — user1120245, Dec 29 '11 at 01:47
Well it won't be easy but the code is nicely formatted maybe start around [here](https://github.com/arshaw/fullcalendar/blob/master/src/agenda/AgendaView.js) and it would seem that [this](https://github.com/arshaw/fullcalendar/blob/master/src/agenda/AgendaWeekView.js) is built on top of it. At the top of the file you will notice `fcView.month = MonthView;` that's important as it is how you load the view from options. — T I, Dec 29 '11 at 02:35
No problem just be aware there's some 'funky' stuff going on with a make file that generates the 'usable' fullcalender.js alternatively just edit that single file but it might get confusing to do so. — T I, Dec 29 '11 at 19:17

score 1 · Answer 1 · answered Aug 27 '12 at 08:23

I've gotten this working including when you click the arrow button (v1.5.3):

Add showWeekNumbers: false as part of the defaults.

Go to around line 2241 and close off the string concatentation. Then add this code:

if(j == 0 && calendar.options.showWeekNumbers) {
    s += "<div class='fc-week-number' />";
}

Then go to around line 2308 and in bodyCells.each add this code:

if(i % 7 == 0 && calendar.options.showWeekNumbers) {
    cell.find('div.fc-week-number').text(date.getWeek());
}

Then you just need to add this code to calculate the week:

Date.prototype.getWeek = function() {
    var onejan = new Date(this.getFullYear(),0,1);
    var week = Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
    return week;
}

If you then add the option showWeekNumbers: true this will work.

FullCalendar weeks of the month view

1 Answers1