FullCalendar with Event Modal Dialog
This example will use jQuery, jQuery UI, FullCalendar, and Moment.js.
FullCalendar is useful for booking appointments, event planning, project management, birthday, and any event in your dailly life.
#index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jquery Tutorial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: new Date(),
defaultView: 'month',
editable: true,
events: 'data.php',
selectable: true,
selectHelper: true,
select: function(start, end, allDay)
{
var start = moment(start).format('YYYY-MM-DD HH:mm:ss');
var end = moment(end).format('YYYY-MM-DD HH:mm:ss');
sessionStorage.setItem('start_date', start);
sessionStorage.setItem('end_date', end);
$("#btnModal").trigger("click");
},
});
$("#btnBook").click(function() {
var txtTitle = $("#txtTitle").val();
if (txtTitle)
{
$.ajax({
url: "insert_data.php",
type: "POST",
data: {title: txtTitle, start: sessionStorage.getItem('start_date'), end: sessionStorage.getItem('end_date')},
success: function(data)
{
//alert(data);
if (data == "success")
{
sessionStorage.setItem('start_date', "");
sessionStorage.setItem('end_date', "");
window.location.reload();
}
}
})
}
});
});
</script>
</head>
<body>
<div class="container">
<div id='calendar'></div>
<button style="display: none" type="button" id="btnModal" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Book</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="txtTitle">Title:</label>
<input type="text" name="txtTitle" class="form-control" id="txtTitle">
</div>
<button type="button" id="btnBook" class="btn btn-default">Book</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>#insert_data
<?php
$hostname = "localhost";
$username = "root";
$password = "";
$dbname = "travel";
// Create connection
$conn = mysqli_connect($hostname, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "INSERT INTO booking (title, start, end) VALUES('" . $_POST['title'] . "','" . $_POST['start'] . "','" . $_POST['end'] . "')";
if (mysqli_query($conn, $sql)) {
echo "success";
} else {
echo "error";
}
mysqli_close($conn);
?>#data.php
<?php
$hostname="localhost";
$username="root";
$password="";
$dbname="travel";
// Create connection
$conn = mysqli_connect($hostname, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "select * from booking ORDER BY id asc";
$result = mysqli_query($conn, $sql);
$book_array = array();
if (mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result)){
$book_array[] = array(
'id' => $row["id"],
'title' => $row["title"],
'start' => $row["start"],
'end' => $row["end"]
);
}
}
echo json_encode($book_array);
?>#boking.sql
-- phpMyAdmin SQL Dump
-- version 5.0.3
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Dec 07, 2020 at 01:36 AM
-- Server version: 10.4.14-MariaDB
-- PHP Version: 7.2.34
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Database: `travel`
--
-- --------------------------------------------------------
--
-- Table structure for table `booking`
--
CREATE TABLE `booking` (
`id` int(11) NOT NULL,
`title` varchar(30) NOT NULL,
`start` varchar(30) NOT NULL,
`end` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `booking`
--
INSERT INTO `booking` (`id`, `title`, `start`, `end`) VALUES
(1, 'Holidays ', '2020-12-01 00:00:00', '2020-12-02 00:00:00'),
(2, 'Birtday', '2020-12-01 00:00:00', '2020-12-02 00:00:00'),
(3, 'Moms Birthday', '2020-11-30 00:00:00', '2020-12-01 00:00:00'),
(4, 'Holidays ', '2020-12-08 00:00:00', '2020-12-09 00:00:00'),
(5, 'Moms Birthday', '2020-12-12 00:00:00', '2020-12-13 00:00:00');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `booking`
--
ALTER TABLE `booking`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `booking`
--
ALTER TABLE `booking`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Create database "travel" import to your phpmyadmin database