Schedule - Javascript (ES5) - PHP - MySQL simple Example

Hello,

is there a simple example of how to get started with Schedule control (Javascript (ES5 - simple js file) that gets data with PHP (getData()) from a MySQL database (what fields should we need to provide to get the basic example working)?

Just to show a simple calendar, no need for crud, just for getting started.

Thanks,

D


1 Reply

RV Ravikumar Venkatesan Syncfusion Team November 10, 2022 04:14 PM UTC

We have prepared a sample to fetch data from the JSON data source using PHP and bind it with the Schedule as shown in the below code snippets. You can do something similar to bind data to the schedule from the database. The StartTime and EndTime fields are mandatory fields to create an appointment. You can use other default appointment fields based on your requirements.


UG:

https://ej2.syncfusion.com/javascript/documentation/schedule/data-binding/#binding-remote-data

https://ej2.syncfusion.com/javascript/documentation/schedule/appointments/


[data.json]

[{

    "Id": 1,

    "Subject": "Explosion of Betelgeuse Star",

    "Location": "Space Centre USA",

    "StartTime": "2022-11-12T04:00:00.000Z",

    "EndTime": "2022-11-12T05:30:00.000Z"

}]


[action.php]

<?php

 

function getData() {

    $dataFile = "data_files/data.json";

    $jsonData = file_get_contents($dataFile);

    echo json_encode($jsonData, true);

}

 

if(function_exists($_GET['action'])) {    

    $_GET['action']();

}

?>


[index.js]

var scheduleObj = new ej.schedule.Schedule({

    width: '100%',

    height: '650px',

    currentView: 'Month',

    eventSettings: {

        dataSource: new ej.data.DataManager({

            url: 'http://localhost:8080/JSON_CRUD/action.php/?action=getData',

            crossDomain: true

        }).

            executeQuery(new ej.data.Query()).then(

                function (e) {

                    scheduleObj.eventSettings.dataSource = e.result;

                }

            )

    }

});

scheduleObj.appendTo('#Schedule');



Attachment: ej2jsschedulewithphpservice_b93697ac.zip

Loader.
Up arrow icon