jQuery FullCalendar：自定义日历
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19127581/
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
FullCalendar: Customizing the calendar
提问by fireholster
I'm new to CSS and Jquery.
我是 CSS 和 Jquery 的新手。
I need help customizing a Full calendar display. Like changing border colors, calendar background, adding removing Month/Day/Week Views or button?
我需要帮助自定义完整日历显示。喜欢更改边框颜色、日历背景、添加删除月/日/周视图或按钮？
This is what I have to display the calendar:
这是我必须显示的日历：
//$('#calendar').fullCalendar()
var myCalendar = $('#calendar');
myCalendar.fullCalendar();
// Adding a Simple event
var myEvent = {
title: "New Event Added",
allDay: true,
start: new Date(),
end: new Date()
};
myCalendar.fullCalendar('renderEvent', myEvent);
回答by nomatteus
You should avoid editing fullcalendar.cssdirectly, so that you can update the CSS when the next versions are released.
您应该避免fullcalendar.css直接编辑，以便在下一个版本发布时更新 CSS。
To customize the look of FullCalendar, create a fullcalendar-custom.cssfile, which you can use to override specific styles. Just include this custom file somewhere after the fullcalendar.css, i.e.:
要自定义 FullCalendar 的外观，请创建一个fullcalendar-custom.css文件，您可以使用该文件覆盖特定样式。只需在 之后的某处包含此自定义文件fullcalendar.css，即：
<link href="../fullcalendar/fullcalendar.css" rel="stylesheet">
<link href="../fullcalendar/fullcalendar-custom.css" rel="stylesheet">
To figure out what styles you need to override, you should use inspect elementin your browser to figure out which classes need to be modified.
要确定需要覆盖哪些样式，您应该在浏览器中使用检查元素来确定需要修改哪些类。
You can remove/modify the "Month/Day/Week" view buttons when initializing FullCalendar.
您可以在初始化 FullCalendar 时删除/修改“月/日/周”视图按钮。
For example, you could do this:
例如，你可以这样做：
myCalendar.fullCalendar({
header: {
left: 'prev,next today title',
right: 'month,agendaDay'
}
});
For more info, see the documentation for headerand available views.
回答by Sharvari
You can find these lines in js
您可以在 js 中找到这些行
e.color = event.color;
e.backgroudColor = event.backgroudColor;
e.borderColor = event.borderColor;
e.textColor = event.textColor;
so, if you want to separate by color code you can use this
所以，如果你想用颜色代码分开，你可以使用这个
start: new Date(y, m, d+1, 15, 0),
end: new Date(y, m, d+1, 16, 45),
title: 'On vacations',
color: '#777777',
backgroundColor: '#eeeef0'
'
'
回答by Sharvari
you have to edit in fullcalendar.cssthere is .fc-headerclass you can edit that in your requirement.
你必须在fullcalendar.css那里编辑.fc-header你可以在你的要求中编辑它的课程。
