Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Don't see any events in the calendar

14 Answers 443 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Pavel
Top achievements
Rank 1
Pavel asked on 09 Sep 2013, 01:28 AM
I seem to be having trouble displaying events in the calendar. I know that I am able to get the JSON results without an issue as I created a test page which simply echo's the JSON results. I must be missing something in the code I modified and likely it is very, very simple. On a side note, the scheduler page is loaded up within a tab strip item, but I don't think that makes a difference as I don't see the results when I connect to the page directly.

Help is much appreciated...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Appointment Schedular</title>
    <link href="css/Autovation.css" rel="stylesheet" />
    <link href="css/kendo.common.min.css" rel="stylesheet" />
    <link href="css/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
 
<script id="editor" type="text/x-kendo-template">
   <h3>Edit meeting</h3>
   <p>
       <label>Title: <input name="title" /></label>
   </p>
   <p>
       <label>Start: <input data-role="datetimepicker" name="start" /></label>
   </p>
   <p>
       <label>Start: <input data-role="datetimepicker" name="end" /></label>
   </p>
</script>
 
<?php
 
 
require_once 'dbModules/DataSourceResult.php';
require_once 'dbModules/SchedulerDataSourceResult.php';
require_once 'Kendo/Autoload.php';
 
 
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    header('Content-Type: application/json');
 
    $request = json_decode(file_get_contents('php://input'));
 
    $result = new SchedulerDataSourceResult('mysql:host=localhost;dbname=appdata', 'root', '...');
 
    $type = $_GET['type'];
 
    $columns = array('ID', 'EstimateID', 'CustomerID', 'Subject', 'Location', 'Description', 'StartTime', 'EndTime', 'VehicleType','IsAllDay', 'Synchronized');
 
    switch($type) {
        case 'create':
            $result = $result->create('Appointments', $columns, $request->models, 'ID');
            break;
        case 'update':
            $result = $result->update('Appointments', $columns, $request->models, 'ID');
            break;
        case 'destroy':
            $result = $result->destroy('Appointments', $request->models, 'ID');
            break;
        default:
            $result = $result->read('Appointments', array('ID'), $request);
            break;
    }
 
    echo json_encode($result, JSON_NUMERIC_CHECK);
 
    exit;
}
 
$transport = new \Kendo\Data\DataSourceTransport();
 
$create = new \Kendo\Data\DataSourceTransportCreate();
 
$create->url('scheduler.php?type=create')
       ->contentType('application/json')
       ->type('POST');
 
$read = new \Kendo\Data\DataSourceTransportRead();
 
$read->url('scheduler.php?type=read')
     ->contentType('application/json')
       ->type('POST');
 
$update = new \Kendo\Data\DataSourceTransportUpdate();
 
$update->url('scheduler.php?type=update')
       ->contentType('application/json')
       ->type('POST');
 
$destroy = new \Kendo\Data\DataSourceTransportDestroy();
 
$destroy->url('scheduler.php?type=destroy')
        ->contentType('application/json')
        ->type('POST');
 
$transport->create($create)
          ->read($read)
          ->update($update)
          ->destroy($destroy)
          ->parameterMap('function(data) {
              return kendo.stringify(data);
          }');
 
$model = new \Kendo\Data\DataSourceSchemaModel();
 
$IDField = new \Kendo\Data\DataSourceSchemaModelField('ID');
$IDField->type('number')
        ->from('ID')
        ->nullable(false);
 
$estimateID = new \Kendo\Data\DataSourceSchemaModelField('EstimateID');
$estimateID->type('number')
           ->from('EstimateID')
           ->defaultValue('No title')
           ->validation(array('required' => true));
 
$customerID = new \Kendo\Data\DataSourceSchemaModelField('CustomerID');
$customerID->type('number')
           ->from('CustomerID')
           ->defaultValue('No title')
           ->validation(array('required' => true));
 
$subjectField = new \Kendo\Data\DataSourceSchemaModelField('Subject');
$subjectField->type('string')
             ->from('Subject');
 
$locationField = new \Kendo\Data\DataSourceSchemaModelField('Location');
$locationField->type('string')
              ->from('Location');
         
$descriptionField = new \Kendo\Data\DataSourceSchemaModelField('Description');
$descriptionField->type('string')
                 ->from('Description');
 
 
$startField = new \Kendo\Data\DataSourceSchemaModelField('StartTime');
$startField->type('datetime')
           ->from('StartTime');
 
$endField = new \Kendo\Data\DataSourceSchemaModelField('EndTime');
$endField->type('datetime')
         ->from('EndTime');
 
