Calendar Events Feed

The app’s HTML code

Here is the zip with the required code:

calendar_events_feed.zip

The app’s JSON schema

We need the declare a schema for the required configuration fields:

calendars events feed.jsonExpand source

{
  "styleSettings": [
    "theme",
    "font",
    "eventcolor",
    "activebackground",
    "eventbackground",
    "timeformat"
  ],
  "fields": [
    "ics",
    "format",
    "theme",
    "font",
    "dateformat",
    "timeformat",
    "eventcolor",
    "activebackground",
    "eventbackground",
    "refresh"
  ],
  "meta": {
    "description": "Display entries from one or multiple calendars. Useful for meeting rooms and organizing events.",
    "group": "Calendars",
    "details": "Display a feed with all events from a single or multiple calendars. It is ideal for checking out your daily schedule, using it outside of meeting rooms, or displaying the session schedule for events. <hr> <span style=\"font-size:12px; font-style: italic\">NOTE: This Widget works with any calendar provider by using ICS calendar links. </span>",
    "name": "Calendar Events Feed"
  },
  "supportLiveUpdate": true,
  "data": {
    "widget": 2,
    "format": "day",
    "eventbackground": "#EBEBEB",
    "refresh": 15,
    "eventcolor": "#000000",
    "theme": "light",
    "timeformat": 24,
    "dateformat": "DD/MM/YYYY",
    "font": "Montserrat",
    "activebackground": "#cccccc"
  },
  "schema": {
    "dateformat": {
      "type": "Select",
      "options": [
        {
          "val": "DD/MM/YYYY",
          "label": "Date/Month/Year"
        },
        {
          "val": "MM/DD/YYYY",
          "label": "Month/Date/Year"
        },
        {
          "val": "YYYY/MM/DD",
          "label": "Year/Month/Date"
        }
      ],
      "title": "Date Format"
    },
    "format": {
      "type": "Select",
      "options": [
        {
          "val": "day",
          "label": "Daily"
        },
        {
          "val": "week",
          "label": "Weekly"
        },
        {
          "val": "month",
          "label": "Monthly"
        }
      ],
      "title": "Events Format"
    },
    "eventbackground": {
      "type": "SpectrumColorPicker",
      "title": "Background Color"
    },
    "refresh": {
      "type": "Select",
      "options": [
        {
          "val": 15,
          "label": "15 Minutes"
        },
        {
          "val": 30,
          "label": "30 Minutes"
        },
        {
          "val": 60,
          "label": "60 Minutes"
        }
      ],
      "title": "Refresh Feeds Every"
    },
    "eventcolor": {
      "type": "SpectrumColorPicker",
      "title": "Text Color"
    },
    "timeformat": {
      "type": "Select",
      "options": [
        {
          "val": 12,
          "label": "12"
        },
        {
          "val": 24,
          "label": "24"
        }
      ],
      "title": "Timeformat"
    },
    "theme": {
      "type": "Select",
      "options": [
        {
          "options": [
            {
              "val": "light",
              "label": "Light"
            },
            {
              "val": "dark",
              "label": "Dark"
            },
            {
              "val": "custom",
              "label": "Custom"
            }
          ],
          "hides": [
            {
              "fields": [
                "eventcolor",
                "activebackground",
                "eventbackground"
              ]
            },
            {
              "fields": [
                "eventcolor",
                "activebackground",
                "eventbackground"
              ]
            },
            {
              "fields": []
            }
          ],
          "shows": [
            {
              "fields": []
            },
            {
              "fields": []
            },
            {
              "fields": [
                "eventcolor",
                "activebackground",
                "eventbackground"
              ]
            }
          ]
        }
      ],
      "title": "Color Theme"
    },
    "ics": {
      "title": "Calendar Feeds",
      "type": "CustomList",
      "itemType": "Object",
      "subSchema": {
        "url": {
          "title": "Calendar ICS link",
          "type": "Text",
          "help": "<% if(window.whitelabel =='yodeck'){%> <a href='https://www.yodeck.com/docs/display/YO/Calendar+Widgets' target='_blank'> Need help to connect your calendar?</a> <%}%>",
          "validators": [
            "required"
          ]
        },
        "name": {
          "title": "Name",
          "type": "Text",
          "validators": [
            "required"
          ]
        }
      },
      "validators": [
        "required"
      ]
    },
    "font": {
      "type": "FontFamily",
      "title": "Font"
    },
    "activebackground": {
      "type": "SpectrumColorPicker",
      "title": "Active Event Color"
    }
  }
}

App creation

In the upload App page, we create a new app, upload the attached zip file and enter the schema given above.

After that, we can create Calendar apps with the desired configuration.

For any questions, you may have, reach out and our dev team can help you out.