How to add any event in fullcalendar on click of button?

To add an event to FullCalendar on click of a button, you need to handle the button click event and then use the FullCalendar API to add the event dynamically. FullCalendar provides a method called addEvent that allows you to add events programmatically.

Assuming you have already set up FullCalendar in your HTML and have a button with an ID "addEventButton," here's how you can add an event on button click using JavaScript and jQuery:

1. First, make sure you have included the FullCalendar library and jQuery in your project. You can do this by adding the following scripts to your HTML file:

htmlCopy code
<!-- FullCalendar CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" rel="stylesheet">

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- FullCalendar JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>

2. Initialize FullCalendar with your desired options and events in your JavaScript code. For example:

javascriptCopy code
$(document).ready(function() {
  // Initialize FullCalendar
  $('#calendar').fullCalendar({
    // Your FullCalendar options and event data here
    events: [
      {
        title: 'Event 1',
        start: '2023-07-30T10:00:00'
      },
      {
        title: 'Event 2',
        start: '2023-07-31T14:30:00'
      }
    ]
  });

  // Add event button click handler
  $('#addEventButton').click(function() {
    // Get a reference to the FullCalendar instance
    var calendar = $('#calendar').fullCalendar('getCalendar');

    // Add a new event dynamically
    calendar.addEvent({
      title: 'New Event',
      start: '2023-08-01T12:00:00',
      end: '2023-08-01T14:00:00'
    });
  });
});

In the above code, we use the click event handler on the button with the ID "addEventButton." When the button is clicked, we retrieve the FullCalendar instance using $('#calendar').fullCalendar('getCalendar'), and then use the addEvent method to add a new event to the calendar with the specified title, start, and end times.

Make sure to adjust the event data and other options based on your specific use case and requirements.

Remember to replace "calendar" with the appropriate ID or class of your FullCalendar container element.