User Level: 

The Localist Widget Builder outputs JavaScript embed code. This requires us to use the JavaScript text format in our Drupal sites. Due to this, a user must be an architect to integrate a widget into an OSU Drupal site.

Click on an image to make it bigger.
D7 - Working with Content - Calendar Widgets - Calendar Home

1. Go to the Calendar Home Page

We'll start by gathering up some embed code from the OSU Localist calendar.

Go to http://events.oregonstate.edu.

D7 - Working with Content - Calendar Widgets - Scroll Down to Widget Builder Link

2. Locate the Widget Builder Link

Scroll down the home page, or do a screen search, look for the Widget Builder link.

Click on the link.

D7 - Working with Content - Calendar Widgets - Select Appropriate Filters

3. Select the Appropriate Filters

A form with several fields will appear.

Select any filters that are appropriate for your needs.

In our example, we're filtering based on Organization.

D7 - Working with Content - Calendar Widgets - Default Display Options

4. Try Default Display Options First

After you've selected all the filters you want, scroll down to the bottom of the screen.

The Display Options section contains some different styling options that can be used for your calendar widget.

We'll start by just looking at the Modern style, which is the default.

Click on the Preview Widget button.

D7 - Working with Content - Calendar Widgets - Modern Displa

5. Modern Display Example

A new tab will appear.

Click the tab to view the Modern widget style.

D7 - Working with Content - Calendar Widgets - Card Display

6. Card Display Example

Return to the Widget Builder and change the Style to Cards.

A new tab will appear.

Click the tab to view the Cards widget style.

D7 - Working with Content - Calendar Widgets - Classic Display

7. Classic Display Example

Return to the Widget Builder and change the Style to Classic.

A new tab will appear.

Click the tab to view the Classic widget style.

D7 - Working with Content - Calendar Widgets - None Display

8. None Display Example

Return to the Widget Builder and change the Style to None.

A new tab will appear.

Click the tab to view the None widget style. This particular style doesn't have any CSS applied to it.

D7 - Working with Content - Calendar Widgets - Click Generate Embed Code

9. Generate Embed Code

Once you've determined a Style to use, click the Generate Embed Code button.

D7 - Working with Content - Calendar Widgets - Embed Code Appears

10. Embed Code Appears

The Widget Embed Code will open up in a field on your screen.

Copy this code to your clipboard.

D7 - Working with Content - Calendar Widgets - Create New Content

11. Create New Content

Go to your Drupal site and create some type of new content.

D7 - Working with Content - Calendar Widgets - Create A Paragraph

12. Add a Paragraph

Scroll down the node edit form and add a Paragraph.

In our example, we're using a 2 Column Paragraph type.

D7 - Working with Content - Calendar Widgets - Change Text Format to Javascript

13. Change Text Format

We're going to paste our embed code right into a body field.

Before we do this, though, we'll need to change the text format. If we don't do this, the JavaScript in the embed code will be stripped out, rendering our code useless.

Text Format select box = JavaScript

Paste the embed code in.

Note: Leave the Text Format set to JavaScript. Changing it will strip the code and render it unusable.

D7 - Working with Content - Calendar Widgets - Localist Branding Removal

14. Remove Localist Branding

Locate the closing script tag. All of the code after this closing tag is simply Localist's branding. Delete it.

Finish adding any desired data into the remaining fields.

Click the Save button.

D7 - Working with Content - Calendar Widgets - Widget Samples

15. Widget Samples

We've included some different Paragraph types that are using the Cards and Modern display styles.

Have fun experimenting with your own layout combinations.

Please note that there are a few ways the Localist widgets can be integrated. We're showing integration using Paragraphs, which is the easiest and most versatile way.

The widget code can also be embedded in a block or any other entity type that has a text field that provides the JavaScript text format.

Look below for a live example of the Modern widget style using a 1 Column Background Image Paragraph type.

Upcoming OSU Events