$vehicleTypeField = new \Kendo\Data\DataSourceSchemaModelField('VehicleType');
$vehicleTypeField->type('string')
                 ->from('VehicleType');
 
$isAllDayField = new \Kendo\Data\DataSourceSchemaModelField('IsAllDay');
$isAllDayField->type('boolean')
              ->from('IsAllDay');
 
 
$SynchronizedField = new \Kendo\Data\DataSourceSchemaModelField('Synchronized');
$SynchronizedField->type('boolean')
                          ->from('Synchronized');
 
$model->id('ID');
$model->addField($IDField);
$model->addField($estimateID);
$model->addField($customerID);
$model->addField($subjectField);
$model->addField($locationField);
$model->addField($descriptionField);
$model->addField($startField);
$model->addField($endField);
$model->addField($vehicleTypeField);
$model->addField($isAllDayField);
$model->addField($SynchronizedField);
 
$schema = new \Kendo\Data\DataSourceSchema();
$schema->data('data')
        ->errors('errors')
        ->model($model);
 
$dataSource = new \Kendo\Data\DataSource();
 
$dataSource->transport($transport)
    ->schema($schema)
    ->batch(true);
 
//$editable = new \Kendo\UI\SchedulerEditable();
//$confirmation = true;
//$editable->confirmation($confirmation);
//$editable->template('$editor')//;
 
$scheduler = new \Kendo\UI\Scheduler('scheduler');
$scheduler->timezone('America/Toronto')
        ->date(new DateTime())
        ->height('850')
        ->addView(array('type' => 'day', 'startTime' => new DateTime('7:00',new DateTimeZone('America/Toronto'))),
            array('type' => 'week', 'selected' => true, 'startTime' => new DateTime('7:00',new DateTimeZone('America/Toronto'))), 'month', 'agenda')
        ->dataSource($dataSource);
 
?>
<?php
echo $scheduler->render();
?>

14 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 11 Sep 2013, 06:35 AM
Hi Paul,

Looking at the code you have pasted I suspect that the issue is due to incorrect model field mapping declaration. As you may know the Scheduler Model requires a number of fields to be present in the data. In case when the actual data does not have those fields named the same way as expected by the Scheduler, you are able to map them via the model definition from option. However, in the provided code, the field name to which the original data is mapped does not match the expected by the Scheduler field names. For example:

$subjectField = new \Kendo\Data\DataSourceSchemaModelField('title'); // the expected field name
$subjectField->type('string')
             ->from('Subject');
          
$descriptionField = new \Kendo\Data\DataSourceSchemaModelField('description'); // the expected field name
$descriptionField->type('string')
                 ->from('Description');
  
$startField = new \Kendo\Data\DataSourceSchemaModelField('startTime'); // the expected field name
$startField->type('datetime')
           ->from('StartTime');
  
$endField = new \Kendo\Data\DataSourceSchemaModelField('endTime'); // the expected field name
$endField->type('datetime')
         ->from('EndTime');
  
$isAllDayField = new \Kendo\Data\DataSourceSchemaModelField('isAllDay'); // the expected field name
$isAllDayField->type('boolean')
              ->from('IsAllDay');

//...etc


Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pavel
Top achievements
Rank 1
answered on 11 Sep 2013, 02:03 PM
How about the other fields specific to my application? I can still make use of other fields for my intended purposes as long as I map the required fields correctly?

Paul
0
Rosen
Telerik team
answered on 11 Sep 2013, 03:23 PM
Hi Paul,

Indeed, you need to map only the required fields. All of the other fields will not be changed and can be accessed.

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pavel
Top achievements
Rank 1
answered on 11 Sep 2013, 03:43 PM
you had mentioned that "startTime" and "endTime" are required, but the documentation specifies "start" and "end".

Could you please confirm and also specify if the ID field required is called "taskId"? I am still not getting events in my calendar, and I assume it is all case-sensitive?

Paul
0
Pavel
Top achievements
Rank 1
answered on 11 Sep 2013, 03:48 PM
I think my main issue is with time formatting. I think the MySQL server doesn't like the formatting that takes place in the scheduler data result class. MySQL doesn't understand the formatting. When I remove the formatting, I do get data in my test page that simply spits out the JSON result, but even then, I still do not get any visible data in my calendar. How important is the date/time formatting for the scheduler application?

Paul
0
Rosen
Telerik team
answered on 11 Sep 2013, 03:51 PM
Hello Paul,

Please excuse me for the misleading you. Indeed, it must be start and end instead startTime and endTime. 

The id definition is required, however the actual field name is not specific. However, you should make sure that the id definition matches the name from the actual field definition.

