Categories

Monday, May 20, 2024
#919814419350 therichposts@gmail.com
FullCalendarHtmlJavascript

Fullcalendar with Add Appointment Form Demo

Fullcalendar with Add Appointment Form Demo

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

  1. 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.
  2. 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.
  3. 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.
  4. 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.

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. 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.