FullCalendar (fullcalendar.io)

This procedure describes a FULL calendar with almost everything you need on functionality.

---------------------------------------------------------------------------------------------------------------

Website: https://fullcalendar.io

Needed software for running on linux:

https://github.com/fullcalendar/fullcalendar/releases/download/v5.6.0/fullcalendar-5.6.0.zip
https://code.jquery.com/jquery-3.6.0.min.js
https://momentjs.com/downloads/moment.min.js

 

#Create database (in mysql /mariadb)

#login

mysql -u root --password=<your password>

create database calendar;

#create the user with password cal2021.

CREATE USER 'calendar'@'localhost' IDENTIFIED BY 'cal2021';
GRANT SELECT,INSERT,UPDATE,DELETE ON calendar.* to 'calendar'@'localhost';

use calendar;

CREATE TABLE IF NOT EXISTS `tbl_events` (
`id` int(11) NOT NULL,
`date` datetime NOT NULL,
`title` varchar(255) COLLATE utf8_bin NOT NULL,
`start` datetime NOT NULL,
`end` datetime DEFAULT NULL
);

ALTER TABLE `tbl_events` ADD PRIMARY KEY (`id`);
ALTER TABLE `tbl_events` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=11;

# create the directory structure on the filesystem in a map (like: /var/www/calendar).

File: "index.php" => see below for the contents.

Directory: "lib"  containing the files:  jquery.min.js locales-all.js locales-all.min.js main.css main.js main.min.css main.min.js moment.min.js

Directory: "sql" containing the script for usage on the db: add-event.php add-event-start.php db.php delete-event.php edit-event.php edit-event-start.php fetch-event.php

 

 index.php

----------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Calendar
</title>
<link href='lib/main.css' rel='stylesheet' />
<script src='lib/main.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
// initialDate: '2021-04-08',
selectable: true,
nowIndicator: true,
weekNumbers: true,
weekNumberCalculation: 'ISO',
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
navLinks: true, // can click day/week names to navigate views
selectMirror: true,
locale: 'en-gb',

select: function(arg) {
var title = prompt('Event Title:');
var startt = prompt('Start Time:');
var endt = prompt('End Time:');
if (title) {
if (endt) {
calendar.addEvent({
title: title,
start: startt,
end: endt
});
$.ajax({
url: "sql/add-event.php",
data: 'title=' + title + '&start=' + startt + '&end=' + endt,
type: "POST",
success: function (data) {
displayMessage("Added Successfully");
}
});
} else {
calendar.addEvent({
title: title,
start: startt,
end: endt,
allDay: arg.allDay
});
$.ajax({
url: "sql/add-event-start.php",
data: 'title=' + title + '&start=' + startt,
type: "POST",
success: function (data) {
displayMessage("Added Successfully");
}
});
}
}
calendar.unselect()
},

eventClick: function(arg) {
if (confirm('Are you sure you want to delete this event? Or cancel and maybe change the event?')) {
var deleteMsg = confirm("Do you really want to delete?");
if (deleteMsg) {
$.ajax({
type: "POST",
url: "sql/delete-event.php",
data: "&id=" + arg.event.id,
success: function (response) {
if(parseInt(response) > 0) {
displayMessage("Deleted Successfully");
}
}
});
arg.event.remove();
}
} else {
var timeMsg = confirm("Do you want to change the event?");
if (timeMsg) {
arg.event.remove();
var title = prompt('Event Title:');
var startt = prompt('Start Time:');
var endt = prompt('End Time:');
$.ajax({
type: "POST",
url: "sql/edit-event.php",
data: "id=" + arg.event.id + '&title=' + title + '&start=' + startt + '&end=' + endt,
});
calendar.addEvent({
title: title,
start: startt,
end: endt
});
}
}
},

eventDrop: function(info) {
var moveMsg = confirm("Do you really want to move?");
if (moveMsg) {
if (info.event.end) {
var nstart = moment(info.event.start).format('Y-MM-DD HH:mm:ss');
var nend = moment(info.event.end).format('Y-MM-DD HH:mm:ss');
$.ajax({
type: "POST",
url: "sql/edit-event.php",
data: "id=" + info.event.id + '&title=' + info.event.title + '&start=' + nstart + '&end=' + nend,
});
} else {
var nstart = moment(info.event.start).format('Y-MM-DD HH:mm:ss');
$.ajax({
type: "POST",
url: "sql/edit-event-start.php",
data: "id=" + info.event.id + '&title=' + info.event.title + '&start=' + nstart,
});
}
modifyEvent(info.event);
} else {
info.revert();
}
},

