Try ShortPoint nowIn 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
The Date Lists Design Element can be easily added to your SharePoint and SAP pages using ShortPoint Page Builder.
Modern page:
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:
Classic page:
1. Choose the Insert tab in the Ribbon.
2. Click the blue Insert button.
Then, select the Date Lists 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 Date Lists to Your Calendar
Use the ShortPoint Connect feature to connect your calendars to the Date Lists Design Element. With this feature, you can always see the relevant and updated events' information from your calendar on the page.
Connecting ShortPoint Date Lists to SharePoint Calendar
With ShortPoint you can connect the Date Lists 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.
Please, check this solution article on How to Connect Events to a SharePoint Calendar.
Connecting ShortPoint Date Lists to Outlook Calendar
It is also possible to connect the Date Lists Design Element to the 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)
Features
Settings tab
There are some nice features in the Settings tab you might like to apply for your events in the Date Lists Design Element.
Theme color
Theme color allows you to customize the color of all the events in your Date Lists 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 Theme 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 in the Date Lists, choose this option.
- Success. Success is usually associated with green, which is the color of this option.
Date style
Customize the style of your events' dates with this feature.
For example,
- Plain. This is the default option. The dates of your events are not surrounded by any borders.
- Mini-bar. This option adds a vertical line to highlight the dates of your events.
- Bar. This option surrounds the dates of your events with borders.
Date size
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:
Separator
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:
Horizontal view
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.
Advanced tab
Need more customization? Use the Advanced settings tab for it.
Miscellaneous
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.
Date Styles
Customize your event's date styles with this feature.
There are following options to customize Date Styles:
- Date bold. 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;
- 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;
- Date location. With this option you can adjust the position of your date - left or right. Simply choose it from the drop-down.
For example, we have changed the color of the date to pink, enabled the Date bold option and set right as Date location. Here is how our result looks like:
Title Styles
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:
- 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.
- Title max lines. Use this option to control the number of lines your title covers. Other text will be cropped.
Subtitle Styles
Customize the subtitle styles of your events with this feature.
There are following options to customize Subtitle Styles:
- Subtitle text size allows you to change the size of the subtitle text.
Note: By default the Subtitle size is smaller than the Title size.
- Subtitle color. With this option you can change the color of the event's subtitle. Simply choose it from the drop-down of this option;
- Subtitle location. With this option you can adjust the position of your subtitle - above or below. Simply choose it from the drop-down.
- Subtitle max lines. Use this option to control the number of lines your subtitle covers. Other text will be cropped.
You can play around with these options and customize the Subtitle Styles as much as you like.
For example, we have set the size of the subtitle of 20px, changed the color to info-dark and 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 15px and changed the color to turquoise-dark. Here is how our result looks like:
Link Settings
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.
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:
Visibility tab
Control who you want the Date Lists 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 Date Lists 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.
That is it! Enjoy adding Date Lists to your SharePoint page.
Related articles:
- Create All Day Events in ShortPoint
- Create Recurring Events in ShortPoint
- How to Connect SharePoint Announcements to ShortPoint Design Elements
- Adding, Duplicating, Moving and Deleting Items in ShortPoint Design Elements
- ShortPoint Connect: Basic Tutorial
- How to Connect Events to a SharePoint Calendar
- Connection Types: Group Events (Outlook)
- Connection Types: Shared Events (Outlook)
- Connection Types: My Events (Outlook)
- Managing Visibility of ShortPoint 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)
- Types of Linking Options in Page Builder Elements
- Horizontal Alignment for ShortPoint Lists