Skip to Content
Author's profile photo Karol Kalisz
Karol Kalisz
May 10, 2016 2 minute read

Design Studio SDK: Planning Calendar Component

with new release of SAP UI5 (OpenUI5 Blog – First Preview of OpenUI5 1.34) there are some new controls available – one of them is Planning Calendar – see at OpenUI5 Explored. We have already Design Studio SDK: Activity Viewer (manual Gantt Chart) in community package which is serving with similar functions, this control can bring a bit different visualization.

Important:

* Works only with Design Studio 1.6 SP2 and higher!

* Works only in M mode (as this is M-control of UI5)

pc1.PNG

The good point on integration of UI5 controls is, due to the generation of integration code the effort to get it as SDK extension is very low – as described in Design Studio SDK: New Unified UI5 Components. It means, there is a need of very small adjustments and the rest is based on properties specified in UI5 definitions.

What is Planning Calendar?

Basically it is a display option for events and header, each with dates (start and end) and other properties.

pc6.PNG

and it allows also month / year selection in runtime

pc7.PNG

In the properties you can define:

* Rows

pc4.PNG

* Appointments

pc3.PNG


* Headers

pc10.PNG

Date Entry

Similar to the (updated) Activity Viewer you can enter dates with following mask:

* YYYYMMDD

* YYYYMMDDHHMM

* YYYYMMDDHHMMSS

Options in Runtime/Properties

The general options allow you to set start date and also the view type (month, day, hour)

pc2.PNG

Download & Use

This component is available on the community package, release 3.0 for Design Studio 1.6, as in SCN Design Studio SDK Development Community

Documentation

Component List – SCN Design Studio Community -> look for the component in the list.

Any thoughts?

feel free to add as usual…

Enhancements Ideas?

if you have good ideas (to those who would like to contribute but cannot code…) – place an “issue” with tag “enhancement” under Issues · org-scn-design-studio-community/sdkpackage · GitHub

Assigned Tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Karol,

      Another very nice addition to the SDK Development Community component library.  Given that DS 1.6 SP2 is a prerequisite, I assume we will need to wait for the official release as it appears that SP2 is not available on the Software Download Centre yet?

      Regards,

      Mustafa.

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      SP2 is planned for end of May 2016, details in the release schedule Note. The ui5 update is part of SP 2.

      Author's profile photo Michael Howles
      Michael Howles

      To confirm, it'll be using UI5 1.34?  There were some nice recent additions that I'd like to use as well.

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Mike, you know the right statement 😉

      it is planned to release SP2 with UI5 version 1.34. This information is based on current planning and can be changed any time. Confirmation can be given first when the software is available for everyone in service marketplace.

      Author's profile photo Vikas Madaan
      Vikas Madaan

      Is it possible to show two headers in the planning calendar?

      When i am adding two headers with same date ranges then system is only showing one header.

      Actually customer wants to see the whole block colored. Since only Header entry block is colored completely and appointment block left side is colored we are creating headers instead of appointments.

      But seems it is not possible to show mutiple headers with overlapping dates.

      Please help

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Vikas,

      this is only wrapper for design studio. If the original UI5 control is not supporting 2 headers, then it is not possible to make it happen. What you can try is to adjust CSS styles, but not sure how generic those are.

      Karol

      Author's profile photo Former Member
      Former Member

      Hi ! I’m trying to tweak this calendar and I wondered if there’s a way to get the selected days/month/year.

      I need something like this fiori component https://experience.sap.com/fiori-design-web/calendar-date-interval/#resources

      Thanks!

       

      Author's profile photo Shalaka Golde
      Shalaka Golde

      I am getting a 404-Resource not found error while running the application with Planning Calendar in Local Mode.Please help.

      Author's profile photo Romain Brie
      Romain Brie

      Hi Karol,

      I Have a 404 error when executing the application on the netweaver portal on the  "PlanningCalendar.js" file.

      On local mode, there is no error.

      For example, the file PlanningCalendar.view.xml is well found when launching the application but not the "PlanningCalendar.js" one.

       

      Do you have any idea of the problem ?

       

      Thanks and best regards.

       

      Fabrice BRUN

       

      Author's profile photo Tomasz Gieruszczak
      Tomasz Gieruszczak

      Hi Karol,

       

      Thanks for you effort in making this extension available.

      One question – with scripting I try in run time to add appointment  with addAppointment or  insertAppointment method. It gets added to calendar, I can see it displayed, but it’s gone when I restart application. Should I do anything else to have it saved persistently?

      Best Regards,

      Tomek

      Author's profile photo Younes Hasba
      Younes Hasba

      i Karol,

       

      the component was working fine, after updating to Lumira Release 2.2 SP0 Patch 1 the component is not showing the Title of the Rows.

      i added an issue in GitHub:

      https://github.com/org-scn-design-studio-community/sdkpackage/issues/190

      we are filling the component per script, here is a code snippet:

      we tried to test it like this but no luck.

      PLANNINGCALENDAR_1.addRow("123", "123", "123");
PLANNINGCALENDAR_1.addAppointment("1234", "123", "20190101", "20190201", "TEST", "123 TEST");

       

      thanks

      best regards

      Younes