Table of Contents
The widget’s HTML code
Here is the zip with the required code:
monthlycalendar.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",
"textcolor",
"bgcolor"
],
"fields": [
"ics",
"theme",
"textcolor",
"bgcolor",
"font",
"refresh"
],
"meta": {
"group": "Calendars",
"description": "Display events from one or multiple calendars on a monthly view.",
"static": "semi-static",
"details": "Use this Widget to display any calendar in a monthly grid-like layout. You can add multiple calendars and assign a different color to each - the Widget will show all events from all calendars using the right color. <hr> <span style=\"font-size:12px; font-style: italic\">NOTE: This Widget works with any calendar provider by using ICS calendar links. </span>",
"name": "Monthly Calendar"
},
"supportLiveUpdate": true,
"data": {
"widget": 1,
"font": "Montserrat",
"textcolor": "#999999",
"theme": "light",
"refresh": 15
},
"schema": {
"font": {
"type": "FontFamily",
"title": "Font"
},
"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"
},
"bgcolor": {
"title": "Background Color",
"type": "SpectrumColorPicker",
"styleClass": "col-sm-6 right"
},
"theme": {
"type": "Select",
"options": [
{
"options": [
{
"val": "light",
"label": "Default Theme"
},
{
"val": "custom",
"label": "Custom Theme"
}
],
"hides": [
{
"fields": [
"textcolor",
"bgcolor"
]
},
{
"fields": []
}
],
"shows": [
{
"fields": []
},
{
"fields": [
"textcolor",
"bgcolor"
]
}
]
}
],
"title": "Color Theme"
},
"ics": {
"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"
]
},
"color": {
"type": "SpectrumColorPicker",
"title": "Background Color"
},
"textcolor": {
"type": "SpectrumColorPicker",
"editorAttrs": {
"def": "444444"
},
"title": "Text Color"
},
"name": {
"title": "Name",
"type": "Text",
"validators": [
"required"
]
}
},
"title": "Calendar Feeds",
"fields": [
"name",
"url",
"color",
"textcolor"
],
"validators": [
"required"
],
"type": "calendarCustomList"
},
"textcolor": {
"title": "Text Color",
"type": "SpectrumColorPicker",
"styleClass": "col-sm-6 left"
}
}
}
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.