jig.calendar

The calendar 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.

Jig Calendar Preview

Configuration options

Some properties are common to all jig types, see Common jig type properties for a list and their configuration options.

Core structure
from	Configure the starting time. You can change the property format by setting the value to the Text With Format property, cntrl+space, and choosing Date. In the format property, select the required date format. The default format saved in the database is yyyy/mm/ddThour:minute:second (i.e., 2022-07-27T08:15:00). Expressions for modifying the date and time format can be found in the .
title	Provide the name of the event. If you do not want to show a title in a jig use title: ' ' or add an expression.
to	Configure the ending time. You can change the property format by setting the value to the Text With Format property, cntrl+space, and choosing Date. In the format property, select the required date format. The default format saved in the database is yyyy/mm/ddThour:minute:second (i.e., 2022-07-27T08:15:00). Expressions for modifying the date and time format can be found in the .

Other options
description	The general description of the event.
icon	The icon will be displayed on the of this jig. Start typing the name of the icon to invoke the available list in IntelliSene. See Jigx icons for information on worknig with icons.
people	The list of invitees/attendees for the event. Use an expression to configure the property, for example, people: [email protected].
location	The event's location, for example, a meeting room or conference center.
tags	Displays a list of tags for the event, such as meeting, interview, or social. The tags array can contain the color and title for each tag. "=[{'title': @ctx.current.item.type, 'color': @ctx.current.item.color}]" or define the tag in a datasource which is referenced in the property. tags: [email protected]

Certain actions can be executed on the event; for example, when pressing on the event opens the URL of the advertised event.

Actions
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 event's details opens. 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.
onPress	When pressing on the event an action executes. Use IntelliSense to select an action or refer to the list of available . When the onPress is configured, the onButtonPress configuration is ignored.

Examples and code snippets

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.

Calendar jig

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.

Calendar jig events

Event details

Meeting details & link

Month with event markers

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.

Using the code below requires data in the database, the jigx.sample solution has the data provided for calendar-sample. You can use the calendar-sample.csv file in GitHub and upload it via the Data configuration in Jigx Management.

calendar-example-dynamic.jigx

title: Calendar
type: jig.calendar
icon: calendar

header:
  type: component.jig-header
  options:
    height: small
    children: 
      type: component.image
      options:
        source:
          uri: https://cdnsm5-ss13.sharpschool.com/UserFiles/Servers/Server_181580/Image/calendar.jpg

data: [email protected]
item:
  type: component.event
  options:
    from: [email protected]
    to: [email protected]
    title: [email protected]
    location:  [email protected]
    people: [email protected]
    description: [email protected]
    tags: [email protected]
    onButtonPress: 
      when: [email protected]="true"
      type: action.open-url
      options:
        title: Join Meeting
        url: [email protected]
        isTrackingTransparencyRequired: false
        isHidden: [email protected]="true"?false:true

datasources

default.jigx

index.jigx

Considerations

• 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 Jigx Management 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. Similarly 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).

Only Entity and Web-view are available as child components for preview.

Calendar preview

Long-press on the event

Examples: See the full example of calendar-jig and calendar-detail-entity in GitHub.

calendar-jig

title: Entity preview - Calendar
type: jig.calendar
icon: career

header: 
  type: component.jig-header
  options:
    height: small
    children: 
      type: component.image
      options:
        title: Upcoming meetings
        source:
          uri: https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWVldGluZ3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=900&q=60
datasources:
  calendar_data: 
    type: datasource.static
    options:
      data:
        - description: New features to be added
          id: 1
          title: Documentation Discussion
          type: meeting
          color: color2
          people: https://images.unsplash.com/photo-1548449112-96a38a643324?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80
        - description: Project manager position
          id: 2
          title: Second interview - Maria Booyens
          type: interview
          color: color3
          people: https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80
          
data: [email protected]_data  
item:
  type: component.event
  options:
    from:
      text: =$fromMillis($toMillis($now()) + ($number(@ctx.current.item.id)- 1) * 3600000)
      format:
        dateFormat: "l"
    to: =$fromMillis($toMillis($now()) + $number(@ctx.current.item.id) *
      3600000)
    title: [email protected]
    description: [email protected]
    tags: "=[{'title': @ctx.current.item.type, 'color': @ctx.current.item.color}]"
    people: "=[{'avatarUrl': @ctx.current.item.people}]"
    onPress: 
      type: action.go-to
      options:
        linkTo: entity-calendar-detail
        parameters:
          title: [email protected]
          description: [email protected]
          type: [email protected]
    onButtonPress: 
      type: action.go-to
      options:
        title: Go to detail
        linkTo: entity-calendar-detail
        parameters:
          title: [email protected]
          description: [email protected]
          type: [email protected]
    buttonTitle: Go to detail

calendar-detail-entity

See also

• Jigs (screens)

• Related examples (Github)