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

Question

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

所以，我使用了fullcalendar库（https://fullcalendar.io/）做了一个日历视图，不知道是否可以自己定制。

这是我的标记代码：

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

所以，"blueBackground"是为了将整个网页背景改为蓝色。 "container" class if 将全日历调整为更合适的视图。

这是 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

我目前也在使用全日历，这里是我所做的一些定制：

$(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"
});

希望这只是阐明了您可以执行的一些自定义:)

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

How to customize fullcalendar, a javascript event calendar?

javascript

css

fullcalendar

twitter-bootstrap

angular-ui-bootstrap