I'm in need of a scheduler and I thought of having the DHTMLX Timeline scheduler. I found out that it is exactly what I want. But the problem is that I'm not able to load the resources from the database.When I hardcode the resources it is working fine..
This is my script
function init() {
scheduler.locale.labels.timeline_tab = "Timeline";
scheduler.locale.labels.section_custom = "Section";
scheduler.config.details_on_create = true;
scheduler.config.details_on_dblclick = true;
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
//===============
//Configuration
//===============
var sections = [
{key:1, label:"James Smith"},
{key:2, label:"John Williams"},
{key:3, label:"David Miller"},
{key:4, label:"Linda Brown"}
];
var durations = {
day: 24 * 60 * 60 * 1000,
hour: 60 * 60 * 1000,
minute: 60 * 1000
};
var get_formatted_duration = function(start, end) {
var diff = end - start;
var days = Math.floor(diff / durations.day);
diff -= days * durations.day;
var hours = Math.floor(diff / durations.hour);
diff -= hours * durations.hour;
var minutes = Math.floor(diff / durations.minute);
var results = [];
if (days) results.push(days + " days");
if (hours) results.push(hours + " hours");
if (minutes) results.push(minutes + " minutes");
return results.join(", ");
};
var resize_date_format = scheduler.date.date_to_str(scheduler.config.hour_date);
scheduler.templates.event_bar_text = function(start, end, event) {
var state = scheduler.getState();
if (state.drag_id == event.id) {
return resize_date_format(start) + " - " + resize_date_format(end) + " (" + get_formatted_duration(start, end) + ")";
}
return event.text; // default
};
scheduler.createTimelineView({
name: "timeline",
x_unit: "minute",
x_date: "%H:%i",
x_step: 30,
x_size: 48,
x_start: 0,
x_length: 48,
y_unit: sections,
y_property: "section_id",
render:"bar",
event_dy: "full"
});
//===============
//Data loading
//===============
scheduler.config.lightbox.sections = [
{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
{name:"custom", height:23, type:"select", options:sections, map_to:"section_id" },
{name:"time", height:72, type:"time", map_to:"auto"}
];
scheduler.init('scheduler_here', new Date(2009, 5, 30), "timeline");
scheduler.parse([
{ start_date: "2009-06-30 09:00", end_date: "2009-06-30 12:00", text:"Task A-12458", section_id:1},
{ start_date: "2009-06-30 12:00", end_date: "2009-06-30 20:00", text:"Task B-48865", section_id:2},
{ start_date: "2009-06-30 14:00", end_date: "2009-06-30 16:00", text:"Task B-44864", section_id:2},
{ start_date: "2009-06-30 08:00", end_date: "2009-06-30 12:00", text:"Task C-32421", section_id:3},
{ start_date: "2009-06-30 14:30", end_date: "2009-06-30 16:45", text:"Task C-14244", section_id:3},
{ start_date: "2009-06-30 12:00", end_date: "2009-06-30 18:00", text:"Task D-12458", section_id:4}
], "json");
}
Above is the script which works fine..ie when i hardcode the resources..
But when i give it like var sections = 'resources-feed.php' the scheduler is not working..
where the output of the resources-feed.php is as follows:
[{key:1, label:"James Smith"},{key:2, label:"John Williams"},{key:3, label:"David Miller"}]
Here is the resources-feed.php
try {
$db_host = 'localhost'; // hostname
$db_name = 'scheduler'; // databasename
$db_user = 'root'; // username
$user_pw = ''; // password
// Establish new connection with database
$connection = new PDO('mysql:host='.$db_host.'; dbname='.$db_name, $db_user, $user_pw);
// Prepare and Execute query
$query = "SELECT * FROM rooms";
$sth = $connection->prepare($query);
$sth->execute();
// Returning array
$return_array = array();
// Event array
$event_array;
// Get the result
while ($row = $sth->fetch(PDO::FETCH_ASSOC)) {
// Create a new array for the event
$event_array = array();
// Add data from database to the event array
$event_array['key'] = $row["ResourceDescription"];
$event_array['label'] = $row["ResourceName"];
// Merge the event array into the return array
array_push($return_array, $event_array);
}
// Output the json feed as we need it to render the calendar
echo json_encode($return_array);
} catch (PDOException $e){
// Output PDO error message
echo $e->getMessage();
}
Anyone, Please help me..Thanks in advance..
it is actually very simple. Dhtmlx comes with a data processor which is used to easily load and save data from and to a database.
All you need to do is, add the data processor's Javascript file along with its dependencies. And initialize it after you initialize the scheduler.
See steps 6-9 here for an example.http://docs.dhtmlx.com/scheduler/how_to_start.html
Hope it is what you were looking for.