QUICK PHP RAD TIPS AND TRICKS: HOW TO INTEGRATE A FULL CALENDAR PLUGIN

PHPRad systems have proven to be flexible and tranquil in their utilization and reading this article it is assumed the reader must have created a PHPRd project and you are looking to integrate a calendar plugin into your project, which we are

QUICK PHP RAD TIPS AND TRICKS: HOW TO INTEGRATE A FULL CALENDAR PLUGIN

PHPRad systems have proven to be flexible and tranquil in their utilization and reading this article it is assumed the reader must have created a PHPRd project and you are looking to integrate a calendar plugin into your project, which we are going to walk you through the quick processes involved in integrating your calendar plugin in this article, without further ado let's get into it:

STEPS

. Visit the Fullcalendar website to download the Fullcalendar.

. After downloading the plugin, create a plugins folder in your project's assets folder, and inside the plugins folder, create a folder called full calendar and then extract its content there.

Full calendar Plugin Directory to create
Full calendar Plugin Directory to create

· Click on JavaScript logs and browser global to copy code (You can either add the CSS link to the plugin in the App header PHP and use the plugin anywhere in the app or add the CSS and JS link anywhere you use the plugin i.e. in the custom view.

. Make sure you have created an appointment table has been created in your database and it appears in your PHPRad project. If that has not been done, you can run the SQL code below to create the table.

CREATE TABLE
    IF NOT EXISTS `appointments` (
        `id` int(11) NOT NULL AUTO_INCREMENT,
        `title` varchar(255) DEFAULT NULL,
        `group_id` varchar(255) DEFAULT NULL,
        `url` varchar(255) DEFAULT NULL,
        `start_date` date DEFAULT NULL,
        `start_time` time DEFAULT NULL,
        `end_date` date DEFAULT NULL,
        `end_time` time DEFAULT NULL,
        `time` datetime DEFAULT CURRENT_TIMESTAMP,
        PRIMARY KEY (`id`)
    ) ENGINE = MyISAM AUTO_INCREMENT = 23 DEFAULT CHARSET = latin1;

Appointments database table creation code

Appointments database table creation result
Appointments database table creation result

· Next, open the PHPRad application and navigate to Page Design, select the page you want to work on from the list of pages, then drag and drop the Custom View component to that page.

Page Design
Page Design

. After doing that, you add the CSS and JavaScript tags for the plugins you added to your project or enter the following code in the custom view component.


<link href='<?php echo SITE_ADDR; ?>assets/plugin/fullcalendar-5.11.0/main.min.css' rel='stylesheet' />
<script src='<?php echo SITE_ADDR; ?>assets/plugin/fullcalendar-5.11.0/main.min.js'></script>
<script src='<?php echo SITE_ADDR; ?>assets/plugin/fullcalendar-5.11.0/locales-all.min.js'></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
    
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            initialDate: '<?php echo date('Y-m-d', time()); ?>',
            themeSystem: 'bootstrap',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
    
            events: [
                <?php 
                $cmtc = new AppointmentsController; // here we initialize the contoller for the Appointments table, so that we can have access to it and its model to access its data. 
                $db = $cmtc->GetModel(); // we try to access its model.
                
                $sql = "SELECT * FROM appointments"; // our query to get all appointments.
                $appointments = $db->rawQuery($sql); // we execute query to get the data.
                
                if(!empty($appointments)){ //we check if our query was successful in getting data before we use it..
                    foreach($appointments as $key => $appointment){ //we loop through our data.
                        if(count($appointments) - 1 === $key){ // we count the array data and minus 1 from it to compare with the array keys because an array key starts from 0 instead of 1.
                            ?>
                            {
                                <?php 
                                echo "id: '".$appointment['id']."',\n";
                                echo (!empty($appointment['title']) && $appointment['title'] !== NULL) ? "title: '".$appointment['title']."',\n" : "title: 'You have an Appointment today',\n";
                                if(!empty($appointment['group_id']) && $appointment['group_id'] !== NULL){
                                    $group_id = $appointment['group_id'];
                                    $sql = "SELECT * FROM appointment_groups WHERE group_id ='{$group_id}'"; // our query to get all appointments.
                                    $group = $db->rawQueryOne($sql); // we execute query to get the data.
                                    echo "groupId: '".$appointment['group_id']."',\ncolor: '".$group['color']."',\n";
                                }
                                echo (!empty($appointment['url']) && $appointment['url'] !== NULL) ? "url: '".$appointment['url']."',\n" : "url: 'appointments/view/".$appointment['id']."',\n";
                                if(!empty($appointment['start_date']) && $appointment['start_date'] !== NULL && $appointment['start_date'] !== "0000-00-00" && $appointment['start_time'] !== "00:00:00" && $appointment['start_time'] !== NULL){ 
                                    echo "start: '".date("Y-m-d", strtotime($appointment['start_date']))."T".date("H:i:s", strtotime($appointment['start_time']))."',\n";
                                } else {
                                    echo "start: '".date("Y-m-d", strtotime($appointment['start_date'])); echo ($appointment['end_date'] !== NULL) ? "',\n" : "'";
                                }
                                if(!empty($appointment['end_date']) && $appointment['end_date'] !== NULL && $appointment['end_date'] !== "0000-00-00" && $appointment['end_time'] !== "00:00:00" && $appointment['end_time'] !== NULL){ 
                                    echo "end: '".date("Y-m-d", strtotime($appointment['end_date']))."T".date("H:i:s", strtotime($appointment['end_time']))."'";
                                } else if(empty($appointment['end_date']) && $appointment['end_date'] === NULL && $appointment['end_time'] !== NULL){
                                    echo "end: '".date("Y-m-d", strtotime($appointment['start_date']))."T".date("H:i:s", strtotime($appointment['end_time']))."'";
                                }else {
                                    echo ($appointment['end_date'] !== NULL) ? "end: '".date("Y-m-d", strtotime($appointment['end_date']))."'" : "";
                                }
                                ?>
                            }
                            <?php 
                        } else { 
                            ?>
                            {
                                <?php 
                                echo "id: '".$appointment['id']."',\n";
                                echo (!empty($appointment['title']) && $appointment['title'] !== NULL) ? "title: '".$appointment['title']."',\n" : "title: 'You have an Appointment today',\n";
                                if(!empty($appointment['group_id']) && $appointment['group_id'] !== NULL){
                                    $group_id = $appointment['group_id'];
                                    $sql = "SELECT * FROM appointment_groups WHERE group_id ='{$group_id}'"; // our query to get all appointments.
                                    $group = $db->rawQueryOne($sql); // we execute query to get the data.
                                    echo "groupId: '".$appointment['group_id']."',\ncolor: '".$group['color']."',\n";
                                }
                                echo (!empty($appointment['url']) && $appointment['url'] !== NULL) ? "url: '".$appointment['url']."',\n" : "url: 'appointments/view/".$appointment['id']."',\n";
                                if(!empty($appointment['start_date']) && $appointment['start_date'] !== NULL && $appointment['start_date'] !== "0000-00-00" && $appointment['start_time'] !== "00:00:00" && $appointment['start_time'] !== NULL){ 
                                    echo "start: '".date("Y-m-d", strtotime($appointment['start_date']))."T".date("H:i:s", strtotime($appointment['start_time']))."',\n";
                                } else {
                                    echo "start: '".date("Y-m-d", strtotime($appointment['start_date'])); echo ($appointment['end_date'] !== NULL) ? "',\n" : "'";
                                }
                                if(!empty($appointment['end_date']) && $appointment['end_date'] !== NULL && $appointment['end_date'] !== "0000-00-00" && $appointment['end_time'] !== "00:00:00" && $appointment['end_time'] !== NULL){ 
                                    echo "end: '".date("Y-m-d", strtotime($appointment['end_date']))."T".date("H:i:s", strtotime($appointment['end_time']))."'";
                                } else if(empty($appointment['end_date']) && $appointment['end_date'] === NULL && $appointment['end_time'] !== NULL){
                                    echo "end: '".date("Y-m-d", strtotime($appointment['start_date']))."T".date("H:i:s", strtotime($appointment['end_time']))."'";
                                }else {
                                    echo ($appointment['end_date'] !== NULL) ? "end: '".date("Y-m-d", strtotime($appointment['end_date']))."'" : "";
                                }
                                ?> 
                            },
                            <?php
                        }
                    } 
                } 
                ?>
            ],
            navLinks: true, // can click day/week names to navigate views
            dayMaxEvents: true, // allow "more" link when too many events
        });
    
        calendar.render();
    });
</script>

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

PHPRad "Custom View" code

PHPRad "Custom View" result
PHPRad "Custom View" result

After that, you save and publish your project and preview it on the browser. Congratulations you have successfully integrated the full calendar plugin into your PHPRad project. If you get confused along the way, you can watch the video tutorial below, and also you can contact @willvin for paid support on your Radsystems Studio, PHPrad, and none Rad projects.

Part 1:

Part 2: