event

The component can only be used in the jig.calendar to display events related to data records. All events have a start and end date. Additional elements can be added, such as people attending the event or where the event will take place.

Configuration options

Some properties are common to all components, see Common component 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). For more information about the setting of the date format/ time zones, refer to .
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). For more information about the setting of the date format/ time zones, refer to.
title	Provide the name of the event.

Other options
description	The general description of the event.
location	The event's location, for example, a meeting room or conference center.
people	The list of invitees/attendees for the event. Use an expression to configure the property, for example, people: [email protected].
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

Event of meeting

Meeting event

The jig displays the event on the calendar. We immediately see what time the meeting will take place, where it will take place and which people will attend.

Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

Datasources: See the full datasource for static data in GitHub See the full datasource for dynamic data in GitHub

event-of-meeting

# add file under jigs folder 
type: jig.calendar
title: =$now('[D1o] [MNn] [Y]')

data: [email protected]
item: 
  type: component.event
  options:
    title: [email protected]
    description: [email protected]
    from: 
      text: =$fromMillis($toMillis($now()) + @ctx.current.item.eventStart * 3600000)
      format:
        dateFormat: lll
    to: 
      text: =$fromMillis($toMillis($now()) + @ctx.current.item.eventEnd * 3600000)
      format:
        dateFormat: lll
    people: [email protected]
    tags: [email protected]
    location: [email protected]

event-of-meeting-dynamic

event-meeting

event-meeting-dynamic

Event of training

Training event

The jig displays a multi-day event on the calendar.

Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

Datasources: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

multi-day-event-day-event

# add file under jigs folder 
title: =$now('[D1o] [MNn] [Y]') 
type: jig.calendar
data: [email protected]
item:
  type: component.event
  options:
    title: [email protected]
    from: =$fromMillis($toMillis($now()) + @ctx.current.item.eventStart * 3600000)  
    location: [email protected]
    to: =$fromMillis($toMillis($now()) + 2 * 60 * 60000 + @ctx.current.item.eventEnd * 3600000)

multi-day-event-dynamic

event-training

event-training-dynamic

Event with action

Event with action

The jig displays an event on the calendar with actions on the main screen or in the detail of the event.

Examples: See the full example using dynamic data in GitHub. See also the supporting files create event and add event users in GitHub.

Datasource: See the full datasource using dynamic data in GitHub.

event-with-action.jigx

# add file under jigs folder 
title: Calendar with action
type: jig.calendar

datasources:
  event-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/calendar
      query: | 
        SELECT
          id,
          '$.title',
          '$.location',
          '$.time',
          '$.date-from',
          '$.date-to',
          '$.eventStart',
          '$.eventEnd',
          '$.fullname',
          '$.avatar',
          '$.color',
          '$.tags',
          '$.category',
          '$.email'
        FROM [default/calendar] WHERE '$.category' = "people"
        UNION 
        SELECT
          id,
          '$.title',
          '$.location',
          '$.time',
          '$.date-from',
          '$.date-to',
          '$.eventStart',
          '$.eventEnd',
          '$.fullname',
          '$.avatar',
          '$.color',
          '$.tags',
          '$.category',
          '$.email'
        FROM [default/calendar] 
        WHERE '$.email' = @email and '$.category' = "update"
      queryParameters:
        email: [email protected]

actions:
  - children:
      - type: action.go-to
        options:
          title: Create new Event
          linkTo: create-event

data: [email protected]
item:
  type: component.event
  options:
    from: [email protected] != null ? $fromMillis($toMillis($now()) + $number(@ctx.current.item.eventStart) * 3600000) :$fromMillis($toMillis(@ctx.current.item.date-from))
    to: [email protected] != null ? $fromMillis($toMillis($now()) + $number(@ctx.current.item.eventEnd) * 3600000) :$fromMillis($toMillis(@ctx.current.item.date-to))  
    title: [email protected]
    location:  [email protected]
    tags: "=[{'title': @ctx.current.item.tags, 'color': @ctx.current.item.color}]"
    people: [email protected] != null ? [{'fullName':@ctx.current.item.fullname, 'avatarUrl':@ctx.current.item.avatar}]
    onButtonPress: 
      type: action.action-list
      options:
        title: Register for the meeting
        actions:
          - type: action.go-to
            options:
              linkTo: add-event-user
              parameters:
                id: [email protected]
                title: [email protected]

create-event.jigx

add-event-user.jigx