Wednesday, July 24, 2024

how to add multiple Fullcalendar in single html page?

how to add multiple Fullcalendar in single html page

To add multiple FullCalendar instances on a single HTML page, you will need to ensure each calendar has its own unique container element. Here’s a step-by-step guide to achieve this:

  1. Include FullCalendar Library: Make sure you’ve included FullCalendar’s CSS and JS files in your HTML page. You can add them via CDN or by downloading the files and including them locally.
  2. HTML Structure: Create separate container elements (usually <div> elements) for each calendar you want to display on the page. Make sure each container has a unique id.
  3. Initialize FullCalendar: For each calendar, initialize a new FullCalendar instance targeting its specific container id. You can customize each calendar independently within its initialization script.

Here’s a simple example demonstrating how to implement two FullCalendar instances on one page:


<!DOCTYPE html>
  <link href='' rel='stylesheet' />
  <script src=''></script>
  <script src=''></script>
    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl1 = document.getElementById('calendar1');
      var calendar1 = new FullCalendar.Calendar(calendarEl1, {
        initialView: 'dayGridMonth'
        // customize your calendar1 options

      var calendarEl2 = document.getElementById('calendar2');
      var calendar2 = new FullCalendar.Calendar(calendarEl2, {
        initialView: 'dayGridMonth'
        // customize your calendar2 options

  <div id='calendar1'></div>
  <div id='calendar2'></div>


Key Points:

  • Unique Container IDs: calendar1 and calendar2 div elements serve as containers for the two calendars.
  • JavaScript Initialization: The script section includes document-ready function that initializes each calendar with its respective container by ID. You can configure each instance (calendar1, calendar2) with different options as needed.
  • FullCalendar Options: In the initialization of each FullCalendar instance, set the initialView or any other options according to your requirements. FullCalendar offers a wide range of customizable options including views, event sources, callbacks, etc.

Remember, you can add as many calendars as you want following this pattern, just ensure each has its own container and initialization script.

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.