How to Use the Calendar Widget

The Calendar Widget is available as a Drupal module as well as a straight html and javascript bundle.

Preview the Widget

It provides the ability to generate and display blocks (lists or displays) of calendar events. To view the different display options, see the Calendar Widget Demo page.

Configuring the Widget

Option 1: Drupal Module

1. Download and Install it like any other module. The Drupal 7 module is available in github. The Drupal 8 module will be coming soon.

2. Configuration

The configuration page is located under Configuration > BYU > Calendar Widget. (If you haven't updated your widget recently, it may be located under Configuration > Date > Calendar Widget.) With the widget, you are able to choose (as shown in the screenshot below) how many calendar blocks will be displayed on your site. You may edit each block individually to return different types of events.

Depending on how many widget blocks you create, you will see that same number of editable blocks below. In each block, you can choose 

  • Number of Days, or how many days, including today, the calendar block will display
  • Categories, or which categories your block will display
  • Display Type, or how the events for you block will show

Shown below is the screenshot for a typical editable widget block.

Option 2: Straight HTML and Javascript Bundle

1. Go to view the calendar widget project in github: https://github.com/byuweb/calendar-widget

2. View the index.html file.

3. Copy the links to include the css and js links in the head of your page, as shown below. Enable the fonts file (the first link) ONLY if you aren't already loading the BYU Fonts in your theme or on your page.

 4. Copy and paste the javascript to where you want your block shown, as shown below.

Each individual setting in the code is shown below.

Display Types

Classic List Display

The classic display will show a simple list of the upcoming events that fit the parameters given. The date, name of event, and time is listed clearly (as shown in the screenshot below). There is also an option to limit the amount of events displayed.

Vertical Tiles

The Vertical Tiles will display simple tiles of the upcoming events that fit the parameters given. The date, name of event, and time is listed clearly (as shown in the screenshot below). There is also an option to limit the amount of tiles displayed.

Horizontal Tiles

The Horizontal Tiles will display simple tiles of the upcoming events that fit the parameters given. The date, name of event, and time is listed clearly (as shown in the screenshot below). If there is one, a short description of the event will also be included. There is also an option to limit the amount of tiles displayed.