In this article, you will learn about the ShortPoint Date Lists Design Element. With this element, you can show the events or announcements in your page with a special focus on the date.
Let’s have a closer look at the Date Lists Design Element.
TABLE OF CONTENTS
- Adding ShortPoint Date Lists to a page
- Connecting ShortPoint Date Lists to Your Calendar
Adding ShortPoint Date Lists to a page
The Date Lists Design Element can be easily added to your SharePoint and SAP pages using ShortPoint Page Builder.
You can start by adding a ShortPoint editor to your page by clicking the plus sign and selecting ShortPoint from the list of web parts:
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 Date Lists to Your Calendar
Connecting ShortPoint Date Lists to SharePoint Calendar
Connecting ShortPoint Date Lists to Outlook Calendar
Please, check these solution articles on how to connect ShortPoint with the Outlook calendar:
- Connection Types: My Events (Outlook)
- Connection Types: Shared Events (Outlook)
- Connection Types: Group Events (Outlook)
There are some nice features in the Settings tab you might like to apply for your events in the Date Lists Design Element.
- Success. Success is usually associated with green, which is the color of this option.
Customize the style of your events' dates with this feature.
With this feature you can change the text size of your events' dates. You can adjust it moving the slider or typing it in the cell.
Note: You can set the size in number or pixels (e.g., 7 or 140%).
For example, this is how our events' dates will look like with the size of 6:
If you would like to set or remove the separator between the events in your Date Lists, this option is for you.
- None. This is how our events will look like without the separator between the items:
- Line. This is the default option. It sets the lines between the events in your Date Lists. If you choose this option from the drop-down, two additional settings will appear for this feature:
- Separator color. This option allows you to change the color of your separator line. Simply choose it from the drop-down of this option;
- Separator size. This option allows you to change the size of your separator line. Similar to the Date Size, you can adjust it moving the slider or typing it in the cell, in pixels or number.
For example, this is how our events will look like with a yellow separator of 2 size:
With this feature enabled you can horizontally align your events in Date Lists design element.
Find out more about this feature in our solution article: Horizontal Alignment for ShortPoint Lists.
Need more customization? Use the Advanced settings tab for it.
With this feature you will be able to customize the text and vertical alignment, spacing and fix date format related issues.
There are following options in Miscellaneous feature:
- Text alignment. This feature helps you to change the alignment of your event items in the Date Lists. To change the text alignment, simply choose the option you like the most from the drop-down:
For example, this is how the right text alignment will look like:
- Vertical alignment. This feature helps you to change the vertical alignment of your event items in the Date Lists. The default option is top.
Note: you will be able to notice the change in vertical alignment only if you have subtitle or description fields empty. In case all the fields are filled in, it will occupy all the space and the vertical alignment won't be visible.To change the vertical alignment, simply choose the option you like the most from the drop-down:
For example, this is how the bottom alignment will look like:
- Spacing. This feature helps you to change the space between the title and description of your event items in the Date Lists.
For example, this is how the thin spacing will look like:
- Fix date format related issues. If you faced any date format issues, enabling this option will help you to fix it. Click to enable it and a new option Date Format String will appear. Here you can change the format of the date, setting the exact date format you are using in your sites.
Customize your event's date styles with this feature.
With this feature you can customize the titles of your events in the Date Lists Design Element.
There are following options to customize Title Styles:
- 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:
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.
Customize the subtitle styles of your events with this feature.
Customize your description styles with this feature.
Use these settings to customize your links.
Learn more about Link settings by going through this article: Types of Linking Options in Page Builder Elements.
Item Background Styles
This feature helps you to customize the items' background styles.
You can set visibility for:
- People and Groups of your organization;
- Devices, on which you do not want Date Lists design element to be visible.
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.