jquery - 全日历 4 天视图

Question

我正在使用 jQuery Full Calendar 并坚持使用视图。我想要一个 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 个议程周 + 议程日，例如在周视图中，如果您在此处有此设置并将其设置为 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，希望有人推荐了编辑或替代解决方案。我正在为一个客户做这件事，所以我会带着我最终添加的任何编辑或进一步的评论回来。