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:

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

HTML

<!DOCTYPE html>
<html>
<head>
  <link href='https://fullcalendar.io/releases/fullcalendar/5.0.0/main.min.css' rel='stylesheet' />
  <script src='https://fullcalendar.io/releases/fullcalendar/5.0.0/main.min.js'></script>
  <script src='https://fullcalendar.io/releases/fullcalendar/5.0.0/locales-all.min.js'></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl1 = document.getElementById('calendar1');
      var calendar1 = new FullCalendar.Calendar(calendarEl1, {
        initialView: 'dayGridMonth'
        // customize your calendar1 options
      });
      calendar1.render();

      var calendarEl2 = document.getElementById('calendar2');
      var calendar2 = new FullCalendar.Calendar(calendarEl2, {
        initialView: 'dayGridMonth'
        // customize your calendar2 options
      });
      calendar2.render();
    });
  </script>
</head>
<body>

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

</body>
</html>

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.

Tags:Fullcalendar