In this article we are presenting the ShortPoint Events Design Element. With this element, you can show the details of all your events on your page with ease.

Let's have a closer look at the Events Design Element.

TABLE OF CONTENTS

Adding ShortPoint Events to the page
Connecting ShortPoint Events to Your Calendar
- Connecting ShortPoint Events to SharePoint Calendar
- Connecting ShortPoint Events to Outlook Calendar
Features

Adding ShortPoint Events to the page

The Events Design Element can be easily added to your pages using ShortPoint Page Builder.

Modern page:

You can start with adding a ShortPoint web part to your page by clicking the plus sign and selecting ShortPoint from the list of the web parts.

Classic page:

1. Choose the Insert tab in the Ribbon.

2. Click the blue Insert button.

Then, select the Events Design Element from your ShortPoint Page Builder menu:

Note: There are two ways of creating events: static and dynamic.
To continue with the static way of creating and managing events, please, check this article: Adding, Duplicating, Moving and Deleting ShortPoint Elements.
Using the dynamic way of creating events, you can connect your SharePoint or Outlook calendars. Please, check our ShortPoint Connect: Basic Tutorial for more details on how it works, and continue to the next paragraph of this article.

Connecting ShortPoint Events to Your Calendar

Use the ShortPoint Connect feature to connect your calendars to the Events Design Element. With this feature, you can always see the relevant and updated events information from your calendar on the page.

Connecting ShortPoint Events to SharePoint Calendar

With ShortPoint you can connect the Events Design Element to the calendar of your SharePoint. All you need to do is to use the Current site, Other sites or SharePoint Site URL connection options, and fill in the relevant fields. After the connection is set, map the necessary fields in Items tab.

Here is how it may look like on your page:

Please, check this solution article on How to Connect Events to a SharePoint Calendar.

Connecting ShortPoint Events to Outlook Calendar

It is also possible to connect the Events Design Element to the Outlook calendar:

Here is how it may look like on your page:

Please, check these solution articles on how to connect ShortPoint with the Outlook calendar:

Features

Settings tab

There are some nice features in the Settings tab you might like to apply for your event items.

Style

The Style feature allows you to change the style of Events.

Style 1 doesn't make the events bordered, it shows the event's date on its left side and applies different colors to the event based on the categories you have set. Here is how the Style 1 will look like:

Style 2 shows the event's date on the right side and makes them bordered. Here is how the Style 2 will look like:

Color

Color allows you to customize the color of all the events in your Events Design Element.

Colors are picked up from the default color settings of your Site Collection. To change the color, select it from the drop-down of the Color option, as shown below:

For example,

Primary. If you would like to set the main theme color of your Site Collection to all your event items, choose this option.

Success. Success is usually associated with green, which is the color of this option.

Color by category

Using Enable Color by Category option will result in applying different colors according the categories you have chosen for your event items.

Here is how it will look like:

Group by day

If you have multiple events during one day, you most likely would prefer to enable the Group by day feature.

Now all the events happening on the same date are grouped together:

Show Today

Enabling Show Today feature will show the today's day and date at the top of your events list.

Here is how it will look like:

Hide time

In case you would like only the dates of the events to be displayed, the Hide time feature is for you.

Here is how it will look like if you enable this feature:

Icons

You can add the icons to your Events Design Element and customize their style.

Show Icon

Based on the categories you have previously set for your events, the icons will be shown before the name of the event. To display the icons, enable Show Icon feature.

Here is how it will look like:

Icon Style

You can customize the icons' style with this feature. Choose the style you like from the drop-down of Icon Style option:

For example,

if you choose the normal icons style, your Events items will look similar to this:

if you choose the square icons style, your Events items will look similar to this:

Advanced tab

Need more customization? Use the Advanced settings tab for it.

Title Styles

With this feature you can customize the titles of your events.

There are following options to customize Title Styles:

Title text size. This feature allows you to change the text size of your events' titles. Simply type the text size of the title you want. You can set the text size in:
- pixels (e.g., 20px);
- em (e.g., 2em);
- percentage (e.g., 120%).
  Note: The default text size is 1em.

Here is how the 30px text size will look like.

Bold title. This option makes your title bold. It might be useful if you would like to attract attention of the users to the titles. To make the titles bold, simply enable this option, as shown below:

Here is how it will look like:

Title color. This feature can help you to change the title color of your events. To do this, simply choose the needed color from the drop-down:

Here is how it will look like with the primary color:

And with the success color:

Title hover color. If you would like to apply different colors to the titles of your events when you hover over it, this feature is for you. Simply choose the color from the drop-down.

Today Styles

With this feature you can customize the styles of the today's day and date if you enabled to show Today.

There are following options to customize Today Styles:

