jquery - FullCalendar：自定义日历

Question

我需要帮助自定义完整的日历显示。喜欢更改边框颜色、日历背景、添加删除月/日/周视图或按钮？

这是我必须显示的日历：

//$('#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);

score 14 · Accepted Answer

您应该避免fullcalendar.css直接编辑，以便在下一个版本发布时更新 CSS。

要自定义 FullCalendar 的外观，请创建一个fullcalendar-custom.css文件，您可以使用该文件覆盖特定样式。只需在之后的某处包含此自定义文件fullcalendar.css，即：

<link href="../fullcalendar/fullcalendar.css" rel="stylesheet">
<link href="../fullcalendar/fullcalendar-custom.css" rel="stylesheet">

要确定需要覆盖哪些样式，您应该在浏览器中使用检查元素来确定需要修改哪些类。

初始化 FullCalendar 时，您可以删除/修改“月/日/周”视图按钮。

例如，您可以这样做：

myCalendar.fullCalendar({
    header: {
        left: 'prev,next today title',
        right: 'month,agendaDay'
    }
});

有关详细信息，请参阅标题和可用视图的文档。

score 2 · Accepted Answer

你可以在js中找到这些行

 e.color = event.color;
 e.backgroudColor = event.backgroudColor;
 e.borderColor = event.borderColor;
 e.textColor = event.textColor;

所以，如果你想用颜色代码分开你可以使用这个

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'

'

score 0 · Accepted Answer

您必须在fullcalendar.css课程.fc-header 中进行编辑，您可以根据需要对其进行编辑。

jquery - FullCalendar：自定义日历

3 回答 3

Related

Reference