CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapfullcalendarangular-ui-bootstrap
Jason Christopher
Jason Christopher

Reputation: 245

How to customize fullcalendar, a javascript event calendar?

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.

Upvotes: 5

Views: 8898

Answers (1)

jonaslagoni
jonaslagoni

Reputation: 818

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 :)

Upvotes: 3

Related Questions