Question

我正在使用jQuery Full Calendar并坚持使用视图。我想要一个像Google日历一样的4天视图。这可能吗？

Answer 1

对于完整日历2.2.5+版本，这种类型的视图自定义更容易。

在日历中添加类似这样的东西uiConfig现在应该这样做。

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

您可以从Custom Views上的文档页面获取有关此内容的更多信息。

Answer 2

Fullcalendar只有3个视图，月视图，星期视图和日视图，5个视图周日，例如在周视图中，如果您有此设置here并将其设置为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();
    }
})

这非常hacky，希望有人推荐编辑或替代解决方案。我正在为一个客户工作，所以我会回过头来添加任何编辑或进一步的评论。

Fullcalendar 4天视图

3 个答案: