Try ShortPoint nowThis article will walk you through customizing the Events Design Element and its basic features.
TABLE OF CONTENTS
Prerequisite
- You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You are a ShortPoint Designer with an active license.
Step-by-step Tutorial
Follow the steps below to learn how to customize the Events Design Element:
Step 1: Insert the Events Design Element
Click Get Started to start the interactive tutorial on how to insert design elements:
Step 2: Edit the Events’ content
Start the interactive tutorial to learn how to edit the Event’s content:
NOTE: You can also create dynamic Events content. Check out How to Connect Events to a SharePoint Calendar or go to Connection Types: My Events (Outlook).
Step 3: Customize the Events’ design
Start the interactive tutorial to learn how to customize the Event’s design:
NOTE: Check out Events Features to learn more about the features you can customize.
Step 4: Insert and Save
Get started to learn how to insert and save the Events Design Element:
Events Features
Below are the tabs you can find in the Events Settings window:
A. Items tab
The Items tab allows you to duplicate, delete, configure content, and add new items. It has the following options:
ITEMS ACTION ICONS
 | Cogwheel | opens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings. |
 | Duplicate | duplicates the item selected. |
 | Trash | deletes the item selected. |
 | Add New | adds a new item. |
 | Drag and Drop | allows you to re-arrange the position of the item. |
COGWHEEL ICON SETTINGS
 | Title | adds an event title. |
 | Description | adds a detailed description of the event. |
 | Tagline | adds a small dimmed text below the event title. |
 | Start Date | adds a start date and time. |
 | End Date | adds an end date and time. |
 | Location | adds a location to an event. |
 | All Day | turns an event into an all-day event. |
 | Recurring | turns an event into a recurring event. |
 | Category | sets a category for an event. You can choose from Meeting, Work-hours, Business, Get-together, Gifts, Birthday, and Anniversary. |
 | Link | add a link to redirect users who click on an event. |
B. Design tab
The Design tab allows you to customize the design of the Events Design Element. It has the following options:
 | Style | allows you to customize the style of the Events Design Element. |
 | Color | allows you to customize the color of your Events. |
 | Linking Options | allows you to select how your link will open. Check out Linking Options to learn more about each option. |
 | Dark Theme | allows you to place your Events on a dark background. |
 | Enable Color by Category | allows you to apply different colors according to the categories you have chosen for your event items. |
 | Group by Day | allows you to group events according to their dates. |
 | Show Today | allows you to showcase today's date at the top of your events list. |
 | Hide Time | allows you to hide time from your event items. |
 | Show Icon | allows you to showcase icons based on an event category. |
 | Icon Style | allows you to choose an icon style. You can choose from Normal, Square, Circle, Outline-square, or Outline-circle. |
 | No icon style | allows you to choose what will appear when there is no icon associated with an item. You have the following options:
|
 | Fix Date Related issues | allows you to fix any date-related issues. Only enable this option if you’re seeing “Invalid Date” or no dates in the Events List design element. |
 | Day Text Size | allows you to modify the text size of the day. |
 | Day Color | allows you to customize the color of the day. |
 | Bold Day | allows you to set the day text to Bold. |
 | Date Text Size | allows you to modify the text size of the date. |
 | Date Color | allows you to customize the text color of the date. |
 | Date Bold | allows you to set the text to Bold. |
C. Toolbar tab
The Toolbar tab allows you to add Smart Toolbar widgets. These Smart Toolbar widgets can help you search, sort, or filter data in your Events:
NOTEThe Toolbar tab is only available in SportPoint SPFx version 8.5.0.0 or later. For more information on the Toolbar tab, check out Getting Started: The Basics of the Smart Toolbar.
D. Advanced tab
The Advanced tab contains more customizations to edit your Events Design Element. It has the following options:
TITLE STYLES
 | Title text size | allows you to change the text size of your events' titles. You can set the text size pixels, em, or percentage. The default text size is 1 em. |
 | Bold title | allows you to make the title bold. |
 | Title color | allows you to change the color of the title. |
 | Title hover color | allows you to customize the color of the title when a user hovers over it. |
 | Title max lines | allows you to customize the maximum number of lines shown on your title. |
TAGLINE STYLES
 | Tagline Text Size | allows you to change the text size of your events' tagline. You can set the text size pixels, em, or percentage. |
 | Tagline Color | allows you to change the color of the tagline. |
 | Tagline Location | allows you to customize the position of the tagline. You can choose from above or below. |
 | Tagline Max Lines | allows you to customize the maximum number of lines shown on your tagline. |
DESCRIPTION STYLES
 | Description text size | allows you to change the text size of your events' description. You can set the text size pixels, em, or percentage. |
 | Description color | allows you to change the color of the description. |
 | Description max lines | allows you to customize the maximum number of lines shown in your description. |
DATE STYLES
 | Date Color | allows you to customize the text color of the date. |
 | Bold Date | allows you to set the text to Bold. |
ITEMS BACKGROUND STYLES
 | Items Background Color | allows you to customize the background color of the items. |
 | Items Background Hover Color | allows you to customize the background color of the items when a user hovers over them. |
GROUPING HEADER STYLES
 | Customize grouping date format | enables you to change the date format. By default, all dates are displayed using the DD/MM/YYYY format. |
 | Header Background Color | allows you to change the background color of the header. |
 | Header Text Color | allows you to customize the color of the header text. |
 | Header Text Size | allows you to change the size of the header. |
CUSTOMIZE CATEGORY ICONS AND COLORS
 | Customize Categories Colors | allows you to edit the event category colors. |
 | Customize Category Icons | allows you to edit the event category icons. |
NOTE: To customize category icons and colors, check out How to Map Events Categories with Colors and Icons in ShortPoint.
E. Custom CSS Tab
This tab allows you to use your own CSS, HTML, and Javascript code to customize the Events Design Element.
NOTE: Check out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.
NOTE: The Visibility and Connect tabs are currently only available in Grid.
That’s it! You now know how to customize the Events Design Element. Enjoy using this Design Element on your SharePoint pages.
Related articles:
- Adding, Duplicating, Moving and Deleting ShortPoint Elements
- How to Create All Day Events in ShortPoint
- How to Create Recurring Events in ShortPoint
- How to Map Events Categories with Colors and Icons in ShortPoint
- How to Connect SharePoint Announcements to ShortPoint Design Elements
- ShortPoint Connect: Basic Tutorial
- How to Connect Events to a SharePoint Calendar
- Connection Types: My Events (Outlook)
- Connection Types: Shared Events (Outlook)
- Connection Types: Group Events (Outlook)
- Managing Visibility of ShortPoint Elements
- Custom CSS Tab for ShortPoint Design Elements
- How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
- Add Custom CSS to a ShortPoint Element Right from the Page Builder (Advanced Tutorial)
