<EventsWidget>

INFO

The <EventsWidget> component must be used within a <Provider> component.

The <EventsWidget> component is used to display a list of events. It supports both a simplified version and a customizable version, offering flexible content customization options. It is suitable for scenarios where you need to display and interact with an event list.

Component Structure

The <EventsWidget> component primarily displays event information and supports custom content for event items through slots.

1. content (optional):
   • Allows you to customize the content displayed for each event item.

Usage Example

Simplified Version

In the simplified version, the <EventsWidget> component automatically displays the event list, suitable for scenarios where no content customization is needed:

<template>
    <EventsWidget type="module" />
</template>

Customizable Version

In the customizable version, you can use a slot to customize the content of each event item, such as displaying a configuration button or other interactive elements. Below is an example where the content of each event item is customized via a slot:

<template>
    <EventsWidget>
        <!-- Customize event item content -->
        <template #content="item">
            <div>
                <button>Configure</button>
            </div>
        </template>
    </EventsWidget>
</template>

Slot Explanation

• content Slot: You can customize the content for each event item. The item is the data object for each event and may include relevant event information such as title, timestamp, etc.

Configuration and Customization

The <EventsWidget> component provides sufficient flexibility to further customize the appearance and behavior of the event list. Through slots, you can add various interactive elements such as buttons, links, etc., allowing users to interact with the events.

Notes

• Ensure that the <EventsWidget> component is always used within the context of the <Provider> component, as it depends on the global state or functionality provided by the Provider.
• When using slots, you can choose to implement only the parts you need to customize. Any undefined parts will use the component's default display.

Using with Other Components

If more complex interactions and operations are required, you can combine the <EventsWidget> with other components, such as <DndItem> for drag-and-drop event items, or with a state management library to dynamically update event data.