javascript 修改 FullCalendar 为手机版
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11578738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modify FullCalendar into a Mobile Version
提问by LightMonk
I want to tweak it to my needs to fill the calendar with events and have its monthview modified into something like the Calendar on an IPhone (big cells that are colored when they have events).
我想根据我的需要调整它，用事件填充日历，并将其月视图修改为类似于 iPhone 上的日历（大单元格在有事件时着色）。
If I modify the .fc-day-numbercss-class, I'll probably make the day numbers bigger. The real deal for me is to understand the script so that I can remove the event-bars and add them as background colors of the day-cells. (Controled over the color option of the event)
如果我修改.fc-day-numbercss-class，我可能会使天数更大。对我来说真正的交易是理解脚本，以便我可以删除事件栏并将它们添加为日单元的背景颜色。（控制事件的颜色选项）
If a day is clicked it will create a list of events under the calendar to click onto and edit them or add new events and a bunch of other things which are interacting with the database.
如果单击某一天，它将在日历下创建一个事件列表，以单击并编辑它们或添加新事件以及与数据库交互的一系列其他事物。
If someone is interested I would be happy if he/she gets me a helping hand ;-)
如果有人感兴趣，如果他/她帮我一把，我会很高兴;-)
EDIT:
编辑：
I wrote that I wanted to add the events as background color to the days. So I tried to understand the code from arshaw and how he adds the event to the month view of the calender.
我写道，我想将事件作为背景颜色添加到这些日子。所以我试图了解arshaw的代码以及他如何将事件添加到日历的月视图中。
In row 4590 in the function daySegHTML(segs)he writes the event div/html data but without the height, only the width and the horizontal position.
在函数的第 4590 行中，daySegHTML(segs)他写入了事件 div/html 数据，但没有高度，只有宽度和水平位置。
He does that in row 4842 in the function daySegSetTops(segs, rowTops)where seg.topis the top in the daycell, rowTops[seg.row]is the top in the calender div and seg.rowis the weekrow (0 to 5).
他在第 4842 行的函数中执行此操作，daySegSetTops(segs, rowTops)其中seg.top是日单元格的顶部，rowTops[seg.row]是日历 div 的顶部，seg.row是周（0 到 5）。
With seg.start.getDay()by daySegHTML()you get the day cell in a week row. I used that to get the classname in the trelement to add the event.
随着seg.start.getDay()由daySegHTML()你在一周内连续一天的细胞。我用它来获取tr元素中的类名以添加事件。
回答by Juan Gonzales
Take a look at this. It is a version that is optimized for mobile devices! https://github.com/JordanReiter/fullcalendar-mobile
看看这个。这是一个针对移动设备优化的版本！ https://github.com/JordanReiter/fullcalendar-mobile
回答by Simon Botero
I think that you can use Views and windowsResize to achieve this in the last version of full calendar (4.3.1):
我认为您可以在完整日历的最新版本（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();
});
});