$IDField = new \Kendo\Data\DataSourceSchemaModelField('ID'); // 1
$IDField->type('number')
        ->from('ID')
        ->nullable(false);
 
$model->id('ID'); //2
 
// 1 and 2 are the same

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pavel
Top achievements
Rank 1
answered on 13 Sep 2013, 01:08 AM
How important is the format of the time field? I see the following format coming from the sample:

2013-06-27T08:30:00Z

How important is the "T" and "Z"? Does the scheduler require this for proper interpretation of the event time and date?

Paul
0
Rosen
Telerik team
answered on 16 Sep 2013, 07:17 AM
Hello Paul,

Indeed, the formatting of the date is important as this string representation of a DateTime received from the server, should be deserialized into a Date JavaScript object. Thus, the format should be supported by the kendo.parseDate function, which is used behind the scenes to parse the data. Note that parseDate is called with a single argument overload, therefore, only the standard date formats of the current culture will be used. 
Please have this in mind in case you want to change the format of the dates send by the server.

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pavel
Top achievements
Rank 1
answered on 19 Sep 2013, 08:00 PM
well.....I have made some updates to the app and still do not see any events in the calendar. I still do not see what I am missing and the data format is equivalent to what is being returned by the sample DB and the sample app that returns JSON results:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Appointment Schedular</title>
    <link href="css/<app>.css" rel="stylesheet" />
    <link href="css/kendo.common.min.css" rel="stylesheet" />
    <link href="css/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
 
<?php
 
require_once 'dbModules/DataSourceResult.php';
require_once 'dbModules/SchedulerDataSourceResult.php';
require_once 'Kendo/Autoload.php';
 
 
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    header('Content-Type: application/json');
 
    $request = json_decode(file_get_contents('php://input'));
 
    $result = new SchedulerDataSourceResult('mysql:host=localhost;dbname=<dbname>', '<user>', '<pass>');
 
    $type = $_GET['type'];
 
    $columns = array('ID', 'EstimateID', 'CustomerID', 'Location', 'StartTime', 'EndTime', 'recurrenceId', 'recurrenceRule', 'recurrenceException', 'VehicleType', 'IsAllDay', 'Synchronized');
 
    switch($type) {
        case 'create':
            $result = $result->create('Appointments', $columns, $request->models, 'ID');
            break;
        case 'update':
            $result = $result->update('Appointments', $columns, $request->models, 'ID');
            break;
        case 'destroy':
            $result = $result->destroy('Appointments', $request->models, 'ID');
            break;
        default:
            $result = $result->read('Appointments', array('ID', 'EstimateID','CustomerID','Location','VehicleType','Synchronized'), $request);
            break;
    }
 
    echo json_encode($result, JSON_NUMERIC_CHECK);
 
    exit;
}
 
$transport = new \Kendo\Data\DataSourceTransport();
 
$create = new \Kendo\Data\DataSourceTransportCreate();
 
$create->url('scheduler.php?type=create')
       ->contentType('application/json')
       ->type('POST');
 
$read = new \Kendo\Data\DataSourceTransportRead();
 
$read->url('scheduler.php?type=read')
     ->contentType('application/json')
       ->type('POST');
 
$update = new \Kendo\Data\DataSourceTransportUpdate();
 
$update->url('scheduler.php?type=update')
       ->contentType('application/json')
       ->type('POST');
 
$destroy = new \Kendo\Data\DataSourceTransportDestroy();
 
$destroy->url('scheduler.php?type=destroy')
        ->contentType('application/json')
        ->type('POST');
 
$transport->create($create)
          ->read($read)
          ->update($update)
          ->destroy($destroy)
          ->parameterMap('function(data) {
              return kendo.stringify(data);
          }');
 
$model = new \Kendo\Data\DataSourceSchemaModel();
 
//mandatory fields
 
$apptIdField = new \Kendo\Data\DataSourceSchemaModelField('ID');
$apptIdField->type('number')
            ->from('ID')
            ->nullable(false);
         
$subjectField = new \Kendo\Data\DataSourceSchemaModelField('title');
$subjectField->type('string')
             ->from('Subject');
         
$descriptionField = new \Kendo\Data\DataSourceSchemaModelField('description');
$descriptionField->type('string')
                 ->from('Description');
 
$startField = new \Kendo\Data\DataSourceSchemaModelField('start');
$startField->type('datetime')
           ->from('StartTime');
 
$endField = new \Kendo\Data\DataSourceSchemaModelField('end');
$endField->type('datetime')
         ->from('EndTime');
 
