FullCalendar: installation, configuration, and localization

Note relevant for FullCalendar version 1.5.*

Every day, we interact with calendars - checking dates, scheduling tasks, and managing events. When implementing similar functionality in a web interface, FullCalendar is a powerful solution.

FullCalendar is a jQuery plugin that supports AJAX, offers extensive functionality, is easy to configure, and supports multiple date and time formats. It is open-source and licensed under MIT or GPL Version 2.

Installing FullCalendar

To integrate FullCalendar, first, download the plugin. It requires jQuery and jQuery UI to function.

Once jQuery is included, load FullCalendar by adding the following files:

<link rel='stylesheet' type='text/css' href='jqfc/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='jqfc/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='jqfc/fullcalendar.min.js'></script>

To initialize FullCalendar within a specific element, use:

$('#calendar').fullCalendar({});

Now, FullCalendar is connected to your website! But its full potential extends beyond just adding a calendar.

Configuring FullCalendar

By default, FullCalendar starts weeks on Sunday. To change this to Monday, use the firstDay parameter:

$('#calendar').fullCalendar({ firstDay: 1 });

Additional useful parameters:

firstDay (Integer) - sets the first day of the week, set to 0 (Sunday) by default.
weekends (Boolean) - removes weekends from the calendar, set to true by default.
height (Integer) - sets the total height of the calendar in pixels.

You can also customize the header layout:

header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
}

Header button options:

title - displays the current month/week/day.
prev / next - moves one month/week/day back or forward.
prevYear / nextYear - moves one year back or forward.
today - jumps to the current date.
month - monthly view.
basicWeek - weekly view (basic layout).
basicDay - daily view (basic layout).
agendaWeek - weekly view with hourly breakdown.
agendaDay - daily view with hourly breakdown.

For a full list of options, refer to the official FullCalendar documentation.

Localizing FullCalendar

By default, FullCalendar displays content in English. To localize it, provide translated month names, day names, and button labels:

$(document).ready(function() {
    $('#calendar').fullCalendar({
        firstDay: 1,
        height: 200,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
        monthNamesShort: ['Янв.','Фев.','Март','Апр.','Май','Июнь','Июль','Авг.','Сент.','Окт.','Ноя.','Дек.'],
        dayNames: ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"],
        dayNamesShort: ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"],
        buttonText: {
            prev: "&nbsp;&#9668;&nbsp;",
            next: "&nbsp;&#9658;&nbsp;",
            prevYear: "&nbsp;&lt;&lt;&nbsp;",
            nextYear: "&nbsp;&gt;&gt;&nbsp;",
            today: "Сегодня",
            month: "Месяц",
            week: "Неделя",
            day: "День"
        }
    });
});

Breakdown of localization parameters:

monthNames - full month names.
monthNamesShort - abbreviated month names.
dayNames - full day names.
dayNamesShort - abbreviated day names.
buttonText - translated button labels.

Result: fully localized calendar

This simple localization method ensures that all month names, day names, and navigation buttons display in a new language.

FullCalendar translation

English writer Oscar Wilde once said: “Modern calendars poison the sweet simplicity of our lives by reminding us that each day is the anniversary of some perfectly uninteresting event.”

I propose the opposite - let’s make calendars useful and simplify our lives! 😊