Multiple FullCalendars on a single page

Question

I want to add multiple FullCalendars (selectable) on same page for scheduling different kinds of events and save information in database but looking the demo/sample code it seems I can add only single calendar per page as it is rendered by the <div id='calendar'></div>. Can you plesae let me know if there is way to acheive this, so that when user schedules events on different calendars on same page then calendar source/id can be identified?

Answer 1

No, the fullcalendar is not rendered simply by <div id='calendar'></div>

It is rendered by the .fullCalendar call you will make on that div.

<div id="calendar"></div>

$("#calendar").fullCalendar({
   // Options
}

Is how a FullCalendar is initialized. If you make another div and call it something else, it'll still work.

<div id="other-calendar"></div>

$("#other-calendar").fullCalendar({
   // Options
}

Since each calendar is created separately, you can define your handlers for each calendar.