Search code examples
asp.net-mvcschedulerdhtmlxdhtmlx-scheduler

Dhtmlx Scheduler - Chart not appearing


I am currently using the free client-side verison of Dhtmlx Scheduler in a Asp.net MVC application. Im not to familiar with Dhtmlx, just started using it yesterday, so as much hints/advice/tips would help greatly!

I have followed a few tutorials online and none of them seem to display my chart when I run the program locally. why is that?

A side question, I plan on incorporating drag and drop functionality, is this viable to add as a custom event?

Thanks much in advanced everyone!

script:

scheduler.locale.labels.timeline_tab = "Timeline";
scheduler.locale.labels.timeline2_tab = "Timeline2";
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"}
];

scheduler.createTimelineView({
name: "timeline",
x_unit: "hour",
x_step:8,
x_date: "%g%a",
x_size: 30, 
x_length: 30, 
y_unit: sections,
event_dy:'full',
y_property: "section_id",
render:"bar"
});

scheduler.init('scheduler_here',new Date(2014,3,7),"timeline");


scheduler.parse([
{ start_date: "2014-04-07 09:00", end_date: "2014-04-07 20:00", text:"Task A-12458",      section_id:1},
{ start_date: "2014-04-09 06:00", end_date: "2014-04-09 22:00", text:"Task A-89411", section_id:1},
{ start_date: "2014-04-08 12:00", end_date: "2014-04-08 24:00", text:"Task C-32421", section_id:2},
{ start_date: "2014-04-07 14:30", end_date: "2014-04-07 19:00", text:"Task C-14244", section_id:3}
],"json");

view:

<div id="scheduler_here" class="dhx_cal_container" style='width:1200px; height:900px;'>
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</div>
        <div class="dhx_cal_today_button"></div>
        <div class="dhx_cal_date"></div>
        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
    </div>
    <div class="dhx_cal_header">
    </div>
    <div class="dhx_cal_data">
    </div>      
</div>

Solution

  • I figured it out, I ended up putting the script in the div with id="scheduler_here"