[ANGULAR] Populate startdate enddate dynamically from the data.json using CrudManager

[Aniket]

Hi Team,

I want to populate the schedule using CrudManager, I have gone through the docs but I dont see how to read startdate and enddate from the source dynamically using CrudManager.

Any suggestions? How to accomplish this?

For a workaround I use this which works fine

getData() {
    const me = this,
      engine = me.scheduler.schedulerEngine;

me.http.get('./assets/data/data2.json').subscribe(data => {
  me.resources = data['resources'].rows;
  me.events = data['events'].rows;
 me.timeRanges = data['timeRanges'].dueDates;
  me.dependencies = data['dependencies'].rows;
   
  console.log(me.events);
  engine.setStartDate(new Date(data['calendar'].startDate));
  engine.setEndDate(new Date(data['calendar'].endDate));

});
  }

In API docs of crudManager, It does not show how to read calendar startdate and enddate of the schedule.

[pmiklashevich]

Hello,

You can listen to load event of crud manager and setTimeSpan based on data you sent. For example in our Dependencies demo, where we use Crud manager:
Scheduler/examples/dependencies/app.js

    crudManager : {
        listeners : {
            load({ response }) {
                const
                    start = new Date(response.events.metaData.schedulerStartDate),
                    end = new Date(response.events.metaData.schedulerEndDate);

            scheduler.setTimeSpan(start, end);
        }
    },
    autoLoad  : true,
    transport : {
        load : {
            url : 'data/data.json'
        }
    }
},

Scheduler/examples/dependencies/data/data.json

    "success"      : true,
    "resources"    : {...}
    "events"       : {
        "metaData" : {
            "schedulerStartDate" : "2017-12-01T00:00:00.000Z",
            "schedulerEndDate"   : "2017-12-04T00:00:00.000Z"
        },
        "rows"     : [....

Please check out our data guide: https://www.bryntum.com/docs/scheduler/#guides/data/crud_manager.md

You can also calculate dates on client side. See getTotalTimeSpan:

    crudManager : {
        listeners : {
            load({ source : crud }) {
                const { startDate, endDate } = crud.eventStore.getTotalTimeSpan();
                scheduler.setTimeSpan(startDate, endDate);
            }
        },
        autoLoad  : true,
        transport : {
            load : {
                url : 'data/data.json'
            }
        }
    },

And you can also call zoomToFit function on load. But this will change view preset:

    crudManager : {
        listeners : {
            load() {
                scheduler.zoomToFit({
                    // optional
                    leftMargin  : 50,
                    rightMargin : 50
                });
            }
        },
        autoLoad  : true,
        transport : {
            load : {
                url : 'data/data.json'
            }
        }
    },

Best,
Pavel

P.S. Please be patient after you post a reply, wait till one of our team will reply. All questions are on our table and we're trying to reply fast. Thanks!

[Aniket]

Thanks Pavel!!!!

[Aniket]

Hi Pavel, above did help me use crudManager to populate dynamic startdates and enddates for the scheduler, but I cant see the events and resources now.

Reason being my json object having structure

 
 "resources": {
        "vehicles": [ {
        }....
        ]
        }
   

and for events

"events" : {
"tests" : [
{}....
]
}

The scheduler engine internally searches for "rows" property while I have different names coming from backend.
Is there any way I can bind these names ? Just like we did for the calendar using Timespan