Event calendar - Pharen

Use Event calendar to display and manage scheduled events. This page covers every Vue component exported by the public module.

View code

<script setup lang="ts">
import { EventCalendar, EventCalendarContent, EventCalendarNav } from '@pharen/ui';
const events = [{
  id: 'kickoff',
  title: 'Project kickoff',
  start: new Date(2026, 7, 12, 10),
  end: new Date(2026, 7, 12, 11),
}];
</script>

<template>
  <EventCalendar :events="events" default-view="month">
    <EventCalendarNav />
    <EventCalendarContent />
  </EventCalendar>
</template>

Installation

npm install @pharen/ui

pnpm add @pharen/ui

yarn add @pharen/ui

bun add @pharen/ui

Import @pharen/ui/styles.css exactly once in your application entrypoint.

Usage

import { EventCalendar, EventCalendarAgendaView, EventCalendarContent, EventCalendarDatePicker, EventCalendarDayView, EventCalendarDaysView, EventCalendarEvent, EventCalendarMonthView, EventCalendarMoreIndicator, EventCalendarNav, EventCalendarNavNext, EventCalendarNavPrev, EventCalendarNavToday, EventCalendarNowIndicator, EventCalendarResourceView, EventCalendarTimeGrid, EventCalendarTimeGutter, EventCalendarTitle, EventCalendarToolbar, EventCalendarViewSwitcher, EventCalendarWeekView, EventCalendarContext, EventCalendarViewConfigContext, EventCalendarViewContext, EventCalendarRecurrenceError } from '@pharen/ui';

Exports

Export	Purpose
`EventCalendar`	Exported Vue component from this module.
`EventCalendarAgendaView`	Exported Vue component from this module.
`EventCalendarContent`	Contains the visible content.
`EventCalendarDatePicker`	Exported Vue component from this module.
`EventCalendarDayView`	Exported Vue component from this module.
`EventCalendarDaysView`	Exported Vue component from this module.
`EventCalendarEvent`	Exported Vue component from this module.
`EventCalendarMonthView`	Exported Vue component from this module.
`EventCalendarMoreIndicator`	Exported Vue component from this module.
`EventCalendarNav`	Exported Vue component from this module.
`EventCalendarNavNext`	Exported Vue component from this module.
`EventCalendarNavPrev`	Exported Vue component from this module.
`EventCalendarNavToday`	Exported Vue component from this module.
`EventCalendarNowIndicator`	Exported Vue component from this module.
`EventCalendarResourceView`	Exported Vue component from this module.
`EventCalendarTimeGrid`	Exported Vue component from this module.
`EventCalendarTimeGutter`	Exported Vue component from this module.
`EventCalendarTitle`	Renders the accessible title.
`EventCalendarToolbar`	Exported Vue component from this module.
`EventCalendarViewSwitcher`	Exported Vue component from this module.
`EventCalendarWeekView`	Exported Vue component from this module.
`EventCalendarContext`	Exported Vue component from this module.
`EventCalendarViewConfigContext`	Exported Vue component from this module.
`EventCalendarViewContext`	Exported Vue component from this module.
`EventCalendarRecurrenceError`	Exported Vue component from this module.

Source

Open the source on GitHub