Files
homarr/apps/docs/docs/widgets/calendar/index.mdx
T

86 lines
3.1 KiB
Plaintext

---
title: "Calendar"
description: "Display events from your integrations in a calendar view within a certain relative time period"
hide_title: true
---
import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
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.
Calendar requests use normal human month numbers (`1` for January through `12` for December), including when
the same data is requested through Homarr's MCP or Assistant tools.
### Screenshots
import currentView from "./img/current-view.png";
import advancedView from "./img/advanced-view.png";
<div className="flex flex-col gap-1">
<img src={currentView} alt="Calendar month view with marked events" width={513} height={303} />
<img src={advancedView} alt="Calendar advanced view with grouped events" width={800} height={484} />
</div>
### Supported Integrations
<WidgetIntegrations
items={[
{
integration: nextcloudIntegration,
},
{
integration: lidarrIntegration,
},
{
integration: radarrIntegration,
},
{
integration: readarrIntegration,
},
{
integration: sonarrIntegration,
},
{
integration: icalIntegration,
},
{
integration: homeAssistantIntegration,
},
]}
/>
### Interactions
- Colored dots directly below a date mark its events. They scale with the widget and are hidden when the calendar is too short.
- Hover over a marked date to preview its events in a popover.
- The advanced view replaces the month grid with a grouped event list, keeps every event attributed to its source integration, and expands titles, locations, and descriptions. Use its previous and next controls to change months.
- If one selected integration is unavailable, its warning indicator remains visible while events from healthy integrations continue to load.
<WidgetInteractionGuide />
### Adding the widget
<AddingWidget />
### Configuration
<WidgetConfig configuration={calendarWidget.configuration} />