如何自定义fullcalendar，一个javascript事件日历？

Question

我是 javascript 和网络开发的新手。

所以，我使用了 fullcalendar 库 (https://fullcalendar.io/) 来制作日历视图，我想知道我是否可以自己自定义它。

这是我的标记代码：

<div id="blueBackground">
    <div class="container">
        <div id='calendar'></div>
    </div>
</div>

所以，“blueBackground”是用于将整个网页背景更改为蓝色。 "container" 类，如果用于将 fullcalendar 调整为更合适的视图。

这是 Javascript 代码：

$(document).ready(function () {

    // page is now ready, initialize the calendar...
    $('#calendar').fullCalendar({
        // put your options and callbacks here       
    })

});

javascript 代码直接来自完整日历使用页面。(https://fullcalendar.io/docs/usage/)

那么，我该如何自定义呢？我是 javascript 的完整新手。我环顾了与此类似的其他问题，但没有任何结果。我不能让它工作。

提前谢谢你。

Answer 1

我目前也在使用全日历，以下是我所做的一些自定义：

$(document).ready(function () {
    // page is now ready, initialize the calendar...
    $('#calendar').fullCalendar({
        //Changing the header like this:
        header:
        {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

        //Lets us edit in the calendar
        editable: true,


        //When u select some space in the calendar do the following:
        select: function(start, end, allDay){
            //do something when space selected
        },


        //When u click on an event in the calendar do the following:
        eventClick: function(event, element) {
            //do something when event clicked
        },


        //When u drop an event in the calendar do the following:
        eventDrop: function(event, delta, revertFunc) {
            //do something when event is dropped at a new location
        },


        //When u resize an event in the calendar do the following:
        eventResize: function(event, delta, revertFunc) {
            //do something when event is resized
        },


        //Add some test events.
       events: [
       {
           title  : 'event1',
           start  : '2016-09-15'
       },
       {
           title  : 'event2',
           start  : '2016-09-15',
           end    : '2016-09-16'
       },
       {
           title  : 'event3',
           start  : '2016-09-15T12:30:00',
           allDay : false // will make the time show
       }
       ]
    })
});

在我的项目中，我还使用 PHP 和 MySQL 来存储和更改事件。除此之外，您可以做的几乎所有自定义都是listed in the docs.

编辑 #1 如何更改基本颜色设置等： 改变整个背景颜色：

<div id="calendar" style="background:#de1f1f;"></div>

更改事件背景颜色（当您拖动新事件时，背景不再是蓝色而是红色）：

$(document).ready(function() {
    $('#calendar').fullCalendar({
      eventBackgroundColor: "#de1f1f"
    });
});

更改事件颜色（不再是蓝色而是红色）：

$('#calendar').fullCalendar({
    events: [
        // my event data
    ],
    eventColor: "#de1f1f"
});

更改事件的边框颜色：

$('#calendar').fullCalendar({    
    eventBorderColor: "#de1f1f"
});

希望澄清您可以做的一些自定义:)