Oracle's Redwood is not just a set of page templates and a great look and feel, it is also includes reusable components that simplify and accelerate application development. One such component is the Redwood Calendar component – a great way to interact with time related data in your application. In this blog we show how to leverage the component in your application.
The calendar component is able to show dateTime related information in a monthly, weekly, daily, and list views. It is able to manage multiple calendars showing and hiding them. In addition it has place holders for showing event details and for creating new events. In the demo below we show you how to add the calendar to your application.
Getting Started
We are starting with an empty application that is based on the Oracle Redwood Starter Application template and leveraging the general overview page template.
Then we simply drag the calendar component onto our page.
The component supports the concepts of multiple calendar providers – in our example we have two calendars – a team and a personal calendars. You define these calendars along with their display name and color of events as an array in the calendar providers property of the component.
Next you'll want to populate the events in the calendar, the component expects a data provider such as an ArrayDataProvider (ADP) with a specific structure of data that includes: id, eventTitle, start, end, calendarProvider, allDay (boolean). In our example we create a type with these attributes, and then create an ADP based on that type.
Next we'll want to fetch the list of events – in our case we get this from a business object in the VB database – and populate our ADP. You can of course pick this from other REST based data sources.
In the demo we create an action chain that calls the REST endpoint to get the data and then loops over the returned rows to add them to the ADP. This allows us to map specific returned attributes from the BO to the right attributes of our ADP records.
You'll use the ADP as the data source for the calendar, and you should also specify an array of strings that tells the calendar component which calendar providers to show.
That's about it – you now have a calendar view of your data.
Showing Event Details
The calendar component has built in event for event selection that pops up a drawer on the side where you can show more information about the event. In the demo we create a new fragment in our app to show event details. Then we add this fragment into the slot of the calendar. We also map a variable to the selected events property of the calendar, and pass the selected event id as a parameter to the fragment.
Adding New Events
In the third part of the video we enable the calendar's add event button, and tie it to a dialog that will show a create form that add rows to the table in the database, and then reload the events into the calendar. Once an event has been added to our data source, we'll want to requery the events to repopulate the calendar (alternatively you can directly add the event into the ADP data).
There is much more that you can do with the calendar, including dragging and dropping events to change their timing, resizing them on the calendar to change their length etc. The calendar component is a very powerful component with a complete set of operations that you can customize.