I have implemented the 2 week view outlined here and I was wondering if someone can tell me how/where to change the prev/next buttons to move the calendar only 2 weeks instead of to the next month? Not sure where to update the fullcalendar.js.

I have implemented the 2 week view outlined here and I was wondering if someone can tell me how/where to change the prev/next buttons to move the calendar only 2 weeks instead of to the next month? Not sure where to update the fullcalendar.js.

• javascript
• jquery
• fullcalendar

• Check out this answer here stackoverflow./questions/2219381/… – jeffreyhamby Commented Mar 14, 2012 at 19:19
• @jeffreyhamby This isn't exactly what i'm looking for. The calendar updates when clicked, but its doing the default change which is by month. My view is for two weeks and i need to change two weeks instead of going to the first week of the next month. – Nick B. Commented Mar 15, 2012 at 14:57
• you have to change the JS code or add code to do so. Please look into fullcalendar.js . When you click on next/prev fullcalendar code checks the current view and moves according to the view. Use firebug or proper tool and check using break points. Or study the fullcalendar.js – Rohith Nair Commented Mar 18, 2012 at 22:42
• @Admirer, Yes that is correct. I was hoping to see if anyone knew exactly where since it seems others have implemented the view i had. I am still looking into it as well as other things and will post an answer if I find one before someone else. Thanks – Nick B. Commented Mar 19, 2012 at 12:30

1 Answer 1

Figured it out. The problem was that the solution i used was based off the month view when it probably should have been based off of the week view.

first, make sure all the information for the view is listed in the defualts

// time formats
titleFormat: {
    month: 'MMMM yyyy',
    twoweek: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}",
    week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}",
    day: 'dddd, MMM d, yyyy'
},
columnFormat: {
    month: 'ddd',
    twoweek: 'ddd',
    week: 'ddd M/d',
    day: 'dddd M/d'
},

.

buttonText: {
    prev: ' ◄ ',
    next: ' ► ',
    prevYear: ' << ',
    nextYear: ' >> ',
    today: 'today',
    month: 'month',
    twoweek: '2 week',
    week: 'week',
    day: 'day',
    resourceDay: 'designers'
},

and here is my code for the 2 week view

fcViews.twoweek = TwoWeeksView;

function TwoWeeksView(element, calendar) {
var t = this;

// exports
t.render = render;


// imports
BasicView.call(t, element, calendar, 'twoweek');
var opt = t.opt;
var renderBasic = t.renderBasic;
var formatDates = calendar.formatDates;



function render(date, delta) {
    if (delta) {
        addDays(date, delta*7);
    }
    var start = addDays(cloneDate(date), -((date.getDay() - opt('firstDay') + 7) % 7));
    var end = addDays(cloneDate(start), 7*2);
    var visStart = cloneDate(start);
    var visEnd = cloneDate(end);
    var weekends = opt('weekends');
    if (!weekends) {
        skipWeekend(visStart);
        skipWeekend(visEnd, -1, true);
    }

    t.title = formatDates(
        visStart, 
        addDays(cloneDate(visEnd), -1), 
        opt('titleFormat')
    );
    t.start = start;
    t.end = end;
    t.visStart = visStart;
    t.visEnd = visEnd;
    renderBasic(2, 2, weekends ? 7 : 5, true);
}

}

the key difference here is the last line: renderBasic(2,2,weekends ? 7 : 5, true);

if you dont update the information about the view in defaults, a parameter in formatdates is undefined and there are issues. There are some differences between the week view and the month view that make basing the two week view of the week view instead better. It bees somewhat of a mix between the two. Hope this helps anyone who is looking for the full 2 week view fix.

call like this:

 $('#calendar').fullCalendar({
        header: {
            left:'prev, next',
            center: 'title',
            right: 'twoweek'
        },
        defaultView: 'twoweek',
        weekMode:'fixed'
  });