So I'm creating a page that has a calendar and I want to display the events that I insert on a different page to the database

How can I display the events on the calendar ?

This is the js code that came with the template (I don't have a lot of js skills)

I think that the part where it displays the events is on the "events: [...] but I don't know how to fetch the data from the database

var initCalendar = function() {
    var $calendar = $('#calendar');
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $calendar.fullCalendar({
        header: {
            left: 'title',
            right: 'prev,today,next,basicDay,basicWeek,month'
        },

        timeFormat: 'h:mm',

        titleFormat: {
            month: 'MMMM YYYY',      // September 2009
            week: "MMM d YYYY",      // Sep 13 2009
            day: 'dddd, MMM d, YYYY' // Tuesday, Sep 8, 2009
        },

        themeButtonIcons: {
            prev: 'fa fa-caret-left',
            next: 'fa fa-caret-right',
        },
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false,
                className: 'fc-event-danger'
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: '/'
            }
        ]
    });

I haven't created the database table yet but I have an idea of how am I going to make it.

So I'm creating a page that has a calendar and I want to display the events that I insert on a different page to the database

How can I display the events on the calendar ?

This is the js code that came with the template (I don't have a lot of js skills)

I think that the part where it displays the events is on the "events: [...] but I don't know how to fetch the data from the database

var initCalendar = function() {
    var $calendar = $('#calendar');
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $calendar.fullCalendar({
        header: {
            left: 'title',
            right: 'prev,today,next,basicDay,basicWeek,month'
        },

        timeFormat: 'h:mm',

        titleFormat: {
            month: 'MMMM YYYY',      // September 2009
            week: "MMM d YYYY",      // Sep 13 2009
            day: 'dddd, MMM d, YYYY' // Tuesday, Sep 8, 2009
        },

        themeButtonIcons: {
            prev: 'fa fa-caret-left',
            next: 'fa fa-caret-right',
        },
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false,
                className: 'fc-event-danger'
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google./'
            }
        ]
    });

I haven't created the database table yet but I have an idea of how am I going to make it.

• javascript
• mysql
• sql

Share Improve this question Follow asked May 6, 2019 at 11:01 João NevesJoão Neves 7711 gold badge11 silver badge1212 bronze badges 9

• You should go through the PHP-MySQL database connectivity and understand CRUD operations later you have to check how to integrate javascript with PHP and HTML – Mangesh Sathe Commented May 6, 2019 at 11:54
• Code suggestion ??? @MangeshSathe – João Neves Commented May 6, 2019 at 11:58
• w3schools./php/php_mysql_intro.asp check this tutorial – Mangesh Sathe Commented May 6, 2019 at 12:01
• Mate I know php + mysql operations I just don't how to fetch the data to javascript array vars – João Neves Commented May 6, 2019 at 12:02
• if you know the DB operations the pull the necessary data from database. Key events : looks like its a JSON, so once you have data array ready from database, just use json_encode to get the proper format. Then using for the event key just integrate json encoded array to event like event : <?php $myJsonCalData; ?> – Mangesh Sathe Commented May 6, 2019 at 12:06

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 2

There are many ways you can achieve this.

1. The best and simplest way is sending an AJAX REQUEST to your server side script. Your server side scripts query's the database, processes your data and returns a response to your ajax request. Consider doing this with echo json_encode($array_values) in Php. From there you can handle the response using javascript within your ajax request. You may need to parse your response like so var result = JSON.parse(data) in javascript.

For example:

//Within Your HTML Script
axios({
  method: 'POST', //you can set what request you want to be
  url: 'getdb.php',
  data: {id: 1},
})
.then(function (response) {
  // Server side response
  var result = JSON.parse(response.data);
  console.log(result );
})
.catch(function (error) {
  console.log(error);
});

//getdb.php
<?php
$servername = "localhost";
$username = "username";
$password = "password";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$array_values = array();
// output data of each row
while($row = $result->fetch_assoc()) {
   $array_values[] = $row;
};
echo json_encode($array_values)
$conn->close();
?>

2. Another way is when you are making server side calls with Php within your HTML. In which case:

    <script>
      var result = JSON.parse(JSON.stringify("<?php echo json_encode($array_values)?>"));
    </script>

3. Finally, you can embed HTML within Php as well. Which will be:

    <?php
     echo "<script>var result = JSON.parse(JSON.stringify('json_encode({$array_values})'))</script>"
    ?>

Your response from your serverside script would be something like this:

$array_values = array('header' => 
                           array('left' => 'title', 'right' => 'prev,today....'),
                      'timeFormat' => 'h:mm',
                      .....,
                      'events' => array(
                           array('title' => 'All Day', 'start' => 'Date...'),
                           array('title' => 'All Day', 'start' => 'Date...'),
                           array('title' => 'All Day', 'start' => 'Date...'),
                       )

                )
echo json_encode($array_values );

Then in your javascript you can do something like this:

var result = JSON.parse(response.data);
$calendar.fullCalendar(result);

OR

//independently change each property without affecting others
var result = JSON.parse(response.data);
$calendar.fullCalendar().header= result.header;
$calendar.fullCalendar().timeFormat= result.timeFormat;
$calendar.fullCalendar().events= result.events;

//$calendar.fullCalendar() function is simply accepting an object as a parameter

The reason why you can do this is because the javascript variable result now looks something like this after the SERVER SIDE RESPONSE:

result = {
        header: {
            left: 'title',
            right: 'prev,today,next,basicDay,basicWeek,month'
        },
        timeFormat: 'h:mm',
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
        }

Which obviously depends on how you structured you response from Php;

use the jquery ajax function to fetch data.

    events: function(start, end, timezone, callback) {
jQuery.ajax({
            url: 'abc.php',
            type: 'POST',
            dataType: 'json',
            data: {
                start: start.format(),
                end: end.format()
            },
            success: function(responce) {
                var events = responce.bookingData;
                callback(events);
            }
        });
}