Skip to Content

SAPUI5 Gantt: Problem Using Calendardef

Feb 02 at 03:33 PM


avatar image

Hi Experts,

i got a problem using calendardefs in order to visualize weekends/holidays in sapui5 gantt chart.

Can you please advise how to model structure should look like and how to bind it?

I allready check the following question:

I coded the binding exact the same as in the question above. But i guess my model is not accurate. The gantt view still looks like this:

Please advise!

Thanks in advance and best regards,


calendardef.png (63.9 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Best Answer
Björn Burandt Mar 26 at 05:59 PM

Hey Stephan Pichler,

i've checked my code another time and i forgot an important part:

Did you already define the calendar like the normal shapes and add it ?

I hope that this solves the problem.



Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hi Björn Burandt,

the missing shape was the problem.

Weekends and factory cal are now coming up accurate.

Thanks a lot! :)

Björn Burandt Mar 22 at 04:03 PM


your chart really looks nice ;)

I can show you an example of the code in our application:

I've defined the gantt-control in xml.

You can put the calendarDefinition on the gantt-chart with "setCalendarDef". In there you can define the path to the calendar-entries, the key and timeInterval-locations.

The OData-Structure:

I've used a JSON-Model - so there is one Part with the calendar-entries und one for our tree in the gantt-diagram.

The connection between calendar-entries and row (children) is the calendar id --> "cal".

In every children there are the masterinformations, the defined shape (in our case: just one shape per line) and the calendar-informations (the key).

So in our case every line has the same calendar - always "cal", it's also possible to define different calendar-informations per line.

If you have more questions - just ask.

Also helpful for topics like this is this page:

Just search for "gantt" and open the "Complex" or "Compete" in a new tab for debugging. There are also examples with different calendars.

Best regards


calendar.png (32.3 kB)
calendar-code.png (21.5 kB)
10 |10000 characters needed characters left characters exceeded
Stephan Pichler Mar 23 at 07:19 AM

Hi Björn Burandt ,

first of all, thank you for your detailed post!

unfortunately, it still doesnt work, this is how my Model looks like:


i only put in one timeinterval for testing, but it doesnt come up.

My binding is the same code segment as in your application:


calendardef still looks blank:


any further idea?



caldef-model.png (27.9 kB)
caldef-binding.png (12.6 kB)
gantt-ss.png (19.5 kB)
Show 1 Share
10 |10000 characters needed characters left characters exceeded

Addition: i tried both date formats:

cal-format.png (4.3 kB)