Using Scheduler without server logic: html5's WebSQL+js


I’m new to this forum and also I’m glad to hear from DHX… The Scheduler is going to save my life (yep :slight_smile: ).

I’m making a project for University, degree final project. I’m working on a backend in order to manage some data (festivities of basque country). I’m making it without using any server (I only access sometimes my restfull api + communication in json format), so that the app works offline most of the time.

To make it, I’m using WebSQL (yep, I know it is deprecated), so I’m making queries through javascript.

DHX’s Scheduler is going to simplify my life A LOT, so I want to use it. As I can see, the communication is made through PHP, and the data stored in a database, but in a server…

Could I adapt it to my requirements? I mean, avoid PHP and server, load and save data into my WebSQL storage with Javascript? Is there any tutorial or, at least, any clue to go on?

Hope it can be understood and please, help!!

Thank you so much, I will compensate anyway if someone can help me.


I have advanced a little bit. Now, I know what to do:

  • 02_serialize_json.html more or less: without week view (done). I want to serialize events so as to save in my WebSQL database and to send to my Restful API via Ajax.

What I really want to do is:

  • Personalize events properties: I want to add some fields, e.g. event’s name (spanish), event’s name (english), event’s name (basque), description and…

  • Add a google maps localization to the event (as we can see in mobile scheduler example, just click a button, select location and go back to the event).

These two things are the only things I need to do.

Any help please?

Thank you in advance!


I have been able to edit event’s window: it is called lightbox edit to add new sections.
I have also added the map view support, in order to locate in the map the events.

I’m learning little by little. Now the only thing left is to save data into the websql database. Also if the user wants, send the data (formatted in JSON) via my Restful API to my server.

Here is where I am having some problems. When I click on show (so as to show my in an alert the data formatted into JSON) it isn’t shown the new sections which I added…

Do I need to modify something? In the dhtmlxscheduler_serialize.js file perhaps?

Thank you!

Could I adapt it to my requirements?

Yep, it has not any fixed server side requirements.

a) you can use scheduler.parse to load json data and scheduler.serialize to generate json data for saving. It will can be attached to any js logic which will provide or store json data in any custom way

b) there is a more advanced approach - it possible to customize dataprocessor to work with client side storage instead of server side DB ( unfortunately I do not have any samples )

Personalize events properties: I want to add some fields
Event can have any custom properties ( you can just add custom properties to json data )
To have them visible you need to
a) customize templates, if you want to render this data inside of event’s bars
b) customize lightbox configuration to make them editable

Add a google maps localization to the event
There is map_view extension, but it will require internet connection ( as it uses online services )

it isn’t shown the new sections which I added
By default scheduler takes a single event for investigation, and based on it detects which fields will be included in serialization. You can redefine this logic

scheduler.data_attributes=function(){ return [ ["start_date", scheduler.templates.xml_format], ["end_date", scheduler.templates.xml_format], ["text"], ["custom_field"] //you can add any other custom fields in similar way ]; }


I will try it this afternoon :slight_smile:


I’m about to finish it :smiley:. But before that, I just want to refine a couple of things.

  1. When I enter a new event (or even edit some) I have a button “Location”. What I don’t know how to implement is the following behaviour: when you click the button, go to map view in order to click and select the location. This is done in the mobile scheduler example, but I’m not able to figure it out…
    Here is the code where I should implement the behaviour:
scheduler.attachEvent("onLightboxButton", function(button_id, node, e){
	if(button_id == "locate_button"){
		//TODO : implement button behaviour
  1. I wish to introduce date limits (start and ending ones), so that created events must be between that range. I found the following code, but it doesn’t work:
scheduler.config.limit_start = new Date(2013,8,15);
scheduler.config.limit_end = new Date (2013,8,29);
  1. Events aren’t shown in the Map View (left part of the “page”).

  2. Could I introduce the “pin” icon of google maps showing the location of an event?

I have been able to edit the lightboxes, but in another way.

I attach my code.

Thank you :slight_smile:

As I can see, the problem 3) it doesn’t exist if the new event is created in the Map View. Otherwise, is not shown.

(1) Unfortunately there is no full built-in solution for such use-case, you can add extra buttons, and assing the custom handler, after this point it must be a custom code ( to show the map, to handle click, to return the location ) - it is a good place for improvments in the next version though.

(2) You need to include ext/scheduler_limit.js to have working limits

Stanislav, thank you so much for your help.

Limits are now working.

Unfortunately, I do not know how to add a custom form to the lightbox… Could you give me an example?

The only thing I would want to do is to add a map to the lightbox, where you could move the marker to change coordinates (form input field changing whenever marker moves from one position to another). I don’t want you to make me the work, just one practical example adding a custom form, for example adding the default fields. Here it is somehow explained … ditor.html , but I have got lack of expertise in dhtmlx…

Another solution I have made in order not to modify the form (indeed, there is no need), is that when I click “location” button show up a modal (I’m using bootstrap) with the google maps window.

Two problems:

  1. Modal windows shows behind the lightbox. Any way to caryy the lightbox bahind the modal (and when the modal is closed, show up the lightbox or give it to the front)?

  2. How to link google maps modal coordinates and the lightbox coordinates input?

Very big THANKS

you can edit dhtmlxscheduler.css and change default z-index of lightbox to smaller values

.dhx_cal_light{ z-index:101; } .dhx_cal_cover{ z-index:100; }


If you have point object from the google map, you can save it to the event like

var id = scheduler.getState().lightbox_id; scheduler.getEvent(id).lat =; scheduler.getEvent(id).lng = point.lng();

First of all, sorry for my mistakes in the last two posts.

Finally, I’m going to let it as is, without any change.

Now I’m implementing these functions:

  • save(): stores each event’s information into WebSQL database.
  • load(): it’s launched when scheduler is started. It loads the right data into the scheduler at startup.
  • saveInApi(): it sends a POST call to my Restful API through AJAX to transfer WebSQL data.

Will those functions work? The last one for sure, the first one I’m almost sure, but the second one I must check how to do it.


Sorry for spamming, but my last issue is the following: I have a function that generates JSON encoded text. This json i want to send to scheduler.load() that way:

var datosJson;
loadDatosActosFiesta(id_fechafiestaanyo, function(datosJson){				

But browser tells me in console: file:///C:/Users/Jon…; as it would look for a file that generates the json…

Any way to load scheduler with json?

thank you


To load data from a Json var, use:

var datosJson;
loadDatosActosFiesta(id_fechafiestaanyo, function(datosJson){
	scheduler.parse(datosJson, "json");

So the work is done.

Thank you so much for the help, Stanislav.

And I must thank DHX to this excellent work, scheduler. Hope it will improve!!