eventMouseEnter: function (info) {
console.log("-------hover--------");
tooltip = '<div class="tooltiptopicevent" style="width:auto;height:auto;background:#feb811;position:absolute;z-index:10001;padding:10px 10px 10px 10px ; line-height: 200%;">' + 'id: ' + ': ' + info.event.id + ' - ' + 'title: ' + ': ' + info.event.title + '</br>' + 'start: ' + ': ' + info.event.start + '</br>' + 'end: ' + ': ' + info.event.end + '</div>';
console.log("-------"+tooltip);
$("body").append(tooltip);
$(this).mouseover(function (e) {
$(this).css('z-index', 10000);
$('.tooltiptopicevent').fadeIn('500');
$('.tooltiptopicevent').fadeTo('10', 1.9);
}).mousemove(function (e) {
$('.tooltiptopicevent').css('top', e.pageY + 10);
$('.tooltiptopicevent').css('left', e.pageX + 20);
});
},

eventMouseLeave: function (data, event, view) {
$(this).css('z-index', 8);
$('.tooltiptopicevent').remove();
},


headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},

events: "sql/fetch-event.php"

});
calendar.render();
});
</script>

<style>
body {
margin-top: 10px;
text-align: center;
font-size: 12px;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

#calendar {
width: 100vh;
margin: 0 auto;
}

.response {
height: 60px;
}

.success {
background: #cdf3cd;
padding: 10px 60px;
border: #c3e6c3 1px solid;
display: inline-block;
}
</style>

</head>
<body>
<div id='calendar'></div>
</body>
</html>

==============================================================================================

::::::::::::::
add-event.php
::::::::::::::
<?php
require_once "db.php";

$date = date('Y-m-d H:i:s');
$title = isset($_POST['title']) ? $_POST['title'] : "";
$start = isset($_POST['start']) ? $_POST['start'] : "";
$end = isset($_POST['end']) ? $_POST['end'] : "";

// $sqlInsert = "INSERT INTO tbl_events (title,start,end) VALUES ('".$title."','".$start."','".$end."')";
$sqlInsert = "INSERT INTO tbl_events (date,title,start,end) VALUES ('".$date."','".$title."','".$start."','".$end."')";

$result = mysqli_query($conn, $sqlInsert);

if (! $result) {
$result = mysqli_error($conn);
}
?>
::::::::::::::
add-event-start.php
::::::::::::::
<?php
require_once "db.php";

$date = date('Y-m-d H:i:s');
$title = isset($_POST['title']) ? $_POST['title'] : "";
$start = isset($_POST['start']) ? $_POST['start'] : "";

// $sqlInsert = "INSERT INTO tbl_events (title,start) VALUES ('".$title."','".$start."')";
$sqlInsert = "INSERT INTO tbl_events (date,title,start) VALUES ('".$date."','".$title."','".$start."')";

$result = mysqli_query($conn, $sqlInsert);

if (! $result) {
$result = mysqli_error($conn);
}
?>
::::::::::::::
db.php
::::::::::::::
<?php
$conn = mysqli_connect("localhost","calendar","cal2021","calendar") ;

if (!$conn)
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>
::::::::::::::
delete-event.php
::::::::::::::
<?php
require_once "db.php";

$id = $_POST['id'];
$sqlDelete = "DELETE from tbl_events WHERE id='".$id."'";

mysqli_query($conn, $sqlDelete);
echo mysqli_affected_rows($conn);

mysqli_close($conn);
?>
::::::::::::::
edit-event.php
::::::::::::::
<?php
require_once "db.php";

$id = $_POST['id'];
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];

$sqlUpdate = "UPDATE tbl_events SET title='".$title."' ,start='".$start."' ,end='".$end."' WHERE id='".$id."'";

$result = mysqli_query($conn, $sqlUpdate);

if (! $result) {
$result = mysqli_error($conn);
}

?>
::::::::::::::
edit-event-start.php
::::::::::::::
<?php
require_once "db.php";

$id = $_POST['id'];
$title = $_POST['title'];
$start = $_POST['start'];

$sqlUpdate = "UPDATE tbl_events SET title='".$title."' ,start='".$start."' WHERE id='".$id."'";

$result = mysqli_query($conn, $sqlUpdate);

if (! $result) {
$result = mysqli_error($conn);
}

?>
::::::::::::::
fetch-event.php
::::::::::::::
<?php
require_once "db.php";

$json = array();
$sqlQuery = "SELECT * FROM tbl_events ORDER BY id";

$result = mysqli_query($conn, $sqlQuery);
$eventArray = array();
while ($row = mysqli_fetch_assoc($result)) {
array_push($eventArray, $row);
}
mysqli_free_result($result);

mysqli_close($conn);
echo json_encode($eventArray);
?>