$isAllDayField = new \Kendo\Data\DataSourceSchemaModelField('isAllDay');
$isAllDayField->type('boolean')
              ->from('IsAllDay');
 
$recurrenceIdField = new \Kendo\Data\DataSourceSchemaModelField('recurrenceId');
$recurrenceIdField->from('recurrenceId');
 
$recurrenceRuleField = new \Kendo\Data\DataSourceSchemaModelField('recurrenceRule');
$recurrenceRuleField->from('recurrenceRule');
 
$recurrenceExceptionField = new \Kendo\Data\DataSourceSchemaModelField('recurrenceException');
$recurrenceExceptionField->from('recurrenceException');
 
//Rest of the optional field
 
$customerIdField = new \Kendo\Data\DataSourceSchemaModelField('CustomerID');
$customerIdField->type('number')
                ->from('CustomerID');
 
$estimateIdField = new \Kendo\Data\DataSourceSchemaModelField('EstimateID');
$estimateIdField->type('number')
                ->from('EstimateID');
 
$vehicleTypeField = new \Kendo\Data\DataSourceSchemaModelField('VehicleType');
$vehicleTypeField->from('VehicleType');
 
$locationField = new \Kendo\Data\DataSourceSchemaModelField('Location');
$locationField->from('Location');
 
$synchronizedField = new \Kendo\Data\DataSourceSchemaModelField('Synchronized');
$synchronizedField->from('Sychronized');
 
 
$model->id('ID');
$model->addField($apptIdField);
$model->addField($subjectField);
$model->addField($descriptionField);
$model->addField($startField);
$model->addField($endField);
$model->addField($isAllDayField);
$model->addField($recurrenceIdField);
$model->addField($recurrenceRuleField);
$model->addField($recurrenceExceptionField);
$model->addField($customerIdField);
$model->addField($estimateIdField);
$model->addField($vehicleTypeField);
$model->addField($locationField);
$model->addField($synchronizedField);
 
$schema = new \Kendo\Data\DataSourceSchema();
$schema->data('data')
        ->errors('errors')
        ->model($model);
 
$dataSource = new \Kendo\Data\DataSource();
 
$dataSource->transport($transport)
    ->schema($schema)
    ->batch(true);
 
//$editable = new \Kendo\UI\SchedulerEditable();
//$confirmation = true;
//$editable->confirmation($confirmation);
//$editable->template('$editor')//;
 
$scheduler = new \Kendo\UI\Scheduler('scheduler');
$scheduler->timezone('America/Toronto')
        ->date(new DateTime())
        ->height('850')
        ->addView(array('type' => 'day', 'startTime' => new DateTime('7:00',new DateTimeZone('America/Toronto'))),
            array('type' => 'week', 'selected' => true, 'startTime' => new DateTime('7:00',new DateTimeZone('America/Toronto'))), 'month', 'agenda')
        ->dataSource($dataSource);
 
?>
<?php
echo $scheduler->render();
?>
0
Rosen
Telerik team
answered on 20 Sep 2013, 07:51 AM
Hello Paul,

Could you please change the field type to be date instead of datetime (this is not valid type).

$field->type('date')
//instead of
$field->type('datetime')

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pavel
Top achievements
Rank 1
answered on 20 Sep 2013, 03:08 PM
made that modification and still do not get any events to show up in the calendar. I have also upgraded to the latest Kendo release which has the latest code for the scheduler as well.

Paul
0
Rosen
Telerik team
answered on 23 Sep 2013, 07:38 AM
Hello Paul,

I'm afraid that the supplied details are not sufficient in order to trace the cause for the issue you are facing. Therefore, please provide a small runnable sample in which it can be observed locally.

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pavel
Top achievements
Rank 1
answered on 23 Sep 2013, 01:02 PM
I will try to get that off to you with a support ticket. Unfortunately, will try to see how I can get a sample app running as it is
hooked to my local MySQL database.

Thanks
Paul
0
Pavel
Top achievements
Rank 1
answered on 24 Sep 2013, 01:25 AM
Figured it out, it was the header content in the file I posted below that was preventing the data from populating the calendar. During the "read" event, it would return all the tags of the code I posted below at the beginning of the response <!DOCTYPE .../><html><....> followed by the data and not the data itself. Now that I know, I might move things around a bit and move the data gathering/posting to its own file. I figured it out when I compared it to the example, only the JSON results showed up. All the CSS/header definitions need to be defined in a header.php file as used in the example and not in the file itself.

Took Firefox and Firebug to determine the issues....
Paul
Tags
Scheduler
Asked by
Pavel
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Pavel
Top achievements
Rank 1
Share this question
or