6

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

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

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

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

编辑：

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

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

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

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

4

2 回答 2

3

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

于 2012-07-20T17:37:43.737 回答
3

我认为您可以在完整日历的最后一个版本（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();
    });
});
于 2019-10-21T15:25:45.337 回答