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 BYU Calendar
Option 1: Drupal Module
1. Download and Install it like any other module. The Drupal 7 module is available on Drupal.org. The Drupal 8 module is available as well!
2. Configuration
Drupal 7
The configuration page is located under Configuration > Regional and Language > BYU Calendar. (If you haven't updated your module recently, it may be located under Configuration > BYU > 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.
Drupal 8
Go to Structure->Block Layout and click "Place Block" in the region you want to place the calendar block. This can be moved later.
When you click "Place Block" you can choose a block:
Select the "Place Block" and you will get some configuration options
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.
