Table of Contents
The widget’s HTML code
Here is the zip with the required code:
calendar_events_feed.zip
The widget’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": [
{
"prompt": "If you set the refresh rate of the widget to be less than 15 minutes, consider that there is a <b> small </b> chance to fail on data acquisition",
"val": 1,
"label": "1 Minute"
},
{
"prompt": "If you set the refresh rate of the widget to be less than 15 minutes, consider that there is a <b> small </b> chance to fail on data acquisition",
"val": 3,
"label": "3 Minutes"
},
{
"prompt": "If you set the refresh rate of the widget to be less than 15 minutes, consider that there is a <b> small </b> chance to fail on data acquisition",
"val": 5,
"label": "5 Minutes"
},
{
"prompt": "If you set the refresh rate of the widget to be less than 15 minutes, consider that there is a <b> small </b> chance to fail on data acquisition",
"val": 10,
"label": "10 Minutes"
},
{
"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"
}
}
}
Widget creation
In the upload widget page, we create a new widget, upload the attached zip file and enter the schema given above.
After that, we can create Calendar widgets with the desired configuration.
For any questions, you may have, reach out and our dev team can help you out.