Day Text Size allows you to change the size of the today's day (e.g., Wednesday) text. You can set the size in number or percentage (e.g., 20 or 80%);
Day Color. With this option you can change the color of the today's day text. Simply choose it from the drop-down of this option;
Bold Day. This option makes your today's day text bold. It might be useful if you would like to attract attention of the users to this element;
Date Text Size. This option allows you to change the size of the today's date (e.g., 02/03/2020) text. You can set the size in number or percentage (e.g., 20 or 80%);
Date Color. With this option you can change the color of the today's date text. Simply choose it from the drop-down of this option;
Date Bold. This option makes your today's date text bold. It might be useful if you would like to attract attention of the users to this element.

You can play around with these options and customize the style of Today as much as you like.

For example, we have set the size of the day and date, made the day bold and changed the colors (primary for the day and primary-light for the date). Here is how our result looks like:

Tagline Styles

With this feature you can customize the styles of the taglines.

There are following options to customize Tagline Styles:

Tagline Text Size allows you to change the size of the taglines. You can set the size in number or percentage (e.g., 20 or 80%);
Note: By default the Tagline size is smaller than the Title size.
Tagline Color. With this option you can change the color of the taglines. Simply choose it from the drop-down of this option;
Tagline Location. This option allows you to adjust your taglines below or above the event's title;
Tagline Max Lines. Use this option to control the number of lines your tagline covers. Other text will be cropped.

You can play around with these options and customize the Tagline Styles as much as you like.

For example, we have set the size of the tagline, changed the color to alternate-2 and the location to above. Here is how our result looks like:

Description Styles

Customize your description styles with this feature.

There are following options to customize Description Styles:

Description text size allows you to change the size of the description text. You can set the text size in:
- pixels (e.g., 20px);
- em (e.g., 2em);
- percentage (e.g., 120%).
Description color. With this option you can change the color of the event's description. Simply choose it from the drop-down of this option;
Description max lines. Use this option to control the number of lines your description covers. Other text will be cropped.

You can play around with these options and customize the Description Styles as much as you like.

For example, we have set the size of the description of 2px and changed the color to info-dark. Here is how our result looks like:

Date Styles

Customize your event's date styles with this feature.

There are following options to customize Date Styles:

Date Color. With this option you can change the color of the event's date. Simply choose it from the drop-down of this option;
Bold Date. This option makes your event's date bold. It might be useful if you would like to attract attention of the users to this element.

For example, we have changed the color of the date to pink and enabled the Bold Date option. Here is how our result looks like:

Items background styles

This feature helps you to customize the items' background styles.

There are following options to customize Items background styles:

Items Background Color. With this option you can change the color of the event items' background. Simply choose it from the drop-down of this option;
Items Background Hover Color. If you would like to apply different colors to the event items' background when you hove over it, this feature is for you. Simply choose the color from the drop-down.

For example, we have changed the background color to cloud and background hover color to green. Here is how our result looks like:

Grouping Header Styles

This feature helps you to customize the header styles.

There are following options to customize the header styles:

Customize grouping date format. By enabling this option you can change the format of the date being used for your events.
Note: By default all the dates are displayed in DD MMM format (e.g., 10 Mar).
Header Background Color. With this option you can change the color of the event header's background. Simply choose it from the drop-down of this option;
Header Text Color. With this option you can change the color of the header. Simply choose it from the drop-down of this option;
Header Text Size. This option allows you to change the size of the header. You can set the size in number or percentage (e.g., 20 or 80%).

You can play around with these options and customize the Header Styles as much as you like.

For example, we have changed the format of the date to DD/MMM/YYYY, set the header text size to 20 and changed the colors (white for the text, and neutral-dark for the background). Here is how our result looks like:

Customize Category Icons and Colors

This feature allows you to customize the colors and icons of your event's categories. Check our How to Use Events' Categories solution to create your own events' categories.

There are two options to customize Category icons and colors:

Customize Categories Colors. Enabling this option will allow you to edit the colors, being applied to your event's categories. Simply click the edit button and choose the color you like from the drop-down of this option;
Customize Categories Icons. Enabling this option will allow you to edit the icons, being applied to your event's categories. Simply click the edit button and choose the icon you like from the drop-down of this option.

You can set the unique colors and icons to your events' categories.

For example, we have changed the color of the meeting category to blue-light, and of the business category to pink-light, and chose another icons for them (ion-ios-people for meeting category, and beer for business category), as on the screenshot below.

Here is how our result looks like:

Visibility tab

Control who you want the Events ShortPoint Design Element to visible for in this tab.

You can set visibility for:

People and Groups of your organization;
Devices, on which you do not want Events design element to be visible.

Find out more about visibility in our solution article: Managing Visibility of ShortPoint Elements.

Custom CSS tab

For more flexibility on how you want your events to be displayed, you can create your custom CSS and insert in the space provided.

We have basic and advanced Custom CSS tutorials in case you need some help.

Note: Find out more about Custom CSS tab for ShortPoint design elements in this article.

That is it! Enjoy adding events to your SharePoint page.

Introducing ShortPoint Events Design Element

Adding ShortPoint Events to the page

Modern page:

Classic page:

Connecting ShortPoint Events to Your Calendar

Connecting ShortPoint Events to SharePoint Calendar

Connecting ShortPoint Events to Outlook Calendar

Features