Articles in this section

How to Add a calendar widget as a Custom Widget in Bold BI

Published:

Follow these steps to publish the calendar custom widget into the Bold BI application and make use of it.

Step 1: Download the calendar Widget
Step 2: Publish the custom widget to the Bold BI application with a help link
Step 3: Once you publish the custom widget, the calendar Widget will appear under the Miscellaneous section of the designer panel, as in the following image.

image.png

Step 4: Drag and drop the calendar Widget onto the designer canvas and configure the required data fields.
This widget supports both single-date events and date-range events.

  • If you would like to display events across a date range, please map the appropriate fields to the Start Date and End Date fields in the widget configuration.
    image.png
  • If you only need to display events for a single date, you can leave the End Date field unassigned.
    After assigning the date field, please ensure that its field type is configured as Date or Date Time using the field settings. Please refer to the image below for guidance.
    image.png
Making improvements in the calendar custom Widget

To debug and make changes to the custom widget, follow these steps:

  • Unpack the calendar custom widget by following the steps in the mentioned link. Add new improvements to the UI of the Calendar widget by making changes in the sourcefile.js file.
  • Add the debugger to the sourcefile.js file’s init() method. Also, add the needed changes in the sourcefile.js file.
  • Publish the custom widget by following the steps in this link.
  • Now, open the new dashboard in the Bold BI designer.
  • Open the Developer Tools in the Browser.
  • Drag and drop the Calendar widget in the Designer.
  • Now, the debugger will trigger. We can add the changes to customize the custom widget.
Additional References:

How to create a new custom widget

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
VP
Written by Vaishnavi Panchatcharam
Updated:
Comments (0)
Access denied
Access denied