Calendar Widgets

How to build a widget to Embed in Framework Site

What is a LiveWhale Widget

A widget in LiveWhale Events calendar is nothing more than collection of settings set up in the Widget Builder tool to output events in the format of your choice. The end result of the process is a simple two lines of of code that you can plug into your website to display events from your group calendar.

Who can create widgets?

Widget builder tool is available only to LiveWhale Admins and users who have Curator role in the system. Building widgets requires a very basic knowledge of HTML. If you are interested in building widgets for your site within LiveWhale, fill this form and choose Other option  and describe in details your needs.

Once you have the Curator role assigned to you, login to LiveWhale Events calendar using your IU credentials. Follow these steps to create a widget:

1. Pick the Events Calendar group you want to build widget for next to Your Group at the top.
2. In your LiveWhale Events Calendar dashboard, go to Toolbox located to the left of your name in the top right
3.  To add a new widget, click the blue Add a new widget button
4. Provide a Title to your widget
5. Add a meaningful description for your widget
6. Pick one of the two templates for IU Framework sites if you do not want to create your own formatting markups:
   1. IU Framework: Summary Events Display
   2. IU Framework: Standard Events Display
7. Pick Default or IU Framework for template if you plan to create your own HTML markups
   
   
8. The widget builder has many sections for multiple settings that can be expermineted with. This documentation, however, will only highlight important settings in each section.
   1. Basic Section:
      1. If you want to display, let us just say  5 events, then type 5 in Show up to box
      2. The default Sort option works fine. However, if you have different needs, then pick a different option from the Sort by selection box
      3. Your group should be selected by default. If not, click on show all and pick your group from the list of groups.
         
   2. Tags Section: If you are trying to build a widget for a specific events tag for your group or for multiple tags, us this section to pick your tags:
      
      1. Click Show all for Show items tagged with to pick your tags
      2. It is strongly recommended that you pick any from the selection box for Require that items match
         
         
   3. Event Types Section: This section allows you to pick event types for your widgets.
      1. Check one or more event type for your widget
      2. If you select more than one event type, it is strongly recommended that you pick any from the selection box for Require that items match
         
         
         
   4. Audiences Section: This section allows you to pick audiences for your widgets.
      1. Check one or more audiences for your widget
      2. If you select more than one audience, it is strongly recommended that you pick any from the selection box for Require that items match
         
   5. Campuses Section: This section allows you to pick campuses for your widgets.
      1. Check one or more campuses for your widget
      2. If you select more than one campus, it is strongly recommended that you pick any from the selection box for Require that items match
         
   6. Linked Calendars Section: Unless you have a lot linked calendars in your group, this section will not be useful for your widgets.
      1. If you do have one or more linked calendars in your group, check one or multiple boxes for your linked calendars.
      2. If you select more than one linked calendar, it is strongly recommended that you pick any from the selection box for Require that items match
         
   7. Filtering Section: This secton offers multiple options to filter your events in the widget.
      1. If you want to display only events for today, change Display only events occuring today to Yes.
      2. If you star events in your group calendar and only want to display them, change Only show starred items to Yes.
      3. Filter items by following rules option offers variable you could use your settings for. For example you could pick title from the selection box and set up a rule like title matches Important Event. 
         
         
   8. Dates & archives section: 
      1. You may choose to set up your widgets to show events only before or after a date. The date format is MM/DD/YYYY. 
      2. Simply pick a date from the date pickers in dates after or dates before boxes
      3. If you arebuilding a widget for only archinved events and archive events in your calendar group, change Show archived items to Yes
         
         
   9. Places Section: If you use your own or stored locations and need them to show up for your events in widgets, you should:
      1. Change Require location on map to yes, and provide location coordinates or location id for stored locations
         
   10. Images Section: If you are writing your own HTML markups for your widgets and require larger/smaller images dimensions other than the default, change:
       1. Thumbnail width and height
       2. Leave Crop thumbnails set at Yes
       3.  Change Only show items with an image to Yes if you do not want to show events without images
          
   11. Format Section: This section allows you to create your own HTML markups for how you want your events to look on your website. It is also offer a lot os system variables that you coul simply click to add in HTML format window. Each variable will appear with curly braces. For example, {image} will pull the image fro the event.
       1. Always use Clean markup from Widget markup style
       2. Always Hide date headers by selecting Yes
       3. You can change dates and time formats by looking by details in the Reference link
       4. LiveWhale uses PHP functions to format dates and times
          
   12. Advanced Section: This section offer some more settings options for your widget. You may choose to experiment with any or all of them. They are not necessarily needed for standard widgets we need for our websites.
       

What you will get?

After creatting a widget, you will get two lines of code that you can insert in your WYSIWYG editor's code view.

Here is what you will need to copy from LiveWhale widget builder and paste in WCMS:

Other Widget Resources

Displaying Event Data on your Website (Vendor documentation)

Widget formatting syntax ( Vendor documentation)