FullCalendar: Customizing the calendar

Question

I need help customizing a Full calendar display. Like changing border colors, calendar background, adding removing Month/Day/Week Views or button?

This is what I have to display the calendar:

//$('#calendar').fullCalendar()

var myCalendar = $('#calendar');
myCalendar.fullCalendar();

// Adding a Simple event
var myEvent = {
    title: "New Event Added",
    allDay: true,
    start: new Date(),
    end: new Date()
};        

myCalendar.fullCalendar('renderEvent', myEvent);

Answer 1

You should avoid editing fullcalendar.css directly, so that you can update the CSS when the next versions are released.

To customize the look of FullCalendar, create a fullcalendar-custom.css file, which you can use to override specific styles. Just include this custom file somewhere after the fullcalendar.css, i.e.:

<link href="../fullcalendar/fullcalendar.css" rel="stylesheet">
<link href="../fullcalendar/fullcalendar-custom.css" rel="stylesheet">

To figure out what styles you need to override, you should use inspect element in your browser to figure out which classes need to be modified.

---

You can remove/modify the "Month/Day/Week" view buttons when initializing FullCalendar.

For example, you could do this:

myCalendar.fullCalendar({
    header: {
        left: 'prev,next today title',
        right: 'month,agendaDay'
    }
});

For more info, see the documentation for header and available views.