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

Question

我是JavaScript和Web開發新手。因此，我使用fullcalendar庫（https://fullcalendar.io/）來製作日曆視圖，並且我在想我是否可以自己定製它。

這是我的標記代碼：

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

因此，「blueBackground」是改變整個網頁背景藍色。如果要將fullcalendar調整爲更適合的視圖，則爲「容器」類。

這是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的存儲和改變事件。否則，幾乎所有你能做的定製是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" 
}); 

希望，只是澄清了一些你可以做定製的，現在包括如何風格吧:)