We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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 11:14 AM

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.
Live Chat Icon For mobile
Up arrow icon