Permas Calendar UI

Beautiful, customizable calendar UI components built on the Permas Calendar SDK.

Installation

npm install @permas/calendar-ui
# or
yarn add @permas/calendar-ui

Quick Start

import { Calendar } from '@permas/calendar-ui';
import '@permas/calendar-ui/dist/styles.css';

function App() {
  return (
    <Calendar 
      apiKey="your-api-key"
      theme="ocean"
      defaultView="month"
    />
  );
}

Features

• 📅 Multiple calendar views (Month, Week, Day)
• 🎨 Customizable themes and styling
• 🔄 Built-in sync with Google Calendar and iCal feeds
• ⚙️ Ready-to-use settings components
• 🔒 Authentication components
• 📱 Fully responsive design
• 🧩 Modular - use only what you need

Components

Calendar Views

import { MonthView, WeekView, DayView } from '@permas/calendar-ui';

// Use individual views
function CalendarApp() {
  return (
    <div>
      <MonthView events={events} />
    </div>
  );
}

Calendar Container

The main calendar component with navigation and view switching:

import { CalendarContainer } from '@permas/calendar-ui';

function App() {
  return (
    <CalendarContainer
      defaultView="month"
      onEventClick={(event) => console.log('Event clicked', event)}
      onDateRangeChange={(start, end) => console.log('Date range', start, end)}
    />
  );
}

Settings Components

import { SettingsContainer } from '@permas/calendar-ui';

function SettingsPage() {
  return (
    <SettingsContainer
      showGoogleIntegration={true}
      showIcalFeeds={true}
      showThemeSelector={true}
      onSettingsChange={(settings) => console.log('Settings updated', settings)}
    />
  );
}

Authentication Components

import { GoogleAuthButton, LoginScreen } from '@permas/calendar-ui';

function LoginPage() {
  return (
    <LoginScreen
      onLogin={(user) => console.log('User logged in', user)}
      showGoogleAuth={true}
    />
  );
}

Customization

Themes

The calendar UI comes with several built-in themes:

• default - Light theme
• dark - Dark theme
• purple - Purple accents
• ocean - Blue/ocean colors
• forest - Green/forest colors
• sunset - Orange/sunset colors

Using Built-in Themes

import { Calendar } from '@permas/calendar-ui';

function App() {
  return (
    <Calendar theme="ocean" />
  );
}

Theme Provider

For more control, you can use the ThemeProvider:

import { ThemeProvider, Calendar } from '@permas/calendar-ui';

function App() {
  return (
    <ThemeProvider theme="dark">
      <Calendar />
      {/* Other components will inherit the theme */}
    </ThemeProvider>
  );
}

Theme Switcher

Add a theme selector dropdown anywhere in your app:

import { ThemeSwitcher } from '@permas/calendar-ui';

function Header() {
  return (
    <header>
      <h1>My Calendar App</h1>
      <ThemeSwitcher />
    </header>
  );
}

Custom Themes

Create your own themes using the ThemeFactory:

import { Calendar, ThemeFactory } from '@permas/calendar-ui';

// Create a custom theme based on an existing one
const myCustomTheme = ThemeFactory.createCustomTheme('ocean', {
  colors: {
    primary: '#ff5722',
    background: '#f8f8f8',
  }
});

// Register it for use with theme names
ThemeFactory.registerTheme('my-brand-theme', myCustomTheme);

function App() {
  return (
    <Calendar theme={myCustomTheme} />
    {/* Or use by name after registering */}
    {/* <Calendar theme="my-brand-theme" /> */}
  );
}

Custom Event Rendering

import { Calendar } from '@permas/calendar-ui';

function App() {
  const renderEvent = (event) => (
    <div className="custom-event" style={{ backgroundColor: event.color }}>
      {event.title}
    </div>
  );

  return (
    <Calendar 
      renderEvent={renderEvent}
      events={events}
    />
  );
}

License

MIT