在数据库的DHTMLX Scheduler Timeline视图中添加资源（y_units）

Question

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..

Answer 1

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.