jquery - FullCalendar:自定义日历

Question

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

这是我必须显示的日历:

//$('#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 时，您可以删除/修改“月/日/周” View 按钮。

例如，您可以这样做:

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

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