Odtnhj

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.

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