I am new to javascript and web developing.

So, I used the fullcalendar library (/) 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.(/)

So, how do I customize it? I am a plete 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.

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 plete 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.

• javascript
• css
• twitter-bootstrap
• fullcalendar
• angular-ui-bootstrap

• is the [angular-ui-bootstrap] tag really necessary here ? – svarog Commented Sep 14, 2016 at 7:31
• 1 Could you detail what you are trying to customize ? : calendar behavior ? colors ? – Manel Commented Sep 14, 2016 at 7:36
• @svarog hi, as I said I am new, I thought the angular-ui-bootstrap was required for the fullcalendar library – Jason Christopher Commented Sep 15, 2016 at 15:31
• @MartinH-Works hi Martin, I am trying to change its background colour, for an example. I want to change a lot of things but I'll start with its background colour. – Jason Christopher Commented Sep 15, 2016 at 15:32

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