Components

event

5min

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﻿
﻿
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 Expressions - cheatsheet﻿.
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 Expressions - cheatsheet﻿.
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 whihc 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 Actions﻿. When the onPress is configured, the onButtonPress configuration is ignored.
﻿Examples and code snippets ﻿
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
event-of-meeting-dynamic
event-meeting
event-meeting-dynamic
type: datasource.static
options:
  data:
    - name: "Meeting with the mayor"
      description: "Discussion of subsidies"
      eventStart: 1
      eventEnd: 2
      tags:
        - color: color2
          title: Important
      location: "4 Great Jones Alley, NY"
      people: 
        - avatarUrl: https://images.unsplash.com/photo-1548449112-96a38a643324?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80
          fullName: John Doe
        - avatarUrl: https://images.unsplash.com/photo-1624224971170-2f84fed5eb5e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1598&q=80
          fullName: Andrew Williams
        - avatarUrl: https://images.unsplash.com/photo-1546961329-78bef0414d7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80
          fullName: July Nelson
        - avatarUrl: https://images.unsplash.com/photo-1591084728795-1149f32d9866?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=928&q=80
          fullName: Karl Fisher
type: datasource.static
options:
  data:
    - name: "Meeting with the mayor"
      description: "Discussion of subsidies"
      eventStart: 1
      eventEnd: 2
      tags:
        - color: color2
          title: Important
      location: "4 Great Jones Alley, NY"
      people: 
        - avatarUrl: https://images.unsplash.com/photo-1548449112-96a38a643324?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80
          fullName: John Doe
        - avatarUrl: https://images.unsplash.com/photo-1624224971170-2f84fed5eb5e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1598&q=80
          fullName: Andrew Williams
        - avatarUrl: https://images.unsplash.com/photo-1546961329-78bef0414d7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80
          fullName: July Nelson
        - avatarUrl: https://images.unsplash.com/photo-1591084728795-1149f32d9866?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=928&q=80
          fullName: Karl Fisher
﻿
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
multi-day-event-dynamic
event-training
event-training-dynamic
# add file under jigs folder 
title: =$now('[D1o] [MNn] [Y]') 
type: jig.calendar
data: [email protected]-training
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)
# add file under jigs folder 
title: =$now('[D1o] [MNn] [Y]') 
type: jig.calendar
data: =@ctx.datasources.event-training
item:
  type: component.event
  options:
    title: =@ctx.current.item.name
    from: =$fromMillis($toMillis($now()) + @ctx.current.item.eventStart * 3600000)  
    location: =@ctx.current.item.location
    to: =$fromMillis($toMillis($now()) + 2 * 60 * 60000 + @ctx.current.item.eventEnd * 3600000)
﻿
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
create-event.jigx
add-event-user.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]-dynamic
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]
# 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: =@ctx.user.email

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

data: =@ctx.datasources.event-dynamic
item:
  type: component.event
  options:
    from: =@ctx.current.item.eventStart != null ? $fromMillis($toMillis($now()) + $number(@ctx.current.item.eventStart) * 3600000) :$fromMillis($toMillis(@ctx.current.item.date-from))
    to: =@ctx.current.item.eventEnd != null ? $fromMillis($toMillis($now()) + $number(@ctx.current.item.eventEnd) * 3600000) :$fromMillis($toMillis(@ctx.current.item.date-to))  
    title: =@ctx.current.item.title
    location:  =@ctx.current.item.location
    tags: "=[{'title': @ctx.current.item.tags, 'color': @ctx.current.item.color}]"
    people: =@ctx.current.item.avatar != 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: =@ctx.current.item.id
                title: =@ctx.current.item.title
﻿
﻿

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 Expressions - cheatsheet.
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 Expressions - cheatsheet.
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 whihc is referenced in the property. tags: [email protected]

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 Actions. When the onPress is configured, the onButtonPress configuration is ignored.