jquery - フルカレンダー 4 日表示

Question

jQuery Full Calendar を使用していて、ビューにこだわっています。Google カレンダーと同じように 4 日表示が必要です。これは可能ですか？

Answer 1

Full Calendar のバージョン 2.2.5 以降では、このタイプのビューのカスタマイズがはるかに簡単になります。

このようなものをカレンダー uiConfig に追加すると、このトリックが実行されるはずです。

views: {
  agendaFourDay: {
    type: 'agenda',
    duration: { days: 4 },
    buttonText: '4 day'
  },
  defaultView: 'agendaFourDay'
}

詳細については、Custom Viewsのドキュメント ページを参照してください。

Answer 2

ビューが変更されるたびにカレンダーを再レンダリングすることで、これを機能させることができました。これは明らかに理想的ではありませんが、今のところ (私にとって) 仕事は完了しています。

同じページで複数のカレンダーを操作しているので、この関数を作成して各カレンダーのレンダリングを処理します。

var calendarInit = function(calendar, start, defaultView){

    $('#' + calendar).fullCalendar('destroy')

    var dayNumber = start.getDay();
    var hiddenDays = []
    if (defaultView === 'agendaWeek'){
        dayNumber = dayNumber + 3
        if (dayNumber > 6) {
            dayNumber = dayNumber - 7
        }
        for (var i=0;i<3;i++) {
            dayNumber++
            if (dayNumber > 6) {
                dayNumber = dayNumber - 7
            }
            hiddenDays.push(dayNumber)
        }
    }


    var data = {
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultView: defaultView,
        editable: true,
        durationEditable: false,
        allDaySlot: false,
        events: '/' + calendar + '.json',
        firstDay: dayNumber,
        hiddenDays: hiddenDays,
        date: start.getDate(),
        month: start.getMonth()
    }


    $('#' + calendar).fullCalendar(data)


    var currentDate = $('#' + calendar).fullCalendar( 'getDate' )

    if (defaultView === 'agendaWeek'){
        $('.fc-button-next, .fc-button-prev, .fc-button-month').addClass('ignore')

        $('#' + calendar + ' .fc-button-next').click(function() {
            currentDate.setDate(currentDate.getDate()+4);
            calendarInit(calendar, isMaster, currentDate, defaultView)
        })
        $('#' + calendar + ' .fc-button-prev').click(function() {
            currentDate.setDate(currentDate.getDate()-4);
            calendarInit(calendar, isMaster, currentDate, defaultView)
        })
        $('.fc-button-month').click(function() {
            calendarInit(calendar, isMaster, start, 'month')
        })
    }

    $('.fc-button-agendaWeek').click(function() {
        calendarInit(calendar, isMaster, currentDate, 'agendaWeek')
    })
    $('.fc-button-agendaDay').click(function() {
        calendarInit(calendar, isMaster, currentDate, 'agendaDay')
    })

}
//render the initial calendar
calendarInit('confirmed', true, date, 'agendaWeek')

また、カレンダーが再レンダリングされる場合にカレンダーがボタンのクリックを無視するように、806 行目の fullcalendar.js ソースを編集する必要がありました。

.click(function() {
    if (!button.hasClass(tm + '-state-disabled') && !button.hasClass('ignore')) {
        buttonClick();
    }
})

これはすべて非常にハックであり、うまくいけば誰かが編集または代替ソリューションを推奨しています。私はクライアントのためにこれに取り組んでいるので、編集や追加のコメントがあれば戻ってきます.

Answer 3

Fullcalendar には 3 つのビューしかありません。月、週、日のビューは実際には 5 議題週 + 議題日です。たとえば、週ビューでは、ここでこの設定を使用して false に設定すると、週ビューには 5 日間の一般的な稼働日のみが表示されます。