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.x.x/fullcalendar-5.x.x.zip
https://code.jquery.com/jquery-3.6.0.min.js
https://github.com/moment/moment/archive/refs/heads/master.zip => extract the files: moment.min.js & moment.min.js.map
https://cdn.jsdelivr.net/npm/@fullcalendar/rrule@5.x.x/main.global.min.js

Via website https://fullcalendar.io/docs/rrule-plugin (v.2.7.x) to: https://jakubroztocil.github.io/rrule/dist/es5/rrule.min.js

 

In the lib directory the next files should be there (cp -p jquery-3.6.0.min.js jquery.min.js):

locales => from default fullcalendar-<version>.zip
locales-all.js => from default fullcalendar-<version>.zip
locales-all.min.js => from default fullcalendar-<version>.zip
main.css => from default fullcalendar-<version>.zip
main.js => from default fullcalendar-<version>.zip
main.min.css => from default fullcalendar-<version>.zip
main.min.js => from default fullcalendar-<version>.zip

jquery-3.6.0.min.js => downloaded
jquery.min.js => copied from jquery-3.6.0.min.js
main.global.min.js => downloaded
moment.min.js => downloaded
moment.min.js.map => downloaded
rrule.min.js => downloaded

 

#Create database (in mysql /mariadb)

#login

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

#Create database


create database calendar;
CREATE USER 'calendar'@'localhost' IDENTIFIED BY '<PASSWORD>';
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,
  `archive` varchar(10) NOT NULL,
  `sqledit` varchar(10) DEFAULT NULL,
  `title` varchar(255) COLLATE utf8_bin NOT NULL,
  `start` datetime NOT NULL,
  `end` datetime DEFAULT NULL,
  `backgroundColor` varchar(10) DEFAULT NULL,
  `allDay` varchar(10) DEFAULT NULL,
  `rrule` varchar(255) 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;

MariaDB [calendar]> show tables;
+--------------------+
| Tables_in_calendar |
+--------------------+
| tbl_events         |
+--------------------+
1 row in set (0.001 sec)

MariaDB [calendar]> describe tbl_events;
+-----------------+--------------+------+-----+---------+----------------+
| Field           | Type         | Null | Key | Default | Extra          |
+-----------------+--------------+------+-----+---------+----------------+
| id              | int(11)      | NO   | PRI | NULL    | auto_increment |
| date            | datetime     | NO   |     | NULL    |                |
| archive         | varchar(10)  | NO   |     | NULL    |                |
| title           | varchar(255) | NO   |     | NULL    |                |
| start           | datetime     | NO   |     | NULL    |                |
| end             | datetime     | YES  |     | NULL    |                |
| backgroundColor | varchar(10)  | YES  |     | NULL    |                |
| allDay          | varchar(10)  | YES  |     | NULL    |                |
| rrule           | varchar(255) | YES  |     | NULL    |                |
+-----------------+--------------+------+-----+---------+----------------+
9 rows in set (0.003 sec)

 

