Question

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

所以，我使用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 Usage页面。（https://fullcalendar.io/docs/usage/）

那么，我该如何自定义呢？我是一个完整的新手javascript。我环顾其他类似的问题，但它没有结果。我无法使它发挥作用。

提前谢谢。

Answer 1

我目前也在使用fullcalendar，这里有一些自定义：

$query9 = mysql_query("SELECT * FROM user_actions  WHERE timestamp BETWEEN date_sub(now(), interval 10 minute) AND date_sub(now(), interval 5 minute)");

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

编辑＃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
       }
       ]
    })
});

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

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

更改事件颜色（不再是蓝色，只有红色）：

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

更改事件的边框颜色：

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

希望澄清一些你可以做的定制：）

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

1 个答案: