将FullCalendar修改为移动版本

Modify FullCalendar into a Mobile Version

本文关键字：移动 版本 修改 FullCalendar      更新时间：2024-01-02

我想根据我的需要对其进行调整，用事件填充日历，并将其月视图修改为类似于IPhone上的日历（大单元格在有事件时会着色）。

如果我修改.fc-day-numberCss类，我可能会使日期数字变大。对我来说，真正的任务是理解脚本，这样我就可以删除事件栏，并将其添加为当天单元格的背景色。（控制事件的颜色选项）

如果单击某一天，它将在日历下创建一个事件列表，以便单击并编辑它们，或者添加新的事件和与数据库交互的一系列其他事情。

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

编辑：

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

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

他在函数daySegSetTops(segs, rowTops)的行4842中这样做，其中seg.top是daycell中的顶部，rowTops[seg.row]是Calendardiv中的顶部并且seg.row是Weeklow（0到5）。

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

我认为您可以在完整日历的上一版本（4.3.1）中使用Views和windowsResize来实现这一点：

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

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

相关文章：