The Event webpart allows users to easily browse upcoming events. It also offers a calendar view, enabling users to switch between a cards-based layout and a visual monthly/weekly calendar. 

Settings

Settings are organized into five sections:

1. Content to display

2. Cards settings

3. Calendar settings

4. Settings

5. Import / Export

Content to display

This section allows you to select the source of your event content by choosing the site and list from which events should be loaded.

You can choose between:

• This site:
  Lists available on the current site will be displayed, and you can pick the one you want to use.

  

• Manual value:
  You can search for any site manually and then select the desired list from that site.

Cards settings

This section lets you configure how events are displayed in the cards view.

• Enable pagination
  Activate pagination and define how many cards should be displayed per page.

• Choose your image template
  Select the layout for your event image (ratio, shape, or position depending on available templates).

• Background
  Choose the background color or style of the card container.

• Responsive options – number of cards
  Define the number of cards to display on different screen sizes: Mobile, Tablet, Normal, and Large.

• Responsive options – card height
  Set a specific card height for each device type.
  Set to 0 to disable this option and let the content define the height.

• Set text contrast
  Adjusts how light or dark the text appears on the card.
  Useful to ensure readability depending on the background selected.

• Text alignment
  Defines how the text inside the card is aligned (left, center, or right).

• Show shadows around container
  Adds a soft shadow around the card to enhance visual depth.

• Show borders
  Displays a border around each card for a more structured look.

Calendar settings

Configure how the calendar view should behave.

• Responsive – calendar height
  Set the height of the calendar for each device type.
  Set to 0 to disable fixed height.

• Available views
  Select which calendar views (e.g. month, week, day) will be available for users, and choose which one is active by default.

• Available days
  Choose which days of the week should appear in the calendar.

• Time slot
  Define the first and last hour displayed for each day.
  Default values:

  • First hour: 12 AM (0)

  • Last hour: 24 hours (24)

Settings

• Available views
  Choose which views (Cards, Calendar, etc.) should be available, and select the default view.

• Search box (Cards only)
  Enable or disable the search box for the cards view.

• Date range (Cards only)
  Choose the date range for displayed events:
  Upcoming events, This week, This month, This year, or Custom.
  With Custom, you can define the exact date range manually.
  You can also choose to include past events by switching the Past events filter to NO.

Import / Export

Allows you to import or export the configuration of the webpart, making it easy to reuse or share settings across pages or sites.

When hovering over an event, users can see a preview card showing key details, with a “Read more” option to open the full event.