如何自定義 fullcalendar，一個 javascript 事件日歷？

Question

我是 javascript 和 web 開發的新手。

所以，我使用 fullcalendar 庫（ https://fullcalendar.io/ ）來制作日歷視圖，我想知道我是否能夠自己自定義它。

這是我的標記代碼：

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

因此，“blueBackground”用於將整個網頁背景更改為藍色。 “容器”類用於將完整日歷調整為更合適的視圖。

這是Javascript代碼：

$(document).ready(function () {

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

});

javascript 代碼直接來自 fullcalendar 使用頁面。（ https://fullcalendar.io/docs/usage/ ）

那么，如何自定義呢？ 我是 javascript 的完全新手。 我環顧其他與此類似的問題，但沒有結果。 我不能讓它工作。

先感謝您。

Answer 1

我目前也在使用 fullcalendar，這是我所做的一些自定義：

$(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 來存儲和更改事件。 除此之外，您可以執行的幾乎所有自定義操作都列在文檔中。

編輯 #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"
});

希望能澄清一些你可以做的定制:)