Question

我是CSS和Jquery的新手。

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

这是我必须显示的日历：

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

Answer 1

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

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

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

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

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

例如，你可以这样做：

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

有关详细信息，请参阅header和available views的文档。

Answer 2

您可以在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'

Answer 3

您必须在fullcalendar.css中修改.fc-header课程，您可以根据自己的要求进行编辑。

FullCalendar：自定义日历

3 个答案: