Filling sections in lightbox with seperate database calls

Hello,

I’m using scheduler for a calendar webapplication by using a server side Java application (Spring) and I’m not using therfor the Java-Application you provide (dhtmlxScheduler v.4.4.0 Standard). Unfortunately I have to admit that the progress is quite slow although I really study the examples and all the results from the search engines. The first step is done so the new events are stored in and retrieved from the database by using the load/dataprocessor:

[code]$("#basiccalendar").dhx_scheduler({
xml_date: “%Y-%m-%d %H:%i”,
date: new Date(),
mode: “week”,
day_date: “%l %d.%M”,
all_timed: “short”,
multi_day: true,
prevent_cache: true,
details_on_create: true,
details_on_dblclick: true
});
scheduler.load(context + “content/calendar/eventlist”, “json”);

var dp = new dataProcessor(context + “content/calendar/eventupdate”);
dp.setTransactionMode(“POST”, true);
dp.init(scheduler);
[/code]

In the next step I want to fill sections within the lightbox with content from other tables in the database to fill the events with the choices made. This is the situation for a static way as example:

scheduler.locale.labels.section_activityselect = "Activity";
scheduler.config.lightbox.sections=[	
	{ name:"description", height:50, map_to:"text", type:"textarea", focus:true },
  { name:"activityselect", height:72, map_to:"activity_name", type:"multiselect",
   	options:[
   		{"key":"nightshifts","label":"Nachtdienste und -schichten"},
   		{"key":"weekends","label":"Wochenenddienste und -schichten"},
   		{"key":"overtime","label":"Ueberstunden"}
   	],
   	vertical:"true"},
	{ name:"time", height:72, type:"time", map_to:"auto"}	
]

This works fine.

Now I want to use the same basic situation but using an URL to retireve content from database, for example:

scheduler.locale.labels.section_activityselect = "Activity";
scheduler.config.lightbox.sections=[	
	{ name:"description", height:50, map_to:"text", type:"textarea", focus:true },
	{ name:"activityselect", height:72, map_to:"activity_name", type:"multiselect",
		options: scheduler.serverList("activity_name"),
		script_url: context + 'content/calendar/activitylist',
		vertical:"true" },
	{ name:"time", height:72, type:"time", map_to:"auto"}	
]

The call is made and it returns (at the moment) the same JSON as in the example above but as seperate entity of course. The error windows appears and shows this JSON content.

[{"key":"nightshifts","label":"Nachtdienste und -schichten"},{"key":"weekends","label":"Wochenenddienste und -schichten"},{"key":"overtime","label":"Ueberstunden"}]

A variation did not work as well:

{"collections":{"activity_name":[{"key":"nightshifts","label":"Nachtdienste und -schichten"},{"key":"weekends","label":"Wochenenddienste und -schichten"},{"key":"overtime","label":"Überstunden"}]}}

I assume there may be a kind of envelope but I could not figure out how that looks like.

All examples I found which are using JSON fetch all content at once (01_initialization_loading/data/types_json.php):

{ "data":[{"id":"1","start_date":"2018-03-02 00:00:00","end_date":"2018-03-04 00:00:00","text":"dblclick me!","type":"1"},{"id":"2","start_date":"2018-03-09 00:00:00","end_date":"2018-03-11 00:00:00","text":"and me!","type":"2"},{"id":"3","start_date":"2018-03-16 00:00:00","end_date":"2018-03-18 00:00:00","text":"and me too!","type":"3"},{"id":"4","start_date":"2018-03-02 08:00:00","end_date":"2018-03-02 14:10:00","text":"Type 2 event","type":"2"}], "collections": {"type":[{"id":"1","value":"1","label":"Simple"},{"id":"2","value":"2","label":"Complex"},{"id":"3","value":"3","label":"Unknown"}]}}

or fetch it as XML, but also in one block for events and collections(samples\03_extensions\22_multiselect_initial_loading.html with data/events_multiselect_static.php):

<data><event id='108' ><start_date><![CDATA[2017-11-05 10:15:00]]></start_date><end_date><![CDATA[2017-11-05 13:35:00]]></end_date><text><![CDATA[User: Nataly, Fruits: Madarin, Pineapple]]></text><details><![CDATA[Tokyo]]></details><user_id><![CDATA[2]]></user_id><fruit_id><![CDATA[1,2]]></fruit_id></event>
<event id='107' ><start_date><![CDATA[2017-11-03 14:05:00]]></start_date><end_date><![CDATA[2017-11-03 16:15:00]]></end_date><text><![CDATA[Users: George, Diana; Fruits: Orange, Kiwi, Plum]]></text><details><![CDATA[Belgium]]></details><user_id><![CDATA[3,1]]></user_id><fruit_id><![CDATA[5,4,1]]></fruit_id></event>
<event id='109' ><start_date><![CDATA[2017-09-06 10:20:00]]></start_date><end_date><![CDATA[2017-09-06 13:20:00]]></end_date><text><![CDATA[New event]]></text><details><![CDATA[]]></details><user_id><![CDATA[]]></user_id><fruit_id><![CDATA[2,4,5]]></fruit_id></event>
<coll_options for='user_id'><item value='1' label='George'></item>
(...)
</coll_options><coll_options for='fruit_id'><item value='1' label='Orange'></item>
(...)
</coll_options></data>

So there is my question: Is there a possibility to fill the sections in a lightbox by seperate calls to the database (using JSON or XML) without fetching the complete data-block as in the examples?

Yours boldeveloper

1 Like

Hello,
if you have options defined using scheduler.serverList, you can load items to the page manually (e.g. via $.get or native xhr) and put them into the scheduler using scheduler.updateCollection:

scheduler.config.lightbox.sections=[ { name:"description", height:50, map_to:"text", type:"textarea", focus:true }, { name:"activityselect", height:72, map_to:"activity_name", type:"multiselect", options: scheduler.serverList("activities"), vertical:true}, { name:"time", height:72, type:"time", map_to:"auto"} ];
You can populate activityselect like this:

$.get("data/activities.json", function(items){// items = [{"key":"nightshifts","label":"Nachtdienste und -schichten"},{"key":"weekends","label":"Wochenenddienste und -schichten"},{"key":"overtime","label":"Ueberstunden"}] scheduler.updateCollection("activities", items); scheduler.setCurrentView();// repaint if you use items in templates });

activities.json:

[ {"key":"nightshifts","label":"Nachtdienste und -schichten"}, {"key":"weekends","label":"Wochenenddienste und -schichten"}, {"key":"overtime","label":"Ueberstunden"} ]
Regarding the format of the items - select and multiselect controls require items to have ‘key’ and ‘label’ properties, objects can have any additional properties.
You can also access list of items added via ‘serverList’ programmatically, e.g.

var items = scheduler.serverList("activities");// returns an array

Here is a small demo:
files.dhtmlx.com/30d/1b19c94924 … ptions.zip

1 Like