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

Question

I am new to javascript and web developing.

So, I used the fullcalendar library ( https://fullcalendar.io/ ) to make a calendar view, and I wonder if I am able to customize it myself.

This is my Markup code:

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

So, the "blueBackground" is for changing the entire webpage background to blue colour. The "container" class if for resizing the fullcalendar to a more appropiate view.

This is the Javascript code:

$(document).ready(function () {

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

});

The javascript code is straight from the fullcalendar Usage page.( https://fullcalendar.io/docs/usage/ )

So, how do I customize it? I am a complete newbie at javascript. I look around on the other questions similar to this but it bears no fruits. I can't make it work.

Thank you in advance.

Answer 1

I am currently also using fullcalendar and here is some of the customization i have made:

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

In my project I also use PHP and MySQL to store and change the events. Other than that almost all the customization's you can do are listed in the docs.

EDIT #1 How to change the basic color settings etc: Changing the whole background color:

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

Changing the event background color (when you drag a new event the background is not blue anymore but red):

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

Changing the event color (not blue anymore but red):

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

Changing the border color for the events:

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

Hope that clarified just some of the customization you can do :)