FullCalendar:自定义日历

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元素来确定需要修改哪些类.

初始化FullCalendar时,您可以删除/修改"月/日/周"视图按钮.

例如,您可以这样做:

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

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