npm package: @permas/calendar-ui
Description: Beautiful, customizable calendar UI components built on the Permas Calendar SDK
Author: Permas Technologies
Latest version: 0.1.0

# Permas Calendar UI

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

## Installation

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

## Quick Start

```jsx
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

```jsx
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:

```jsx
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

```jsx
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

```jsx
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

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

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

#### Theme Provider

For more control, you can use the ThemeProvider:

```jsx
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:

```jsx
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:

```jsx
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

```jsx
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