Skip to content Skip to sidebar Skip to footer

Jquery FullCalendar 2 Week View Next Prev Buttons

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 t

Solution 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 becomes 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'
  });

Post a Comment for "Jquery FullCalendar 2 Week View Next Prev Buttons"