euduardo
db3d58821e
feat(widgets): show calendar events on hover with pin on click (#2637) docs(widgets): update calendar interactions section for hover behavior
76 lines
2.6 KiB
Plaintext
76 lines
2.6 KiB
Plaintext
---
|
|
title: 'Calendar'
|
|
description: 'Display events from your integrations in a calendar view within a certain relative time period'
|
|
hide_title: true
|
|
---
|
|
|
|
import { WidgetHeader } from '@site/src/components/widgets/header';
|
|
import { AddingWidget } from '@site/src/components/widgets/adding';
|
|
import { WidgetConfig } from '@site/src/components/widgets/configuration';
|
|
import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
|
|
import { IconAd } from "@tabler/icons-react";
|
|
import Tabs from '@theme/Tabs';
|
|
import TabItem from '@theme/TabItem';
|
|
import { calendarWidget } from '.';
|
|
import { lidarrIntegration } from '@site/docs/integrations/lidarr';
|
|
import { nextcloudIntegration } from '@site/docs/integrations/nextcloud';
|
|
import { homeAssistantIntegration } from '@site/docs/integrations/home-assistant';
|
|
import { radarrIntegration } from '@site/docs/integrations/radarr';
|
|
import { readarrIntegration } from '@site/docs/integrations/readarr';
|
|
import { sonarrIntegration } from '@site/docs/integrations/sonarr';
|
|
import { icalIntegration } from '@site/docs/integrations/ical';
|
|
|
|
|
|
<WidgetHeader
|
|
widget={calendarWidget}
|
|
categories={['Media manager', "Servarr"]}
|
|
/>
|
|
|
|
The calendar widget shows a month view of events from different integrations.
|
|
It allows you to view calendar events or upcoming releases from your media managers.
|
|
|
|
### Screenshots
|
|
|
|
import popover from './img/popover.png';
|
|
import withIntegrations from './img/with-integrations.png';
|
|
import withoutIntegrations from './img/without-integrations.png';
|
|
|
|
<div className='flex gap-1'>
|
|
<img src={withIntegrations} alt="calendar with-integrations big-size" width={256 + 4} height={256 + 4} />
|
|
<div className='flex flex-col gap-1'>
|
|
<img src={popover} alt="calendar popover-details the-mandalorian" width={128 * 3} height={128} />
|
|
<img src={withoutIntegrations} alt="calendar without-integrations small-size" width={256} height={128} />
|
|
</div>
|
|
</div>
|
|
|
|
### Supported Integrations
|
|
|
|
<WidgetIntegrations items={[{
|
|
integration: nextcloudIntegration,
|
|
}, {
|
|
integration: lidarrIntegration,
|
|
}, {
|
|
integration: radarrIntegration,
|
|
}, {
|
|
integration: readarrIntegration,
|
|
}, {
|
|
integration: sonarrIntegration,
|
|
}, {
|
|
integration: icalIntegration
|
|
}, {
|
|
integration: homeAssistantIntegration
|
|
}]} />
|
|
|
|
### Interactions
|
|
|
|
- Hover over a marked date to preview its events in a popover.
|
|
- Click on a marked date to pin the popover open (it will stay visible even after moving the mouse away).
|
|
- Click the date again or click outside to close the pinned popover.
|
|
|
|
### Adding the widget
|
|
|
|
<AddingWidget />
|
|
|
|
### Configuration
|
|
<WidgetConfig configuration={calendarWidget.configuration} />
|