jig.calendar
This jig displays an agenda calendar view. jig.calendar contains data with an event component, which adds functionality to the calendar and provides a convenient overview of your scheduled events.
For more information about the setting of the date format/ time zone please refer to expressions.
The core structure includes: from, to, and title
The from and to properties specify the date and time of the event. Expressions for modifying the date and time format can be found in the expressions topic.
title - text title of the event
Other options:
people - Displays a list of people invited to the event. The people array must contain the fullName and avatarUrl for each person. You can see the notation below in the example for jig.calendar.
tags - Displays a list of tags for the event. The tags array must contain the color and title for each tag. You can see the notation below in the example for jig.calendar.
isAllDay - true/false
description - text description of the event
location - text representing the location of the event
Actions:
onPress - In this property, you can configure any action that is triggered when the event is pressed. When the onPress is configured, the onButtonPress configuration is ignored.
onButtonPress - You can set any action in this property just like in the onPress property. The difference is that if only onButtonPress is configured, after pressing on the event, a modal window with the details of the event opens first. The modal contains a button for the action configured in the onButtonPress property. When isHidden is used with when:false , the isHidden property is automatically overwritten on the mobile device and set to isHidden:true and the button automatically hides.
The code below is an extract from the full jigx-samples solution. The code snippets describe the component discussed in this section. For the solution to function in the Jigx app download the full jigx-samples project from GitHub, and follow the instructions in Setting up your solution.
In this example, we show the daily agenda, by tapping we can get the details about the actual event and the overview for a month is also available. You can easily recognize the days we have an event planned thanks to the markings.
Examples: See the full code sample using static data in GitHub. See the full code sample using dynamic data in GitHub. Datasources: See the full code sample for datasources for static data in GitHub. See the full code sample for datasources for dynamic data in GitHub.
- The sample above is for illustrative purposes only, and shows how to use a SQL statement to always return dates with events from the next day onwards.
- A dynamic data table defines the event data, and a JSON view of one of the records can be seen in Dynamic Data.
- The calendar uses a data source that selects the list of events. The start and end dates are dynamically calculated using the SQLite date() and strftime() functions. The JSON in the Dynamic Data is a string when entered through with the result of what seems like a double json_extract, but is not.
- The SQL select statement that returns the startDT and endDT takes today’s date, adds the day offset as specified in the start field in Dynamic Data, and appends the time in the start field. The complete start dates and times are built up by concatenating the two values. Similiarly for the end date except add an hour to the SQL statement.
- When using applications such as Microsoft Exchange and Microsoft Graph as a datasource, replace the date part of the datetime with the same formula while using the time part of the graph calendar item.
Calendar with preview
This example displays a preview after long-pressing the event in the Calendar jig (on the event)
Examples: See the full example of calendar-jig and calendar-detail-entity in GitHub.