# 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">
        <link rel="shortcut icon" href="/images/favicon.ico">
        <link rel="stylesheet" href="/stylesheets/base.css">
        <link rel="stylesheet" href="/stylesheets/skeleton.css">
        <link rel="stylesheet" href="/stylesheets/layout.css">
        <title>
                Calendar
        </title>
        <link href='lib/main.css' rel='stylesheet' />
        <script src='lib/jquery.min.js'></script>
        <script src='lib/moment.min.js'></script>
        <script src='lib/rrule.min.js'></script>
        <script src='lib/main.js'></script>
        <script src='lib/main.global.min.js'></script>

        <script>
        document.addEventListener('DOMContentLoaded', function() {
                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                        // initialView: 'dayGridMonth',
                        initialView: window.innerWidth >= 992 ? 'dayGridMonth' : 'listWeek',
                        // 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',
                        eventTimeFormat: { // like '14:30:00'
                                hour: '2-digit',
                                minute: '2-digit',
                                meridiem: false
                        },
                        displayEventEnd: true,

                        select: function(arg) {
//                              var title = prompt('Event Title: \njust a name');
//                              var allDay = prompt('All Day: \ntrue or something');
//                              var startt = prompt('Start Time: \nexample: 2021-03-23 22:01:30 or only date');
//                              var endt = prompt('Optional End Time: \nexample: 2021-03-23 23:41:30');
//                              var rrulet = prompt('Optional Recurring Event: \nexample: DTSTART:20210201T103000\nRRULE:FREQ=WEEKLY;INTERVAL=5;UNTIL=20210601;BYDAY=MO,FR');

                                var seltit = document.getElementById("etit");
                                var title = seltit.value;
                                if (title) {
                                        var seladay = document.getElementById("aday");
                                        var allDay = seladay.value;
                                        var seled = document.getElementById('optionvals');
                                        var editable = seled.value;
                                        var sqledit = seled.value;
                                        var selopt = document.getElementById("sttime");
                                        var startt = selopt.value;
                                        var selot = document.getElementById("entime");
                                        var endt = selot.value;
                                        var selrrul = document.getElementById("errul");
                                        var rrulet = selrrul.value;
                                        // document.getElementById("myForm").reset();
                                } else {
                                        var addEvent = prompt('Add an Event: First fill in the details at the [Specify Event]-button below and then click somewhere on the calendar..');
                                }

                                if (allDay == "true") {
                                        allDay = "true";
                                } else {
                                        allDay = "";
                                }

                                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 + '&allDay=' + allDay,
                                                        type: "POST",
                                                        success: function (data) {
                                                                displayMessage("Added Successfully");
                                                        }
                                                });
                                        } else {
                                                if (rrulet) {
                                                        calendar.addEvent({
                                                                title: title,
                                                                start: startt,
                                                                end: endt
                                                        });
                                                        $.ajax({
                                                                url: "sql/add-event-rrule.php",
                                                                data: 'title=' + title + '&start=' + startt + '&allDay=' + allDay + '&rrule=' + rrulet + '&editable=' + sqledit,
                                                                type: "POST",
                                                                success: function (data) {
                                                                        displayMessage("Added Successfully");
                                                                }
                                                        });
                                                } else {
                                                        calendar.addEvent({
                                                                title: title,
                                                                start: startt,
                                                                end: endt,
                                                                allDay: true
                                                        });
                                                        $.ajax({
                                                                url: "sql/add-event-start.php",
                                                                data: 'title=' + title + '&start=' + startt + '&allDay=true',
                                                                type: "POST",
                                                                success: function (data) {
                                                                        displayMessage("Added Successfully");
                                                                }
                                                        });
                                                }
                                        }
                                        document.getElementById("myForm").reset();
                                }
                                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: \njust a name');
