Можно ли отобразить два / три месяца?

Question

Можно ли отобразить два / три месяца?

Answer 1

Даже я хотел того же и сделал что-то вроде этого.

<table width="100%" cellpadding="5" cellspacing="5"> <tr> <td> &nbsp; </td> <td> <input type="button" id="myprevbutton" value="&nbsp;&#9668;&nbsp;" />&nbsp; <input type="button" id="mynextbutton" value="&nbsp;&#9658;&nbsp;" />&nbsp; </td> <td> &nbsp; </td> </tr> <tr> <td width="33%"> <div id='calendar0'> </div> </td> <td width="33%"> <div id='calendar1'> </div> </td> <td width="33%"> <div id='calendar2'> </div> </td> </tr> </table>

и в JS

$(document).ready(function() {

    var date = new Date();

    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar0').fullCalendar({
    header: {
            left: '',
            center: 'title',
            right: ''
        },
    month:m-1,
    theme: true,
    });
    $('#calendar2').fullCalendar({
    header: {
            left: '',
            center: 'title',
            right: ''
        },
    month:m+1,
    theme: true,
    });
    $('#calendar1').fullCalendar({
        header: {
            left: '',
            center: 'title',
            right: ''
        }, 
    theme: true,
    editable: false,
    });

    $('#myprevbutton').click(function() {
        $('#calendar0').fullCalendar('prev');
        $('#calendar1').fullCalendar('prev');
        $('#calendar2').fullCalendar('prev');
    });
    $('#mynextbutton').click(function() {
        $('#calendar0').fullCalendar('next');
        $('#calendar1').fullCalendar('next');
        $('#calendar2').fullCalendar('next');
    });



});

Answer 2

TL; DR
Cannon опубликовал измененный FullCalendar , который позволяет календарю охватывать более одного месяца, однако, похоже, что все эти месяцы переходят друг в друга и связан с более ранней версией FullCalendar.

Вот мой взгляд на 3 отдельных календаря, которые скрывают навигацию по двум календарям и синхронизируют месяцы в главном календаре: jsFiddle

Детали

Настройка 3 календарей - в моем случае основной календарь с меньшими календарями «смотреть назад / смотреть вперед» на следующие и предыдущие месяцы:

<div id='calendarPrev' style='width:50%'></div>
<div id='calendarCurrent'  style='width:100%'></div>
<div id='calendarNext' style='width:50%'></div>

СУШИТ инициализацию календаря функцией с опционально скрывающей навигацией:

function initCalendar($calendarDiv, displayDate, isMain) {
    $calendarDiv.fullCalendar({
        defaultDate: displayDate,
        header: {
            left: 'title',
            center: '',
            right: isMain 
                ? 'today prev,next' 
                : ''
        },
        events: ... eventdata callbacks etc
    });
}

В $(document).ready установите начальную дату трех календарей сегодня, но с интервалом ровно 1 месяц, скрывая навигацию по двум вторичным календарям. Затем подключите дополнительные обработчики событий к кнопкам next и prev основного календаря, которые синхронизируют 3 календаря:

$(document).ready(function() {
    initCalendar($('#calendarCurrent'), moment(), true);
    initCalendar($('#calendarPrev'), moment().subtract(1, 'months'), false);
    initCalendar($('#calendarNext'), moment().add(1, 'months'), false);

    $('body').on('click', 'button.fc-prev-button', function() {
        $('#calendarPrev').fullCalendar('prev');
        $('#calendarNext').fullCalendar('prev');
        // allow main calendar event to propogate
    });

    $('body').on('click', 'button.fc-next-button', function() {
        $('#calendarPrev').fullCalendar('next');
        $('#calendarNext').fullCalendar('next');
        // allow main calendar event to propogate
    });
}

Answer 3

Документация для FullCalendar должна помочь вам ответить на этот вопрос (что хорошо задокументировано, кстати).Я обнаружил, что this выполняет быстрый поиск вашего ответа.

EDIT: копая немного дальше, я нашел this , что указывает на то, что это не основная функция, но естьнекоторые вещи, которые вы можете сделать, чтобы имитировать то, что вы хотите.

Answer 4

Один из вариантов может быть, показать требуемое количество недель в представлении basicWeek. Отображается как вкладка с 2 месяцами.

$('#calendar').fullCalendar({

    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },
    views: {
        basicWeek: {
            type: 'basic',
            duration: {weeks: 8},
            rows: 8
        }
    }
}

Answer 5

Добавьте к первому, второму и третьему месяцам это:

defaultDate:'2016-07-01',

Answer 6

@ Джон Смит - я создал 3 календаря, и пока мне кажется, что он работает, но вместо того, чтобы перетаскивать события, мины просто сохраняют заголовок, начало и конец событий с возможностью их редактирования.