Add the calendar jig and datasource

8min
Overview
In this section, you will learn how to add a second 
﻿ file to the Hello 
﻿ project and add the calendar 
﻿ next to the map 
﻿ on the home hub﻿.  You create a data source file in the datasource folder containing the calendar details that provide the data for the week, events, meeting subjects, dates, and times. 
See Jigx Concepts﻿ to learn what 
﻿s, widgets, and the 
﻿ are.
Steps
Add the calendar-data.jigx data source file 
You first need to add data that the calendar 
﻿ can read from. For this step, you create a Static Datasource in the datasource folder of the project, which is automatically synced to the 
﻿ Cloud. Likewise, data updated on the 
﻿ Cloud automatically syncs to the device. Right-click on the datasources node in Explorer and select New file.
Name the file calendar-data. 
﻿ automatically adds the .jigx extension to your file. The 
﻿ auto-complete popup displays the data source options. Select Static datasource from the list.
Under the data node, you need to provide the details for the events in the calendar. The following fields are available for use with each event entry, you can add your own event entries or use the code example below.
YAML
type: datasource.static
options:
  data:
    - id: 1
      eventEnd: 2 
      eventStart: 1 
      location: Redmond, WA 
      people:
        - avatarUrl: https://randomuser.me/api/portraits/men/1.jpg   
          fullName: Tim Cook 
      tags:
        - color: color2 
          title: Negotiation 
      title: Negotiation with Company A
type: datasource.static
options:
  data:
    - id: 1
      eventEnd: 2 
      eventStart: 1 
      location: Redmond, WA 
      people:
        - avatarUrl: https://randomuser.me/api/portraits/men/1.jpg   
          fullName: Tim Cook 
      tags:
        - color: color2 
          title: Negotiation 
      title: Negotiation with Company A
﻿
4. Once you have added the fields your calendar-data.jigx file should resemble the code below.
calendar-data.jigx
# A global static datasource that allows easy access and reusability to the data across various jigs and components
type: datasource.static
options:
  data:
    - id: 1
      eventEnd: 2 
      eventStart: 1 
      location: Redmond, WA 
      people:
        - avatarUrl: https://randomuser.me/api/portraits/men/1.jpg   
          fullName: Tim Cook 
      tags:
        - color: color2 
          title: Negotiation 
      title: Negotiation with Company A
    - id: 2
      eventEnd: 4
      eventStart: 2  
      location: Palo Alto, CA
      people:
        - avatarUrl: https://randomuser.me/api/portraits/men/49.jpg
          fullName: Michael Tate
      tags:
        - color: color5
          title: Qualification
      title: Demo for Company B
    - id: 3
      eventEnd: 25
      eventStart: 24
      location: Menlo Park, CA
      people:
        - avatarUrl: https://randomuser.me/api/portraits/men/90.jpg
          fullName: Michael Tong
      tags:
        - color: color6
          title: Verbal
      title: Sign contract  
# A global static datasource that allows easy access and reusability to the data across various jigs and components
type: datasource.static
options:
  data:
    - id: 1
      eventEnd: 2 
      eventStart: 1 
      location: Redmond, WA 
      people:
        - avatarUrl: https://randomuser.me/api/portraits/men/1.jpg   
          fullName: Tim Cook 
      tags:
        - color: color2 
          title: Negotiation 
      title: Negotiation with Company A
    - id: 2
      eventEnd: 4
      eventStart: 2  
      location: Palo Alto, CA
      people:
        - avatarUrl: https://randomuser.me/api/portraits/men/49.jpg
          fullName: Michael Tate
      tags:
        - color: color5
          title: Qualification
      title: Demo for Company B
    - id: 3
      eventEnd: 25
      eventStart: 24
      location: Menlo Park, CA
      people:
        - avatarUrl: https://randomuser.me/api/portraits/men/90.jpg
          fullName: Michael Tong
      tags:
        - color: color6
          title: Verbal
      title: Sign contract  