//                                              var allDay = prompt('All Day: \ntrue or something');
//                                              var startt = prompt('Start Time: \nexample: 2021-03-23 22:01:30 or only date');
//                                              var endt = prompt('Optional End Time: \nexample: 2021-03-23 23:41:30');
//                                              var rrulet = prompt('Optional Recurring Event: \nexample: DTSTART:20210201T103000\nRRULE:FREQ=WEEKLY;INTERVAL=5;UNTIL=20210601;BYDAY=MO,FR');

                                                var seltit = document.getElementById("etit");
                                                var title = seltit.value;
                                                if (title) {
                                                        arg.event.remove();
                                                        var seladay = document.getElementById("aday");
                                                        var allDay = seladay.value;
                                                        var seled = document.getElementById('optionvals');
                                                        var editable = seled.value;
                                                        var sqledit = seled.value;
                                                        var selopt = document.getElementById("sttime");
                                                        var startt = selopt.value;
                                                        var selot = document.getElementById("entime");
                                                        var endt = selot.value;
                                                        var selrrul = document.getElementById("errul");
                                                        var rrulet = selrrul.value;
                                                } else {
                                                        var changeEvent = prompt('Change an Event: First fill in the details at the [Specify Event]-button below and then click on the Event..');
                                                }

                                                if (allDay == "true") {
                                                        allDay = "true";
                                                } else {
                                                        allDay = "";
                                                }
                                                if (title) {
                                                        if (endt) {
                                                                calendar.addEvent({
                                                                        title: title,
                                                                        start: startt,
                                                                        end: endt
                                                                });
                                                                $.ajax({
                                                                        type: "POST",
                                                                        url: "sql/edit-event.php",
                                                                        data: "id=" + arg.event.id + '&title=' + title + '&start=' + startt + '&end=' + endt + '&allDay=' + allDay,
                                                                        success: function (data) {
                                                                                displayMessage("Change Successfully");
                                                                        }
                                                                });
                                                        } else {
                                                                if (rrulet) {
                                                                        calendar.addEvent({
                                                                                title: title,
                                                                                start: startt,
                                                                                end: endt
                                                                        });
                                                                        $.ajax({
                                                                                type: "POST",
                                                                                url: "sql/edit-event-rrule.php",
                                                                                data: "id=" + arg.event.id + '&title=' + title + '&start=' + startt + '&allDay=' + allDay + '&rrule=' + rrulet,
                                                                                success: function (data) {
                                                                                        displayMessage("Change Successfully");
                                                                                }
                                                                        });
                                                                } else {
                                                                        calendar.addEvent({
                                                                                title: title,
                                                                                start: startt,
                                                                                end: endt,
                                                                                allDay: true
                                                                        });
                                                                        $.ajax({
                                                                                type: "POST",
                                                                                url: "sql/edit-event-start.php",
                                                                                data: "id=" + arg.event.id + '&title=' + title + '&start=' + startt + '&allDay=true',
                                                                                success: function (data) {
                                                                                        displayMessage("Change Successfully");
                                                                                }
                                                                        });
                                                                }
                                                        }
                                                        document.getElementById("myForm").reset();
                                                }
                                                calendar.unselect();
                                        }
                                }
                        },

                        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 + '&allDay=' + info.event.allDay,
                                                        success: function (data) {
                                                                displayMessage("Drop Successfully");
                                                        }
                                                });
                                        } else {
                                                if (info.event._def.recurringDef) {
                                                        info.revert();
                                                } 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 + '&allDay=' + info.event.allDay,
                                                                success: function (data) {
                                                                        displayMessage("Drop Successfully");
                                                                }
                                                        });
                                                }
                                        }
                                        modifyEvent(info.event);
                                } else {
                                        info.revert();
                                }
                        },

                        eventResize: function(info) {
                                var endtimeMsg = confirm("Do you really want to change the end time?");
                                if (endtimeMsg) {
                                        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 + '&allDay=' + info.event.allDay,
                                                        success: function (data) {
                                                                displayMessage("Change end time Successfully");
                                                        }
                                                });
                                        }
                                        modifyEvent(info.event);
                                }
                                        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 + ' - ' + 'editable: ' + ': ' + info.event.sqledit + ' -  ' + 'title: ' + ': ' + info.event.title + '</br>' + 'start: ' + ': ' + info.event.start + '</br>' + 'end: ' + ': ' + info.event.end + '</br>' + 'allDay: ' + ': ' + info.event.allDay + '</br>' + 'rrule: ' + ': ' + info.event._def.recurringDef + '</div>';
                                // 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 + '</br>' + 'allDay: ' + ': ' + info.event.allDay + '</br>' + 'rrule: ' + ': ' + info.event._def.recurringDef.typeData + '</div>';
                                // 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 + '</br>' + 'allDay: ' + ': ' + info.event.allDay + '</br>' + 'rrule: ' + ': ' + info.event._def.recurringDef + '</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,dayGridWeek,dayGridDay,listDay,listWeek,listMonth,listYear'
                                right: 'dayGridMonth,dayGridWeek,listWeek,listMonth'
                        },

                        events: "sql/fetch-event.php"
                });
                calendar.render();
        });
// <META HTTP-EQUIV="refresh" CONTENT="3; URL=/calendar/index.php"h
        </script>


        <style>
                body {
                        margin-top: 10px;
                        margin-bottom: 210px;
                        text-align: center;
                        // font-size: 20px;
                        font-size: window.innerWidth >= 992 ? '16px' : '32px';
                        font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
                }

                #calendar {
                        // width: 200vh;
                        width: window.innerWidth >= 992 ? '160vh' : '80vh';
                        margin: 0 auto;
                }

                .response {
                        height: 60px;
                }

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

                /* Button used to open the contact form - fixed at the bottom of the page */
                .open-button {
                  background-color: #555;
                  color: white;
                  padding: 16px 20px;
                  border: none;
                  cursor: pointer;
                  opacity: 0.8;
                  position: fixed;
                  bottom: 23px;
                  right: 28px;
                  width: 280px;
                }

                /* The popup form - hidden by default */
                .form-popup {
                  display: none;
                  position: fixed;
                  bottom: 0;
                  right: 15px;
                  border: 3px solid #f1f1f1;
                  z-index: 9;
                }

                /* Add styles to the form container */
                .form-container {
                  max-width: 400px;
                  padding: 10px;
                  background-color: white;
                }

                /* Full-width input fields */
                .form-container input[type=text], .form-container input[type=password] {
                  width: 100%;
                  padding: 15px;
                  margin: 5px 0 22px 0;
                  border: none;
                  background: #f1f1f1;
                }

                /* When the inputs get focus, do something */
                .form-container input[type=text]:focus, .form-container input[type=password]:focus {
                  background-color: #ddd;
                  outline: none;
                }

                /* Set a style for the submit/login button */
                .form-container .btn {
                  background-color: #04AA6D;
                  color: white;
                  padding: 16px 20px;
                  border: none;
                  cursor: pointer;
                  width: 100%;
                  margin-bottom:10px;
                  opacity: 0.8;
                }

                /* Add a red background color to the cancel button */
                .form-container .cancel {
                  background-color: red;
                }

                /* Add some hover effects to buttons */
                .form-container .btn:hover, .open-button:hover {
                  opacity: 1;
                }

        </style>

