Question

我想根据我的需要调整它以填充日历中的事件，并将其月视图修改为类似iPhone上的日历（大型单元格在有事件时着色）。

如果我修改.fc-day-number css-class，我可能会把日期数字做得更大。对我来说真正的优点是理解脚本，以便我可以删除事件栏并将它们添加为日间单元格的背景颜色。（控制事件的颜色选项）

如果点击一天，它将在日历下创建一个事件列表，以点击并编辑它们，或者添加新事件以及与数据库交互的一堆其他事物。

如果有人感兴趣，我会很高兴，如果他/她帮助我; - ）

编辑：

我写道，我想把这些事件作为背景颜色添加到日子里。所以我试着理解arshaw的代码以及他如何将事件添加到日历的月视图中。

在函数daySegHTML(segs)的第4590行中，他编写事件div / html数据，但没有高度，只有宽度和水平位置。

他在函数daySegSetTops(segs, rowTops)的第4842行中执行了此操作，其中seg.top是日期单元格中的顶部，rowTops[seg.row]是日历div中的顶部，seg.row是周（0至5）。

使用seg.start.getDay() daySegHTML()，您可获得一周内的日期单元格。我用它来获取tr元素中的类名来添加事件。

Answer 1

看看这个。它是针对移动设备进行优化的版本！ https://github.com/JordanReiter/fullcalendar-mobile

Answer 2

我认为您可以使用Views和windowsResize在完整日历的最新版本（4.3.1）中实现此目的：

document.addEventListener('DOMContentLoaded', function() {
    var calendarTest = document.getElementById('calendar')
    /* Create function to initialize the correct view */
    function mobileCheck() {
        if (window.innerWidth >= 768 ) {
            return false;
        } else {
            return true;
        }
    };
    /* Start Full Calendar */
    var calendar = new FullCalendar.Calendar(calendarTest, {
            plugins: [ 'dayGrid' ],
            /* Create new view */
            views: {
                newView: {
                    /* Your responsive view */
                    type: 'dayGridWeek',
                    duration: { days: 5 },
                }
            },
            /* Choose view when initialize */
            defaultView: mobileCheck() ? "newView" : "dayGridWeek",
            /* Check if window resize and add the new view */
            windowResize: function(view) {
                if (window.innerWidth >= 768 ) {
                    calendar.changeView('dayGridWeek');
                    /* More code */
                } else {
                    calendar.changeView('responsiveView');
                    /* More code */
                }
            },
            editable: true,
        });
        calendar.render();
    });
});

将FullCalendar修改为移动版本

2 个答案: