Components
event

8min
﻿Overview﻿
The component can only be used in jig.calendar﻿ to display events related to data records. 
﻿Configuration options﻿
Some properties are common to all components, see Common component properties﻿ for a list and their configuration options.
﻿
The core structure includes:  title,  from, and to
Other options:
There are 2 main options how to set up the event component: 
Fill the from and to properties directly with the value
If you want to change the format of our from and to properties, you need to:
Set value to the text property
Choose from a number of options in the format property - what and how would you like to format it
The default format of time that will be saved in the database is: yyyy/mm/ddThour:minute:second (i.e. 2022-07-27T08:15:00) but you can configure the DateTime that will be displayed in the solution (using format property).
For more information about the setting of the date format/ time zone please refer to expressions﻿.
Other important properties are also:
description - The general description of the event
people - The list of invitees/attendees for the event
location - The location of the event
Actions: 
onPress  - The possibility to add any of the actions (please refer to the list of our Actions). This action(s) will be triggered as a reaction to the press event.
onButtonPress  - This will create a primary button on the bottom of the page with the possibility to add any of the actions on it (please refer to the list of our Actions). This action(s) will be triggered as a reaction to the press event.
﻿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 (static)
event (dynamic)
datasources (static)
datasources (dynamic)
|
data: =@ctx.datasources.event-meeting
item: 
  type: component.event
  options:
    title: =@ctx.current.item.name
    description: =@ctx.current.item.description
    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: =@ctx.current.item.people
    tags: =@ctx.current.item.tags
    location: =@ctx.current.item.location
data: =@ctx.datasources.event-meeting
item: 
  type: component.event
  options:
    title: =@ctx.current.item.name
    description: =@ctx.current.item.description
    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: =@ctx.current.item.people
    tags: =@ctx.current.item.tags
    location: =@ctx.current.item.location
﻿
Event of vacation
Vacation 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. 
﻿
event-vacation (static)
event-vacation (dynamic)
datasources (static)
datasources (dynamic)
|
datasources:
  event-vacation:
    type: datasource.static
    options:
      data:
        - name: "John's vacation"
          eventStart: 0
          eventEnd: 168
          location: "Crete, Greece"
datasources:
  event-vacation:
    type: datasource.static
    options:
      data:
        - name: "John's vacation"
          eventStart: 0
          eventEnd: 168
          location: "Crete, Greece"
﻿
Event with action
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 (dynamic)
datasources (dynamic)
|
actions:
  - children:
      - type: action.go-to
        options:
          title: Create new Event
          linkTo: create-event

data: =@ctx.datasources.calendar-data-dynamic
item:
  type: component.event
  options:
    from: 
      text: =$fromMillis($toMillis($now()) + $number(@ctx.current.item.eventStart) * 3600000)
      format:
        dateFormat: lll
    to: 
      text: =$fromMillis($toMillis($now()) + $number(@ctx.current.item.eventEnd) * 3600000)
      format:
        dateFormat: lll
    title: =@ctx.current.item.title
    location:  =@ctx.current.item.location
    tags: "=[{'title': @ctx.current.item.tags, 'color': @ctx.current.item.color}]"
    people: "=[{'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
actions:
  - children:
      - type: action.go-to
        options:
          title: Create new Event
          linkTo: create-event

data: =@ctx.datasources.calendar-data-dynamic
item:
  type: component.event
  options:
    from: 
      text: =$fromMillis($toMillis($now()) + $number(@ctx.current.item.eventStart) * 3600000)
      format:
        dateFormat: lll
    to: 
      text: =$fromMillis($toMillis($now()) + $number(@ctx.current.item.eventEnd) * 3600000)
      format:
        dateFormat: lll
    title: =@ctx.current.item.title
    location:  =@ctx.current.item.location
    tags: "=[{'title': @ctx.current.item.tags, 'color': @ctx.current.item.color}]"
    people: "=[{'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
﻿
See also
﻿Developer reference  
﻿Related examples (Github)﻿
﻿
Updated 14 Jul 2023
Did this page help you?
TABLE OF CONTENTS
Overview
Configuration options
Examples and code snippets
Event of meeting
Event of vacation
Event with action
event

﻿Overview﻿

﻿Configuration options﻿

﻿Examples and code snippets ﻿

Event of meeting

Event of vacation

Event with action

See also

Overview

Configuration options

Examples and code snippets