</head>
<body>
<h2 style="display:inline;">Calendar </h2><h5 style="display:inline;">(version 5.11.2)</h5>

        <div id='calendar' align='center'></div>

        <button class="open-button" onclick="openForm()">Specify Event</button>
        <div class="form-popup" id="myForm">
                <form class="form-container">
                        <h1>Event</h1>
                        <label for="etit"><b>Title</b></label>
                        <input type="text" placeholder="Enter title" id="etit" required>
                        <label for="sttime">Enter the start time :</label>
                        <input id="sttime" type="datetime-local" value="<?php echo date('Y-m-d\TH:i');?>">
                        <label for="aday">All Day event:</label>
                                <select id="aday" onclick="select()">
                                        <option value="true" selected>True</option>
                                        <option value="false">False</option>
                                </select>
                        <label for="entime">[Optional] Enter the end time :</label>
                        <input id="entime" type="datetime-local">
                        <label for="optionvals">Enter a choise for editable item :</label>
                                <select id="optionvals" onclick="select()">
                                        <option value="true" selected>True</option>
                                        <option value="false">False</option>
                                </select>
                        <label for="errul"><b>[Optional] Recurring Event - Do NOT select an end time!</b></label>
                        <p>Example: DTSTART:20210201T103000\nRRULE:FREQ=WEEKLY;INTERVAL=5;UNTIL=20210601;BYDAY=MO,FR</p>
                        <input type="text" placeholder="Enter the rrule" id="errul">

                        <button type="button" class="btn cancel" onclick="closeForm()">Close Event popup</button>
                </form>
        </div>

        <script>
        function openForm() {
                document.getElementById("myForm").style.display = "block";
        }

        function closeForm() {
                document.getElementById("myForm").style.display = "none";
        }
        </script>


</body>
</html>

 

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

::::::::::::::
sql/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'] : "";
$allday = isset($_POST['allDay']) ? $_POST['allDay'] : "";

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

$sstart = date("Y-m-d H:i:s", strtotime($start));
$sqlExists="SELECT archive,title,start from tbl_events where archive like 'no' AND title like '$title' AND start like '$sstart' ";
$seresult = mysqli_query($conn, $sqlExists);

if (mysqli_num_rows($seresult) < 1) {

if (empty($allday) or $allday == 'false') {
$sqlInsert = "INSERT INTO tbl_events (date,archive,sqledit,title,start,end) VALUES ('".$date."','no','true','".$title."','".$start."','".$end."')";
} else {
$sqlInsert = "INSERT INTO tbl_events (date,archive,sqledit,title,start,end,allDay) VALUES ('".$date."','no','true','".$title."','".$start."','".$end."','".$allday."')";
}

file_put_contents("add-event_post.log", print_r($_POST, true));
file_put_contents("add-event_sql.log", print_r($sqlInsert, true));

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

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

}
?>
::::::::::::::
sql/add-event-rrule.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'] : "";
$allday = isset($_POST['allDay']) ? $_POST['allDay'] : "";
$rrule = isset($_POST['rrule']) ? $_POST['rrule'] : "";

// $sqlInsert = "INSERT INTO tbl_events (title,start,end) VALUES ('".$title."','".$start."','".$end."')";
$sstart = date("Y-m-d H:i:s", strtotime($start));
$sqlExists="SELECT archive,title,start from tbl_events where archive like 'no' AND title like '$title' AND rrule like '$rrule' ";
$seresult = mysqli_query($conn, $sqlExists);

if (mysqli_num_rows($seresult) < 1) {
if (empty($allday) or $allday == 'false') {
$sqlInsert = "INSERT INTO tbl_events (date,archive,sqledit,title,start,backgroundColor,rrule) VALUES ('".$date."','no','true','".$title."','".$start."','green','".$rrule."')";
} else {
$sqlInsert = "INSERT INTO tbl_events (date,archive,sqledit,title,start,backgroundColor,allDay,rrule) VALUES ('".$date."','no','true','".$title."','".$start."','green','".$allday."','".$rrule."')";
}

file_put_contents("add-event-rrule_post.log", print_r($_POST, true));
file_put_contents("add-event-rrule_sql.log", print_r($sqlInsert, true));

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

if (! $result) {
    $result = mysqli_error($conn);
}
}
?>
::::::::::::::
sql/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'] : "";
$allday = isset($_POST['allDay']) ? $_POST['allDay'] : "";

