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.