FAQ content

Schedules & Widgets: Create a public calendar widget for a schedule

In this article

Every schedule that has been set up includes an option to create an iframe-based calendar widget for the schedule that can be embedded on any webpage.  And any number of widgets can be created and customized for a schedule. These widgets will display a read-only version of the schedule -- edits to a schedule must be made from within LibStaffer.

Additionally, every schedule includes an option to add your own custom JS/CSS code to alter the look of the widgets that have been created for the schedule. Custom JS/CSS code that is added to a schedule's settings, will be applied to all widgets for that schedule.

Please be aware that when you add a schedule's widget to a webpage, anyone that can access that page can view the schedule.


Create a schedule widget

  1. From the command bar, go to Admin > Schedules Settings.
creating a schedule widget step 1
  1. On the Manage Schedules page, click the Edit Schedule () icon for the schedule you want to create a widget for.
modifying a schedule's settings step 2
  1. Go to the Widgets tab to customize the display of the widget. Any changes that are made will display automatically in the Preview of the widget.
    1. Width of Widget: The width of the widget that will show when embedded into the host page.
    2. Height of Widget:  The height of the widget that will show when embedded into the host page.
    3. Width of Border: The width of the widget border in pixels.
    4. Border Color: The color the border around the widget will be drawn.
    5. Default View: The default view the calendar loads initially. Choose from: Day, Day List, Week, or Month.
    6. Show Time Off button: Set to "Show" if you want to allow users viewing the widget to see the time off for users on the schedule.
    7. Preview: Will show an interactive preview of your widget so you can see how it will look to patrons.
  2. Copy the code for the widget from the Embed Code field and add it to your webpage.
creating a schedule's widget step 3

Customize the schedule widget JS/CSS

For each schedule in LibStaffer, you can add custom JavaScript (JS) and CSS code to allow you to modify the look and feel of the schedule's widget. The custom JS/CSS code that you add to the schedule will be applied to all schedule widgets that have been generated for the schedule, and will not be applied to the look of the schedule when viewed from the Schedule page within LibStaffer.

To add JS/CSS to a schedule's widgets:

  1. From the command bar, go to Admin > Schedules Settings.
creating a schedule widget step 1
  1. On the Manage Schedules page, click the Edit Schedule () icon for the schedule you want to create a widget for.
modifying a schedule's settings step 2
  1. Go to the Widgets tab.
  2. Click on the Custom JS/CSS Code panel to expand it, and enter your custom code in the text area.
    • Place all CSS code between <style></style> tags.
    • Place all JS code between <script></script> tags.
  3. Click Save.
adding custom code for a schedule's widgets