// $sqlInsert = "INSERT INTO tbl_events (title,start) VALUES ('".$title."','".$start."')";
$sstart = date("Y-m-d H:i:s", strtotime($start));
$sqlExists="SELECT archive,title,start from tbl_events where archive like 'no' AND title like '$title' AND start like '$sstart' ";
$seresult = mysqli_query($conn, $sqlExists);

if (mysqli_num_rows($seresult) < 1) {
if (empty($allday) or $allday == 'false') {
$sqlInsert = "INSERT INTO tbl_events (date,archive,sqledit,title,start) VALUES ('".$date."','no','true','".$title."','".$start."')";
} else {
$sqlInsert = "INSERT INTO tbl_events (date,archive,sqledit,title,start,allDay) VALUES ('".$date."','no','true','".$title."','".$start."','".$allday."')";
}

file_put_contents("add-event-start_post.log", print_r($_POST, true));
file_put_contents("add-event-start_sql.log", print_r($sqlInsert, true));

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

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

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

$date = date('Y-m-d H:i:s');
$id = $_POST['id'];
// $sqlDelete = "DELETE from tbl_events WHERE id='".$id."'";

$sqlArchive = "UPDATE tbl_events SET date='".$date."' ,archive='yes' WHERE id='".$id."' AND sqledit = 'true'";

file_put_contents("delete-event_post.log", print_r($_POST, true));
file_put_contents("delete-event_sql.log", print_r($sqlArchive, true));

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

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

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

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

if (empty($allday) or $allday == 'false') {
$sqlUpdate = "UPDATE tbl_events SET date='".$date."' ,title='".$title."' ,start='".$start."' ,end='".$end."' ,allDay=NULL ,backgroundColor=NULL ,rrule=NULL WHERE id='".$id."' AND sqledit = 'true'";
} else {
$sqlUpdate = "UPDATE tbl_events SET date='".$date."' ,title='".$title."' ,start='".$start."' ,end='".$end."' ,allDay='".$allday."' ,backgroundColor=NULL ,rrule=NULL WHERE id='".$id."' AND sqledit = 'true'";
}

file_put_contents("edit-event_post.log", print_r($_POST, true));
file_put_contents("edit-event_sql.log", print_r($sqlUpdate, true));

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

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

?>
::::::::::::::
sql/edit-event-rrule.php
::::::::::::::
<?php
require_once "db.php";

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

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

if (empty($allday) or $allday == 'false') {
$sqlUpdate = "UPDATE tbl_events SET date='".$date."' ,title='".$title."' ,start='".$start."' ,end=NULL ,rrule='".$rrule."' ,backgroundColor='green' ,allDay=NULL WHERE id='".$id."' AND sqledit = 'true'";
} else {
$sqlUpdate = "UPDATE tbl_events SET date='".$date."' ,title='".$title."' ,start='".$start."' ,end=NULL ,rrule='".$rrule."' ,backgroundColor='green' ,allDay='".$allday."' WHERE id='".$id."' AND sqledit = 'tr
ue'";
}


file_put_contents("edit-event-rrule_post.log", print_r($_POST, true));
file_put_contents("edit-event-rrule_sql.log", print_r($sqlUpdate, true));

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

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

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

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

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

if (empty($allday) or $allday == 'false') {
$sqlUpdate = "UPDATE tbl_events SET date='".$date."' ,title='".$title."' ,start='".$start."' ,allDay='true' ,end=NULL ,backgroundColor=NULL ,rrule=NULL WHERE id='".$id."' AND sqledit = 'true'";
} else {
$sqlUpdate = "UPDATE tbl_events SET date='".$date."' ,title='".$title."' ,start='".$start."' ,allDay='".$allday."' ,end=NULL ,backgroundColor=NULL ,rrule=NULL WHERE id='".$id."' AND sqledit = 'true'";
}

file_put_contents("edit-event-start_post.log", print_r($_POST, true));
file_put_contents("edit-event-start_sql.log", print_r($sqlUpdate, true));

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

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

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

    $json = array();
    $sqlQuery = "SELECT * FROM tbl_events WHERE archive='no' 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);
?>

 

 

 

  If you like my website, feel free to donate via the Paypal button. Thank you!