Fullcalendar with Add Appointment Form Demo

To create a demo of FullCalendar with an appointment form, you would typically follow these steps:

Set up FullCalendar: First, you need to integrate FullCalendar into your project. This involves including the necessary CSS and JS files for FullCalendar in your HTML file.
Create an Appointment Form: You will create a form that users can fill out to add new appointments. This form can be a simple HTML form with fields for the appointment’s title, start time, end time, and any other relevant information.
Handle Form Submission: When the form is submitted, you will use JavaScript to capture the form data and add the new appointment to the calendar.
FullCalendar Event Adding: Use FullCalendar’s API to add the new event to the calendar dynamically.

Below is a basic example demonstrating how you could implement this. This example uses CDN for simplicity. Ensure you have internet access when testing it.

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.css' rel='stylesheet' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js'></script>
<script>

$(document).ready(function() {
  var calendar = $('#calendar').fullCalendar({
    editable: true,
    events: [],
    selectable: true,
    selectHelper: true,
    select: function(start, end) {
      var title = prompt('Event Title:');
      if (title) {
        var eventData = {
          title: title,
          start: start,
          end: end
        };
        $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
      }
      $('#calendar').fullCalendar('unselect');
    },
  });

  $('#addEvent').submit(function(e) {
    e.preventDefault();
    var title = $('#title').val();
    var start = $('#start').val();
    var end = $('#end').val();

    var eventData = {
      title: title,
      start: start,
      end: end,
    };

    $('#calendar').fullCalendar('renderEvent', eventData, true);
    this.reset();
  });
});

</script>
<style>

  body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }

</style>
</head>
<body>

  <div id='calendar'></div>
  <form id="addEvent">
    <input type="text" id="title" placeholder="Event Title" required>
    <input type="text" id="start" placeholder="Start Date YYYY-MM-DD" required>
    <input type="text" id="end" placeholder="End Date YYYY-MM-DD" required>
    <button type="submit">Add Event</button>
  </form>

</body>
</html>

This code provides a basic starting point. It initializes a calendar and allows users to add events through both a prompt (by selecting a date range on the calendar) and a form below the calendar. You’ll need to replace the placeholder values in the form inputs with actual date pickers for a better user experience and validate the form inputs either client-side or server-side. Also, remember to adapt paths to JS and CSS files according to your project’s structure or update the library versions as necessary.

Tags:Fullcalendar