﻿
Add a calendar jig file
Open the Hello-
﻿ solution in the 
﻿ in 
﻿, right-click on the jigs node in Explorer, and select New file.
Name the file calendar.
The file opens and shows the 
﻿'s auto-complete popup listing the five 
﻿ types. For this solution, we will be using the Calendar 
﻿ to create the UI for displaying data in a calendar format. Click on Calendar to open the skeleton YAML created by the 
﻿. 
On the line under type:, type icon:. To select an icon from the predefined list start typing the first two letters of the name of the icon, in this case ca, the list of icons starts to populate as you type. Select calendar-3 from the list. This icon displays on the widget on the 
﻿ of the 
﻿.
Delete the header, onFocus and datasources section. You created the calendar-data.jigx datasource file in the step above, now you can reference the data from the 
﻿ file by using an expression.  At the data node add calenar-data so that it resembles data: [email protected]. With expressions, you can structure data before binding them to the UI components. 
﻿
6. The component.event type is used to display events related to the data records. Use (ctrl+space) next to each field to select the value you want returned.
7. To display the date in UTC format we use a JSONata expression to convert the date from milliseconds to UTC for both the start and end date.  Add the following expression under from: for the start date.
from: =$fromMillis($toMillis($now()) + @ctx.current.item.eventStart * 3600000)
For the end date under to: add the following expression:
to: =$fromMillis($toMillis($now()) + @ctx.current.item.eventEnd * 3600000)
For title, location, people and tags use (ctrl+space) after the [email protected]. to select the value available from the datasource.
YAML
options:
    title: [email protected]
    # Use a jsonata expression to get the date in milliseconds and then convert it to UCT for the start time 
    from: =$fromMillis($toMillis($now()) + @ctx.current.item.eventStart * 3600000)
    # Use a jsonata expression to get the date in milliseconds and then convert it to UCT for the end time
    to: =$fromMillis($toMillis($now()) + @ctx.current.item.eventEnd * 3600000)
    location: [email protected]
    people: [email protected]
    tags: [email protected]
options:
    title: =@ctx.current.item.title
    # Use a jsonata expression to get the date in milliseconds and then convert it to UCT for the start time 
    from: =$fromMillis($toMillis($now()) + @ctx.current.item.eventStart * 3600000)
    # Use a jsonata expression to get the date in milliseconds and then convert it to UCT for the end time
    to: =$fromMillis($toMillis($now()) + @ctx.current.item.eventEnd * 3600000)
    location: =@ctx.current.item.location
    people: =@ctx.current.item.people
    tags: =@ctx.current.item.tags
﻿
8. Your calendar.jigx file should resemble the code below.
﻿
calendar.jigx
# The system name that uniquely identifies the jig
title: Calendar
# The jig type used to display a calendar with the current date
type: jig.calendar
# icon that displays on the widget on the home hub
icon: calendar-3

# The expression that structures the data from the datasource before binding it to the jig. Expressions are JSONata based
data: [email protected]-data

item:
  type: component.event
  options:
    title: [email protected]
    # Use a jsonata expression to get the date in milliseconds and then convert it to UCT for the start time 
    from: =$fromMillis($toMillis($now()) + @ctx.current.item.eventStart * 3600000)
    # Use a jsonata expression to get the date in milliseconds and then convert it to UCT for the end time
    to: =$fromMillis($toMillis($now()) + @ctx.current.item.eventEnd * 3600000)
    location: [email protected]
    people: [email protected]
    tags: [email protected]
# The system name that uniquely identifies the jig
title: Calendar
# The jig type used to display a calendar with the current date
type: jig.calendar
# icon that displays on the widget on the home hub
icon: calendar-3

# The expression that structures the data from the datasource before binding it to the jig. Expressions are JSONata based
data: =@ctx.datasources.calendar-data

item:
  type: component.event
  options:
    title: =@ctx.current.item.title
    # Use a jsonata expression to get the date in milliseconds and then convert it to UCT for the start time 
    from: =$fromMillis($toMillis($now()) + @ctx.current.item.eventStart * 3600000)
    # Use a jsonata expression to get the date in milliseconds and then convert it to UCT for the end time
    to: =$fromMillis($toMillis($now()) + @ctx.current.item.eventEnd * 3600000)
    location: =@ctx.current.item.location
    people: =@ctx.current.item.people
    tags: =@ctx.current.item.tags
﻿
Add the calendar jigId in the index.jigx file 
Click on the index.jigx file to add the calendar widget to appear on the 
﻿ screen next to map widget. Under the widgets: section add the following:size: 2x2 and the jigId: calendar and save the project. 
Your index.jigx file should resemble the code below.
index.jigx
# The system name that uniquely identifies the solution
name: hello-jigx-solution
# The friendly name of the solution
title: Hello-Jigx Solution
# The built-in category selected for this solution
category: business
#The widgets that act as top-level navigation elements for jigs
widgets:
  - size: "2x2" # The selected size of the widget on the home hub
    jigId: map
  - size: "2x2"
    jigId: calendar
# The system name that uniquely identifies the solution
name: hello-jigx-solution
# The friendly name of the solution
title: Hello-Jigx Solution
# The built-in category selected for this solution
category: business
#The widgets that act as top-level navigation elements for jigs
widgets:
  - size: "2x2" # The selected size of the widget on the home hub
    jigId: map
  - size: "2x2"
    jigId: calendar
﻿
﻿
Updated 05 Aug 2024
Did this page help you?
Create the Calendar
Publish your project
Docs powered by Archbee
TABLE OF CONTENTS
Overview
Steps
Add the calendar-data.jigx data source file
Add a calendar jig file
Add the calendar jigId in the index.jigx file