将 FullCalendar 修改为移动版答案

【问题标题】：Modify FullCalendar into a Mobile Version将 FullCalendar 修改为移动版
【发布时间】：2012-07-20 11:48:15
【问题描述】：

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

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

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

如果有人感兴趣，如果他/她能帮我一把，我会很高兴;-)

编辑：

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

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

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

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

【问题讨论】：

标签： javascript jquery fullcalendar

【解决方案1】：

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

【讨论】：

我看不到他在那里改变了什么......这不是我想做的。事件栏在 iPhone 上真的很不方便。如前所述，我想要一个像日历这样的 iPhone，可以轻松选择一天并进入一天视图。
您是否有关于您的移动版本的演示？

【解决方案2】：

我认为你可以在完整日历的最后一个版本（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();
    });
});

【讨论】：