Starting from Webix 8.0 the widget is deprecated. Use a more powerful alternative - the Scheduler.
Mobile Scheduler supports data loading from JSON and XML data sources. By default, data is loaded into Scheduler in JSON format.
{
id: 7,
text: "some_text",
start_date:"2014-05-11 00:00",
end_date:"2014-05-18 00:00"
...
}
Each data item (event) should have a unique id property and the following obligatory parameters:
There are two possible XML data types:
$$("scheduler").load("events.php","xml");
Here is an example of "xml" data source:
<data>
<item id="2" start_date="2014-05-24 00:00:00"
end_date="2014-06-08 00:00:00" text="French Open"></item>
<item id="3" start_date="2014-06-10 00:00:00"
end_date="2014-06-13 00:00:00" text="Aegon Championship"></item>
<item id="4" start_date="2014-06-21 00:00:00"
end_date="2014-07-05 00:00:00" text="Wimbledon"></item>
</data>
You can use "scheduler" data type (XML data source), if you are going to use Connector for data loading and saving.
$$("scheduler").load("events.php","scheduler");
In case of "scheduler" data type, the xml has the following format:
<data>
<event id="2">
<start_date>
<![CDATA[ 2014-05-24 00:00:00 ]]>
</start_date>
<end_date>
<![CDATA[ 2014-06-08 00:00:00 ]]>
</end_date>
<text>
<![CDATA[ French Open ]]>
</text>
<details>
<![CDATA[ Philippe-Chatrier Court Paris, FRA ]]>
</details>
</event>
<event id="3">
<start_date>
<![CDATA[ 2014-06-10 00:00:00 ]]>
</start_date>
<end_date>
<![CDATA[ 2014-06-13 00:00:00 ]]>
</end_date>
<text>
<![CDATA[ Aegon Championship ]]>
</text>
<details>
<![CDATA[ The Queens Club London, ENG ]]>
</details>
</event>
</data>
Related sample: Initialization
If you have a big data source, you can enable Dynamic Loading and data will be loaded by parts: months or years.
There are several ways of saving data in Webix. The details on saving data are given in the Data Saving article.
To save data in scheduler you can make use of DataProcessor and set the save property:
webix.ready(function(){
webix.ui({
view: "scheduler",
id: "scheduler",
save: ".../events.php"
});
$$("scheduler").load("events.php");
});
Or you can implement your own saving solution by using events.
Back to top