Adding a UCSF Calendar widget

1. Get the widget embed code via the Widget Builder on calendar.ucsf.edu.

2. In your Drupal site, drop the embed code into a block.

add block form

3. Then place that block into the appropriate region of your site, e.g. in a sidebar.

blocks list

widget in sidebar on homepage

4. Style the widget to your liking. Make sure to provide a higher specifity to your style declarations than the styles that are provided with the widget. For example, you may anchor your overrides off of a block-related CSS class selector.

Troubleshooting

The widget doesn't show on secure pages

This is most likely to default security settings in your browser related to mixed content restrictions.
A workaround is to use protocol-relative URLs in your embed code.
Remove the "http:" prefix from the URL in your embed code's "src" attribute.

E.g., change:

<script type="text/javascript" src="http://calendar.ucsf.edu/widget/view?schools=ucsf...">...</script>

to

<script type="text/javascript" src="//calendar.ucsf.edu/widget/view?schools=ucsf...">...</script>
 

Tips and Tricks

Removing the Localist footer from the widget

By default, the widget contains the Localist Logo in the its footer.

localist logo in widget footer

You may remove this by deleting parts of the generated embed code.

Widget Snippet

Remove any markup following the "</script>" tag.

Widget snippet, footer removed.

 

Further Resources