JavaScript Calendar Plugin FullCalendar with Month, Week, and Time Views

Calendars are very useful tools for event and schedule management. This article clearly explains how to implement a calendar using the JavaScript library “FullCalendar” that supports monthly, weekly, and time-based views.

Additionally, it introduces detailed code examples, CSS settings, and key implementation points so you can try it out right away.
By reading this article, you’ll acquire the skills to easily integrate a professional-looking calendar.

1. What is FullCalendar?

FullCalendar is an event calendar plugin that runs with JavaScript. Using this library, you can easily implement an interactive calendar with features similar to Google Calendar. Key features include:

• Supports switching between month, week, and time views
• Event addition, editing, and deletion
• Responsive design support
• Multilingual support (including Japanese)
• Integration with Google Calendar

In this article, we will not use Google Calendar integration, but instead create a calendar that runs with custom event data.

2. Environment Setup and Basic Configuration

To use FullCalendar, first add the following files to your project:

• main.css: Provides basic calendar styles
• main.js: Provides core FullCalendar functionality
• locales-all.js: Library for multilingual support

3. FullCalendar CSS Customization

FullCalendar’s default style is very simple, but you can also customize it to fit your own design. Load the main.css file.
Here’s an example of basic CSS settings:

<link href='main.css' rel='stylesheet' />
<style>
body {
  margin: 20px 10px;
  padding: 0;
  font-size: 14px;
  text-align: center;
}
#calendar {
  max-width: 1100px;
  margin: 0 auto;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 2em;
  padding-bottom: 20px;
}
</style>

4. FullCalendar Implementation in JavaScript

Load the main.js and locales-all.js files.
FullCalendar’s JavaScript settings are done using the FullCalendar.Calendar class.

The “locales-all.js” file allows localization of languages. Use FullCalendar.Calendar(target element ID, [options]) to configure the calendar.
You can configure text and settings for each date via options.

Let’s look at a code example:

<script src='main.js'></script>
<script src='locales-all.js'></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var initialLocaleCode = 'ja';
    var localeSelectorEl = document.getElementById('locale-selector');
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
      },
      initialDate: '2020-09-12',
      locale: initialLocaleCode,
      buttonIcons: false, // show the prev/next text
      weekNumbers: true,
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      dayMaxEvents: true, // allow "more" link when too many events
      events: [
        {
          title: 'All Day Event',
          start: '2020-09-01'
        },
        {
          title: 'Long Event',
          start: '2020-09-07',
          end: '2020-09-10'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2020-09-09T16:00:00'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2020-09-16T16:00:00'
        },
        {
          title: 'Conference',
          start: '2020-09-11',
          end: '2020-09-13'
        },
        {
          title: 'Meeting',
          start: '2020-09-12T10:30:00',
          end: '2020-09-12T12:30:00'
        },
        {
          title: 'Lunch',
          start: '2020-09-12T12:00:00'
        },
        {
          title: 'Meeting',
          start: '2020-09-12T14:30:00'
        },
        {
          title: 'Happy Hour',
          start: '2020-09-12T17:30:00'
        },
        {
          title: 'Dinner',
          start: '2020-09-12T20:00:00'
        },
        {
          title: 'Birthday Party',
          start: '2020-09-13T07:00:00'
        },
        {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2020-09-28'
        }
      ]
    });

    calendar.render();

    // build the locale selector's options
    calendar.getAvailableLocaleCodes().forEach(function(localeCode) {
      var optionEl = document.createElement('option');
      optionEl.value = localeCode;
      optionEl.selected = localeCode == initialLocaleCode;
      optionEl.innerText = localeCode;
      localeSelectorEl.appendChild(optionEl);
    });

    // when the selected option changes, dynamically change the calendar option
    localeSelectorEl.addEventListener('change', function() {
      if (this.value) {
        calendar.setOption('locale', this.value);
      }
    });

  });

</script>

This code creates a calendar that allows switching between monthly, weekly, and daily views.

5. Constructing the HTML Structure

Next, create the display area of the calendar using HTML.
Prepare a language selector dropdown with id=’locale-selector’ and the calendar display element with id=’calendar’.
Write it like this:

<h1>Demo Page Using the Calendar Plugin "Full Calendar" (Monthly View)</h1>

  <div id='top'>
    Locales:
    <select id='locale-selector'></select>
  </div>
  <br>
  <div id='calendar'></div>

6. Demo Pages Using FullCalendar: Monthly and Weekly + Time Views

You can access the demo pages below to experience FullCalendar in action:

Two demo versions are available: “Monthly View” and “Weekly + Time View”.

Demo Page Using the Calendar Plugin ‘Full Calendar’ (Monthly View)

Demo Page Using the Calendar Plugin ‘Full Calendar’ (Weekly + Time View)

7. Source: FullCalendar – JavaScript Event Calendar

Here is the source:
FullCalendar – JavaScript Event Calendar

8. Summary and Next Steps

FullCalendar is a flexible and feature-rich calendar plugin. Use this article as a reference to build your own event or schedule management tools. You can also achieve advanced features by integrating with APIs or databases.

As your next step, why not try implementing integration with Google Calendar or custom event features?

　
*Please use at your own discretion if reusing this content.
　Do not reuse the Google Analytics tag in the head tag of the demo page.