CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3dhtmlxdhtmlx-scheduler
gs11111
gs11111

Reputation: 659

Bind data from Database to dhtmlx scheduler

I use dhtmlx schedule and problem in loading data into scheduler view. I use databasefirst, so i have a sp to fetch all details to display on scheduler, 

public ContentResult Data()
        {
            var data = new SchedulerAjaxData(
                new Entities().tblAppTime.Select(e => new { e.SharedId, e.StartTime, e.Duration}));
           return data;}

output from var data (during debugging) :

   {[{"SharedId":54,"StartTime":"09/14/2013 10:00","Duration":"09/14/2013 11:20"},{"SharedId":56,"StartTime":"09/14/2013 10:00","Duration":"09/14/2013 10:40"},
    {[{"SharedId":10,"StartTime":"09/12/2013 8:50","Duration":"09/12/2013 8:55"},{"SharedId":56,"StartTime":"09/14/2013 10:00","Duration":"09/14/2013 10:40"}]}

still I dont get this binded in scheduler, Please help.

Update:

controller.cs
 sched.BeforeInit.Add("customeventbox()");


public ContentResult Data()
        {
         var scheduler = new DHXScheduler();
          scheduler.InitialDate=  DateTime.Today ;
            var data = new SchedulerAjaxData(new OnlineABEntities().GetAppointmentsDisplay(scheduler.InitialDate).Select(e => new {id= e.ID, e.ResourceID,start_date= e.StartTime,end_date= e.Duration, e.Color,text=""}));
            return data;
        }

schedscript.js

function customeventbox() {

    debugger;
    scheduler.attachEvent("onTemplatesReady", function () {
        alert("eventbox");
        scheduler.templates.event_header = function (start, end, ev) {
            alert("eventbox1");
                       return scheduler.templates.event_date(ev.StartTime) + "-" +
                       scheduler.templates.event_date(ev.Duration);
                   };
                   scheduler.templates.event_text = function (start, end, event) {
                       alert("eventboxtext");
                       debugger;
                       return "<br>" + event.ID + "<br>"+event.Duration +"<br>"+event.StartTime+"<br>"+event.Color+ "sampleready" + "<br>"+ "sampletext" ;
          }
         });
    }

Upvotes: 0

Views: 2482

Answers (1)

Paul
Paul

Reputation: 1656

Scheduler have some requirements to the loaded data, check the article in the docs. In short, the output data must contain at least four following properties, all case-sensitive - id, start_date, end_date and text

If you fetch data like this, it will be displayed in the scheduler

var data = new SchedulerAjaxData(
    new Entities().tblAppTime.Select(e => new { id = e.SharedId, start_date = e.StartTime, end_date = e.Duration, text = ""})
);

Update

on the client data objects will have the same set of properties as objects that has been passed to SchedulerAjaxData. Start and end dates of the event are JS date objects, so they should be converted to string before output. 

scheduler.templates.event_text = function (start, end, event) {

    var dateToStr = scheduler.date.date_to_str("%H:%i");

    return "<br>" + event.id + 
        "<br>" + dateToStr(event.end_date) +
        "<br>" + dateToStr(event.start_date) +
        "<br>" + event.Color + 
        "sampleready" + "<br>"+ "sampletext" ;
}

here is details on date format mask http://docs.dhtmlx.com/scheduler/settings_format.html

Upvotes: 3

Related Questions