全日历4天视图

Question

我正在使用jQuery完整日历，并坚持使用视图。我想要一个4天的视图，就像谷歌日历。这可能吗?

Answer 1

在Full Calendar的2.2.5+版本中，这种类型的视图定制要容易得多。

在你的日历中添加这样的内容，uiConfig现在应该能做到这一点了。

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

您可以从自定义视图的文档页面获得更多信息。

Answer 2

Fullcalendar只有3个视图，月，周和日视图实际上是5个议程周+议程日，例如在周视图中，如果您在这里设置此设置并将其设置为false，则周视图将只显示普通工作日5天。

Answer 3

我能够通过每次视图更改时重新呈现日历来实现这一点。这显然不是理想的，但它现在完成了工作(对我来说)。

我在同一个页面上使用多个日历，所以我使用这个函数来处理每个日历的呈现。

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();
    }
})

这些都是非常粗糙的，希望有人推荐编辑或替代解决方案。我正在为一个客户做这件事，所以我会带着我最后添加的任何编辑或进一步的评论回来。