Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display 2 weeks in jQuery FullCalendar

Been looking around for a way to display only the current week and the next week in the month view for FullCalendar. So far it looks like it was suggested as a feature for an upcoming version, but in the meantime, has anyone been able to hack it in?

UPDATE

Thanks to Doomsday's suggestion, I was able to create a custom view that shows 2 weeks, starting on the current week. You are changing the visible start date to today's date and changing the row count to 2.

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

// exports
t.render = render;


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



function render(date, delta) {
    if (delta) {
        addMonths(date, delta);
        date.setDate(1);
    }
    var start = cloneDate(date, true);
    start.setDate(1);
    var end = addMonths(cloneDate(start), 1);

    //var visStart = cloneDate(start);
    var visStart = date;

    var visEnd = cloneDate(end);
    var firstDay = opt('firstDay');
    var nwe = opt('weekends') ? 0 : 1;
    if (nwe) {
        skipWeekend(visStart);
        skipWeekend(visEnd, -1, true);
    }

    addDays(visStart, -((visStart.getDay() - Math.max(firstDay, nwe) + 7) % 7));
    addDays(visEnd, (7 - visEnd.getDay() + Math.max(firstDay, nwe)) % 7);
    var rowCnt = Math.round((visEnd - visStart) / (DAY_MS * 7));

    if (opt('weekMode') == 'fixed') {
        addDays(visEnd, (6 - rowCnt) * 7);
        //rowCnt = 6;
        rowCnt = 2;
    }
    t.title = formatDate(start, opt('titleFormat'));
    t.start = start;
    t.end = end;
    t.visStart = visStart;
    t.visEnd = visEnd;
    renderBasic(6, rowCnt, nwe ? 5 : 7, true);
}
}
like image 704
roflwaffle Avatar asked Jun 21 '11 04:06

roflwaffle


3 Answers

Answer will be to display two calendars, one with the current week, and another with the week after.

I suggest you to hack what I've done on this fiddle: http://jsfiddle.net/Doomsday/M3YP3/1/

like image 150
Doomsday Avatar answered Nov 14 '22 20:11

Doomsday


The proper answer for fullCalendar 2 is to modify the basicWeek view as explained in the documentation:

    $('#calendar').fullCalendar({
        views: {
            basicWeek: {
                type: 'basic',
                duration: {weeks: 2},
                rows: 2
            }
        }
    }

There. Simple :)

like image 32
Nicolas Connault Avatar answered Nov 14 '22 20:11

Nicolas Connault


please see here for further information on this fullcalendar custom view

Jquery FullCalendar 2 week view Next prev buttons

like image 2
Nick B. Avatar answered Nov 14 '22 21:11

Nick B.