kalendly 0.1.3 → 0.1.5

package/README.md

@@ -14,13 +14,27 @@ A universal calendar scheduler component that works seamlessly across React, Vue
 - 📦 **Tree Shakeable**: Import only what you need
 - 🎯 **Design Consistent**: Matches the original Vue calendar design and feel
 
-## Live Examples
+## 🎯 Live Demo
 
-Check out the interactive examples: [https://kalendly-example.netlify.app/](https://kalendly-example.netlify.app)
+<div align="center">
 
-- [Vanilla JavaScript](https://kalendly-example.netlify.app/vanilla)
-- [React](https://kalendly-example.netlify.app/react)
-- [Vue](https://kalendly-example.netlify.app/vue)
+[![Kalendly Calendar Demo](./docs/images/calendar-demo.png)](https://kalendly-example.netlify.app/)
+
+**[🚀 Try the Interactive Demo →](https://kalendly-example.netlify.app/)**
+
+</div>
+
+<p align="center">
+  <a href="https://kalendly-example.netlify.app/vanilla">
+    <img src="https://img.shields.io/badge/Vanilla_JS-fc8917?style=for-the-badge&logo=javascript&logoColor=white" alt="Vanilla JS Demo"/>
+  </a>
+  <a href="https://kalendly-example.netlify.app/react">
+    <img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=black" alt="React Demo"/>
+  </a>
+  <a href="https://kalendly-example.netlify.app/vue">
+    <img src="https://img.shields.io/badge/Vue-4FC08D?style=for-the-badge&logo=vue.js&logoColor=white" alt="Vue Demo"/>
+  </a>
+</p>
 
 ## Installation
 
@@ -281,6 +295,7 @@ export default App;
 | `maxYear`        | `number`                                | `currentYear + 10` | Maximum selectable year                 |
 | `weekStartsOn`   | `0 \| 1`                                | `0`                | Week start day (0 = Sunday, 1 = Monday) |
 | `categoryColors` | `CategoryColorMap`                      | `{}`               | Custom colors for event categories      |
+| `theme`          | `CalendarTheme`                         | `undefined`        | Custom theme colors for the calendar    |
 | `onDateSelect`   | `(date: Date) => void`                  | -                  | Callback when date is selected          |
 | `onEventClick`   | `(event: CalendarEvent) => void`        | -                  | Callback when event is clicked          |
 | `onMonthChange`  | `(year: number, month: number) => void` | -                  | Callback when month changes             |
@@ -397,6 +412,218 @@ const categoryColors = {
 <Calendar events={events} categoryColors={categoryColors} />
 ```
 
+## Theming
+
+Kalendly supports custom theming across all frameworks with a **consistent API**. Customize calendar colors to match your brand or create light/dark themes.
+
+### CalendarTheme Interface
+
+```typescript
+interface CalendarTheme {
+  primary?: string; // Primary brand color
+  secondary?: string; // Secondary brand color
+  tertiary?: string; // Tertiary/accent color
+  textColor?: string; // Main text color
+  textLight?: string; // Light/secondary text color
+  background?: string; // Background color
+  cellHover?: string; // Cell hover state color
+  borderColor?: string; // Border color
+  todayOutline?: string; // Today indicator color
+  selectedBg?: string; // Selected date background
+  eventIndicator?: string; // Event indicator dot color
+}
+```
+
+### Basic Theme Example
+
+**React:**
+
+```tsx
+import { Calendar } from 'kalendly/react';
+import 'kalendly/styles';
+
+function App() {
+  return (
+    <Calendar
+      events={events}
+      theme={{
+        primary: '#3b82f6',
+        secondary: '#60a5fa',
+        tertiary: '#93c5fd',
+        borderColor: '#e5e7eb',
+        todayOutline: '#fbbf24',
+        eventIndicator: '#10b981',
+      }}
+    />
+  );
+}
+```
+
+**Vue:**
+
+```vue
+<template>
+  <Calendar :events="events" :theme="calendarTheme" />
+</template>
+
+<script setup lang="ts">
+import { Calendar } from 'kalendly/vue';
+import 'kalendly/styles';
+
+const calendarTheme = {
+  primary: '#3b82f6',
+  secondary: '#60a5fa',
+  tertiary: '#93c5fd',
+  borderColor: '#e5e7eb',
+  todayOutline: '#fbbf24',
+  eventIndicator: '#10b981',
+};
+</script>
+```
+
+**Vanilla JavaScript:**
+
+```javascript
+import { createCalendar } from 'kalendly/vanilla';
+import 'kalendly/styles';
+
+const calendar = createCalendar({
+  container: '#calendar',
+  events: events,
+  theme: {
+    primary: '#3b82f6',
+    secondary: '#60a5fa',
+    tertiary: '#93c5fd',
+    borderColor: '#e5e7eb',
+    todayOutline: '#fbbf24',
+    eventIndicator: '#10b981',
+  },
+});
+```
+
+**React Native:**
+
+```tsx
+import { Calendar } from 'kalendly/react-native';
+
+function App() {
+  return (
+    <Calendar
+      events={events}
+      theme={{
+        primary: '#3b82f6',
+        secondary: '#60a5fa',
+        tertiary: '#93c5fd',
+        borderColor: '#e5e7eb',
+        todayOutline: '#fbbf24',
+        eventIndicator: '#10b981',
+      }}
+    />
+  );
+}
+```
+
+### Dark Theme Example
+
+```typescript
+const darkTheme = {
+  primary: '#6366f1',
+  secondary: '#818cf8',
+  tertiary: '#a5b4fc',
+  textColor: '#f9fafb',
+  textLight: '#d1d5db',
+  background: '#1f2937',
+  cellHover: '#374151',
+  borderColor: '#4b5563',
+  todayOutline: '#fbbf24',
+  selectedBg: '#312e81',
+  eventIndicator: '#34d399'
+};
+
+<Calendar events={events} theme={darkTheme} />
+```
+
+### Dynamic Theme Switching
+
+**React:**
+
+```tsx
+import { useState } from 'react';
+import { Calendar } from 'kalendly/react';
+
+const themes = {
+  blue: { primary: '#3b82f6', secondary: '#60a5fa' },
+  purple: { primary: '#8b5cf6', secondary: '#a78bfa' },
+  green: { primary: '#10b981', secondary: '#34d399' },
+};
+
+function App() {
+  const [currentTheme, setCurrentTheme] = useState('blue');
+
+  return (
+    <>
+      <button onClick={() => setCurrentTheme('blue')}>Blue</button>
+      <button onClick={() => setCurrentTheme('purple')}>Purple</button>
+      <button onClick={() => setCurrentTheme('green')}>Green</button>
+
+      <Calendar events={events} theme={themes[currentTheme]} />
+    </>
+  );
+}
+```
+
+**Vue:**
+
+```vue
+<template>
+  <div>
+    <button @click="currentTheme = 'blue'">Blue</button>
+    <button @click="currentTheme = 'purple'">Purple</button>
+    <button @click="currentTheme = 'green'">Green</button>
+
+    <Calendar :events="events" :theme="themes[currentTheme]" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Calendar } from 'kalendly/vue';
+
+const themes = {
+  blue: { primary: '#3b82f6', secondary: '#60a5fa' },
+  purple: { primary: '#8b5cf6', secondary: '#a78bfa' },
+  green: { primary: '#10b981', secondary: '#34d399' },
+};
+
+const currentTheme = ref('blue');
+</script>
+```
+
+**Vanilla JavaScript:**
+
+```javascript
+import { createCalendar } from 'kalendly/vanilla';
+
+const themes = {
+  blue: { primary: '#3b82f6', secondary: '#60a5fa' },
+  purple: { primary: '#8b5cf6', secondary: '#a78bfa' },
+  green: { primary: '#10b981', secondary: '#34d399' },
+};
+
+const calendar = createCalendar({
+  container: '#calendar',
+  events: events,
+  theme: themes.blue,
+});
+
+// Update theme dynamically without recreation
+document.getElementById('purple-btn').addEventListener('click', () => {
+  calendar.updateTheme(themes.purple);
+});
+```
+
+> **Note:** The `updateTheme()` method is available in Vanilla JavaScript for efficient theme updates without recreating the calendar instance.
+
 ## Framework-Specific Features
 
 ### React Props

package/dist/core/index.d.mts

@@ -84,6 +84,19 @@ interface CalendarProps {
     onEventClick?: CalendarEventHandler;
     onMonthChange?: (year: number, month: number) => void;
 }
+interface CalendarTheme {
+    primary?: string;
+    secondary?: string;
+    tertiary?: string;
+    textColor?: string;
+    textLight?: string;
+    background?: string;
+    cellHover?: string;
+    borderColor?: string;
+    todayOutline?: string;
+    selectedBg?: string;
+    eventIndicator?: string;
+}
 
 declare const MONTHS: string[];
 declare const DAYS: string[];
@@ -195,4 +208,4 @@ declare class CalendarEngine {
     destroy(): void;
 }
 
-export { type CalendarActions, type CalendarConfig, type CalendarDate, CalendarEngine, type CalendarEvent, type CalendarEventHandler, type CalendarProps, type CalendarState, type CalendarViewModel, type CategoryColorMap, DAYS, DEFAULT_CATEGORY_COLORS, MONTHS, type PopupPosition, formatAttendees, formatDateForDisplay, formatTimeRange, generateCalendarDates, generateYears, getCategoryColor, getCellClasses, getDefaultEventColor, getEventsForDate, getMonthYearText, getPopupPositionClass, hasEvents, isSameDay, isToday, isValidHexColor, mergeCategoryColors, normalizeDate, sortEventsByTime };
+export { type CalendarActions, type CalendarConfig, type CalendarDate, CalendarEngine, type CalendarEvent, type CalendarEventHandler, type CalendarProps, type CalendarState, type CalendarTheme, type CalendarViewModel, type CategoryColorMap, DAYS, DEFAULT_CATEGORY_COLORS, MONTHS, type PopupPosition, formatAttendees, formatDateForDisplay, formatTimeRange, generateCalendarDates, generateYears, getCategoryColor, getCellClasses, getDefaultEventColor, getEventsForDate, getMonthYearText, getPopupPositionClass, hasEvents, isSameDay, isToday, isValidHexColor, mergeCategoryColors, normalizeDate, sortEventsByTime };

package/dist/core/index.d.ts

@@ -84,6 +84,19 @@ interface CalendarProps {
     onEventClick?: CalendarEventHandler;
     onMonthChange?: (year: number, month: number) => void;
 }
+interface CalendarTheme {
+    primary?: string;
+    secondary?: string;
+    tertiary?: string;
+    textColor?: string;
+    textLight?: string;
+    background?: string;
+    cellHover?: string;
+    borderColor?: string;
+    todayOutline?: string;
+    selectedBg?: string;
+    eventIndicator?: string;
+}
 
 declare const MONTHS: string[];
 declare const DAYS: string[];
@@ -195,4 +208,4 @@ declare class CalendarEngine {
     destroy(): void;
 }
 
-export { type CalendarActions, type CalendarConfig, type CalendarDate, CalendarEngine, type CalendarEvent, type CalendarEventHandler, type CalendarProps, type CalendarState, type CalendarViewModel, type CategoryColorMap, DAYS, DEFAULT_CATEGORY_COLORS, MONTHS, type PopupPosition, formatAttendees, formatDateForDisplay, formatTimeRange, generateCalendarDates, generateYears, getCategoryColor, getCellClasses, getDefaultEventColor, getEventsForDate, getMonthYearText, getPopupPositionClass, hasEvents, isSameDay, isToday, isValidHexColor, mergeCategoryColors, normalizeDate, sortEventsByTime };
+export { type CalendarActions, type CalendarConfig, type CalendarDate, CalendarEngine, type CalendarEvent, type CalendarEventHandler, type CalendarProps, type CalendarState, type CalendarTheme, type CalendarViewModel, type CategoryColorMap, DAYS, DEFAULT_CATEGORY_COLORS, MONTHS, type PopupPosition, formatAttendees, formatDateForDisplay, formatTimeRange, generateCalendarDates, generateYears, getCategoryColor, getCellClasses, getDefaultEventColor, getEventsForDate, getMonthYearText, getPopupPositionClass, hasEvents, isSameDay, isToday, isValidHexColor, mergeCategoryColors, normalizeDate, sortEventsByTime };

package/dist/index.d.mts

@@ -87,6 +87,19 @@ interface CalendarProps {
     onEventClick?: CalendarEventHandler;
     onMonthChange?: (year: number, month: number) => void;
 }
+interface CalendarTheme {
+    primary?: string;
+    secondary?: string;
+    tertiary?: string;
+    textColor?: string;
+    textLight?: string;
+    background?: string;
+    cellHover?: string;
+    borderColor?: string;
+    todayOutline?: string;
+    selectedBg?: string;
+    eventIndicator?: string;
+}
 
 declare const MONTHS: string[];
 declare const DAYS: string[];
@@ -205,6 +218,7 @@ interface ReactCalendarProps extends CalendarProps {
     renderEvent?: (event: CalendarEvent) => ReactNode;
     renderNoEvents?: () => ReactNode;
     title?: string;
+    theme?: CalendarTheme;
 }
 type CalendarComponentProps$1 = ReactCalendarProps;
 interface DatePopupProps$1 {
@@ -232,6 +246,7 @@ type index$2_CalendarEvent = CalendarEvent;
 type index$2_CalendarEventHandler = CalendarEventHandler;
 type index$2_CalendarProps = CalendarProps;
 type index$2_CalendarState = CalendarState;
+type index$2_CalendarTheme = CalendarTheme;
 type index$2_CalendarViewModel = CalendarViewModel;
 type index$2_CategoryColorMap = CategoryColorMap;
 declare const index$2_DAYS: typeof DAYS;
@@ -258,7 +273,7 @@ declare const index$2_mergeCategoryColors: typeof mergeCategoryColors;
 declare const index$2_normalizeDate: typeof normalizeDate;
 declare const index$2_sortEventsByTime: typeof sortEventsByTime;
 declare namespace index$2 {
-  export { Calendar$1 as Calendar, type index$2_CalendarActions as CalendarActions, type CalendarComponentProps$1 as CalendarComponentProps, type index$2_CalendarConfig as CalendarConfig, type index$2_CalendarDate as CalendarDate, index$2_CalendarEngine as CalendarEngine, type index$2_CalendarEvent as CalendarEvent, type index$2_CalendarEventHandler as CalendarEventHandler, type index$2_CalendarProps as CalendarProps, type index$2_CalendarState as CalendarState, type index$2_CalendarViewModel as CalendarViewModel, type index$2_CategoryColorMap as CategoryColorMap, index$2_DAYS as DAYS, index$2_DEFAULT_CATEGORY_COLORS as DEFAULT_CATEGORY_COLORS, DatePopup$1 as DatePopup, type DatePopupProps$1 as DatePopupProps, index$2_MONTHS as MONTHS, type index$2_PopupPosition as PopupPosition, type index$2_ReactCalendarProps as ReactCalendarProps, index$2_formatAttendees as formatAttendees, index$2_formatDateForDisplay as formatDateForDisplay, index$2_formatTimeRange as formatTimeRange, index$2_generateCalendarDates as generateCalendarDates, index$2_generateYears as generateYears, index$2_getCategoryColor as getCategoryColor, index$2_getCellClasses as getCellClasses, index$2_getDefaultEventColor as getDefaultEventColor, index$2_getEventsForDate as getEventsForDate, index$2_getMonthYearText as getMonthYearText, index$2_getPopupPositionClass as getPopupPositionClass, index$2_hasEvents as hasEvents, index$2_isSameDay as isSameDay, index$2_isToday as isToday, index$2_isValidHexColor as isValidHexColor, index$2_mergeCategoryColors as mergeCategoryColors, index$2_normalizeDate as normalizeDate, index$2_sortEventsByTime as sortEventsByTime };
+  export { Calendar$1 as Calendar, type index$2_CalendarActions as CalendarActions, type CalendarComponentProps$1 as CalendarComponentProps, type index$2_CalendarConfig as CalendarConfig, type index$2_CalendarDate as CalendarDate, index$2_CalendarEngine as CalendarEngine, type index$2_CalendarEvent as CalendarEvent, type index$2_CalendarEventHandler as CalendarEventHandler, type index$2_CalendarProps as CalendarProps, type index$2_CalendarState as CalendarState, type index$2_CalendarTheme as CalendarTheme, type index$2_CalendarViewModel as CalendarViewModel, type index$2_CategoryColorMap as CategoryColorMap, index$2_DAYS as DAYS, index$2_DEFAULT_CATEGORY_COLORS as DEFAULT_CATEGORY_COLORS, DatePopup$1 as DatePopup, type DatePopupProps$1 as DatePopupProps, index$2_MONTHS as MONTHS, type index$2_PopupPosition as PopupPosition, type index$2_ReactCalendarProps as ReactCalendarProps, index$2_formatAttendees as formatAttendees, index$2_formatDateForDisplay as formatDateForDisplay, index$2_formatTimeRange as formatTimeRange, index$2_generateCalendarDates as generateCalendarDates, index$2_generateYears as generateYears, index$2_getCategoryColor as getCategoryColor, index$2_getCellClasses as getCellClasses, index$2_getDefaultEventColor as getDefaultEventColor, index$2_getEventsForDate as getEventsForDate, index$2_getMonthYearText as getMonthYearText, index$2_getPopupPositionClass as getPopupPositionClass, index$2_hasEvents as hasEvents, index$2_isSameDay as isSameDay, index$2_isToday as isToday, index$2_isValidHexColor as isValidHexColor, index$2_mergeCategoryColors as mergeCategoryColors, index$2_normalizeDate as normalizeDate, index$2_sortEventsByTime as sortEventsByTime };
 }
 
 interface ReactNativeCalendarProps extends CalendarProps {
@@ -272,6 +287,7 @@ interface ReactNativeCalendarProps extends CalendarProps {
     renderNoEvents?: () => ReactNode;
     title?: string;
     showCloseButton?: boolean;
+    theme?: CalendarTheme;
 }
 type CalendarComponentProps = ReactNativeCalendarProps;
 interface DatePopupProps {
@@ -686,6 +702,7 @@ type index$1_CalendarEvent = CalendarEvent;
 type index$1_CalendarEventHandler = CalendarEventHandler;
 type index$1_CalendarProps = CalendarProps;
 type index$1_CalendarState = CalendarState;
+type index$1_CalendarTheme = CalendarTheme;
 type index$1_CalendarViewModel = CalendarViewModel;
 type index$1_CategoryColorMap = CategoryColorMap;
 declare const index$1_DAYS: typeof DAYS;
@@ -716,7 +733,7 @@ declare const index$1_mergeCategoryColors: typeof mergeCategoryColors;
 declare const index$1_normalizeDate: typeof normalizeDate;
 declare const index$1_sortEventsByTime: typeof sortEventsByTime;
 declare namespace index$1 {
-  export { index$1_Calendar as Calendar, type index$1_CalendarActions as CalendarActions, type index$1_CalendarComponentProps as CalendarComponentProps, type index$1_CalendarConfig as CalendarConfig, type index$1_CalendarDate as CalendarDate, index$1_CalendarEngine as CalendarEngine, type index$1_CalendarEvent as CalendarEvent, type index$1_CalendarEventHandler as CalendarEventHandler, type index$1_CalendarProps as CalendarProps, type index$1_CalendarState as CalendarState, type index$1_CalendarViewModel as CalendarViewModel, type index$1_CategoryColorMap as CategoryColorMap, index$1_DAYS as DAYS, index$1_DEFAULT_CATEGORY_COLORS as DEFAULT_CATEGORY_COLORS, index$1_DatePopup as DatePopup, type index$1_DatePopupProps as DatePopupProps, index$1_MONTHS as MONTHS, type index$1_PopupPosition as PopupPosition, type index$1_ReactNativeCalendarProps as ReactNativeCalendarProps, type index$1_SelectProps as SelectProps, index$1_calendarStyles as calendarStyles, index$1_formatAttendees as formatAttendees, index$1_formatDateForDisplay as formatDateForDisplay, index$1_formatTimeRange as formatTimeRange, index$1_generateCalendarDates as generateCalendarDates, index$1_generateYears as generateYears, index$1_getCategoryColor as getCategoryColor, index$1_getCellClasses as getCellClasses, index$1_getDefaultEventColor as getDefaultEventColor, index$1_getEventsForDate as getEventsForDate, index$1_getMonthYearText as getMonthYearText, index$1_getPopupPositionClass as getPopupPositionClass, index$1_hasEvents as hasEvents, index$1_isSameDay as isSameDay, index$1_isToday as isToday, index$1_isValidHexColor as isValidHexColor, index$1_mergeCategoryColors as mergeCategoryColors, index$1_normalizeDate as normalizeDate, index$1_sortEventsByTime as sortEventsByTime };
+  export { index$1_Calendar as Calendar, type index$1_CalendarActions as CalendarActions, type index$1_CalendarComponentProps as CalendarComponentProps, type index$1_CalendarConfig as CalendarConfig, type index$1_CalendarDate as CalendarDate, index$1_CalendarEngine as CalendarEngine, type index$1_CalendarEvent as CalendarEvent, type index$1_CalendarEventHandler as CalendarEventHandler, type index$1_CalendarProps as CalendarProps, type index$1_CalendarState as CalendarState, type index$1_CalendarTheme as CalendarTheme, type index$1_CalendarViewModel as CalendarViewModel, type index$1_CategoryColorMap as CategoryColorMap, index$1_DAYS as DAYS, index$1_DEFAULT_CATEGORY_COLORS as DEFAULT_CATEGORY_COLORS, index$1_DatePopup as DatePopup, type index$1_DatePopupProps as DatePopupProps, index$1_MONTHS as MONTHS, type index$1_PopupPosition as PopupPosition, type index$1_ReactNativeCalendarProps as ReactNativeCalendarProps, type index$1_SelectProps as SelectProps, index$1_calendarStyles as calendarStyles, index$1_formatAttendees as formatAttendees, index$1_formatDateForDisplay as formatDateForDisplay, index$1_formatTimeRange as formatTimeRange, index$1_generateCalendarDates as generateCalendarDates, index$1_generateYears as generateYears, index$1_getCategoryColor as getCategoryColor, index$1_getCellClasses as getCellClasses, index$1_getDefaultEventColor as getDefaultEventColor, index$1_getEventsForDate as getEventsForDate, index$1_getMonthYearText as getMonthYearText, index$1_getPopupPositionClass as getPopupPositionClass, index$1_hasEvents as hasEvents, index$1_isSameDay as isSameDay, index$1_isToday as isToday, index$1_isValidHexColor as isValidHexColor, index$1_mergeCategoryColors as mergeCategoryColors, index$1_normalizeDate as normalizeDate, index$1_sortEventsByTime as sortEventsByTime };
 }
 
 interface VanillaCalendarProps extends CalendarProps {
@@ -725,10 +742,12 @@ interface VanillaCalendarProps extends CalendarProps {
     title?: string;
     renderEvent?: (event: CalendarEvent) => string;
     renderNoEvents?: () => string;
+    theme?: CalendarTheme;
 }
 interface VanillaCalendarInstance {
     destroy: () => void;
     updateEvents: (events: CalendarEvent[]) => void;
+    updateTheme: (theme: CalendarTheme) => void;
     getCurrentDate: () => Date | null;
     goToDate: (date: Date) => void;
     getEngine: () => CalendarEngine;
@@ -741,10 +760,12 @@ declare class VanillaCalendar implements VanillaCalendarInstance {
     private props;
     private actions;
     constructor(props: VanillaCalendarProps);
+    private applyTheme;
     private init;
     private render;
     private attachEventListeners;
     updateEvents(events: CalendarEvent[]): void;
+    updateTheme(theme: CalendarTheme): void;
     getCurrentDate(): Date | null;
     goToDate(date: Date): void;
     getEngine(): CalendarEngine;
@@ -761,6 +782,7 @@ type index_CalendarEvent = CalendarEvent;
 type index_CalendarEventHandler = CalendarEventHandler;
 type index_CalendarProps = CalendarProps;
 type index_CalendarState = CalendarState;
+type index_CalendarTheme = CalendarTheme;
 type index_CalendarViewModel = CalendarViewModel;
 type index_CategoryColorMap = CategoryColorMap;
 declare const index_DAYS: typeof DAYS;
@@ -791,10 +813,10 @@ declare const index_mergeCategoryColors: typeof mergeCategoryColors;
 declare const index_normalizeDate: typeof normalizeDate;
 declare const index_sortEventsByTime: typeof sortEventsByTime;
 declare namespace index {
-  export { type index_CalendarActions as CalendarActions, type index_CalendarConfig as CalendarConfig, type index_CalendarDate as CalendarDate, index_CalendarEngine as CalendarEngine, type index_CalendarEvent as CalendarEvent, type index_CalendarEventHandler as CalendarEventHandler, type index_CalendarProps as CalendarProps, type index_CalendarState as CalendarState, type index_CalendarViewModel as CalendarViewModel, type index_CategoryColorMap as CategoryColorMap, index_DAYS as DAYS, index_DEFAULT_CATEGORY_COLORS as DEFAULT_CATEGORY_COLORS, index_MONTHS as MONTHS, type index_PopupPosition as PopupPosition, index_VanillaCalendar as VanillaCalendar, type index_VanillaCalendarInstance as VanillaCalendarInstance, type index_VanillaCalendarProps as VanillaCalendarProps, index_createCalendar as createCalendar, index_formatAttendees as formatAttendees, index_formatDateForDisplay as formatDateForDisplay, index_formatTimeRange as formatTimeRange, index_generateCalendarDates as generateCalendarDates, index_generateYears as generateYears, index_getCategoryColor as getCategoryColor, index_getCellClasses as getCellClasses, index_getDefaultEventColor as getDefaultEventColor, index_getEventsForDate as getEventsForDate, index_getMonthYearText as getMonthYearText, index_getPopupPositionClass as getPopupPositionClass, index_hasEvents as hasEvents, index_isSameDay as isSameDay, index_isToday as isToday, index_isValidHexColor as isValidHexColor, index_mergeCategoryColors as mergeCategoryColors, index_normalizeDate as normalizeDate, index_sortEventsByTime as sortEventsByTime };
+  export { type index_CalendarActions as CalendarActions, type index_CalendarConfig as CalendarConfig, type index_CalendarDate as CalendarDate, index_CalendarEngine as CalendarEngine, type index_CalendarEvent as CalendarEvent, type index_CalendarEventHandler as CalendarEventHandler, type index_CalendarProps as CalendarProps, type index_CalendarState as CalendarState, type index_CalendarTheme as CalendarTheme, type index_CalendarViewModel as CalendarViewModel, type index_CategoryColorMap as CategoryColorMap, index_DAYS as DAYS, index_DEFAULT_CATEGORY_COLORS as DEFAULT_CATEGORY_COLORS, index_MONTHS as MONTHS, type index_PopupPosition as PopupPosition, index_VanillaCalendar as VanillaCalendar, type index_VanillaCalendarInstance as VanillaCalendarInstance, type index_VanillaCalendarProps as VanillaCalendarProps, index_createCalendar as createCalendar, index_formatAttendees as formatAttendees, index_formatDateForDisplay as formatDateForDisplay, index_formatTimeRange as formatTimeRange, index_generateCalendarDates as generateCalendarDates, index_generateYears as generateYears, index_getCategoryColor as getCategoryColor, index_getCellClasses as getCellClasses, index_getDefaultEventColor as getDefaultEventColor, index_getEventsForDate as getEventsForDate, index_getMonthYearText as getMonthYearText, index_getPopupPositionClass as getPopupPositionClass, index_hasEvents as hasEvents, index_isSameDay as isSameDay, index_isToday as isToday, index_isValidHexColor as isValidHexColor, index_mergeCategoryColors as mergeCategoryColors, index_normalizeDate as normalizeDate, index_sortEventsByTime as sortEventsByTime };
 }
 
 declare const version = "1.0.0";
 declare const name = "kalendly";
 
-export { type CalendarActions, type CalendarConfig, type CalendarDate, CalendarEngine, type CalendarEvent, type CalendarEventHandler, type CalendarProps, type CalendarState, type CalendarViewModel, type CategoryColorMap, DAYS, DEFAULT_CATEGORY_COLORS, MONTHS, type PopupPosition, index$2 as React, Calendar$1 as ReactCalendar, index$1 as ReactNative, Calendar as ReactNativeCalendar, index as Vanilla, createCalendar as createVanillaCalendar, formatAttendees, formatDateForDisplay, formatTimeRange, generateCalendarDates, generateYears, getCategoryColor, getCellClasses, getDefaultEventColor, getEventsForDate, getMonthYearText, getPopupPositionClass, hasEvents, isSameDay, isToday, isValidHexColor, mergeCategoryColors, name, normalizeDate, sortEventsByTime, version };
+export { type CalendarActions, type CalendarConfig, type CalendarDate, CalendarEngine, type CalendarEvent, type CalendarEventHandler, type CalendarProps, type CalendarState, type CalendarTheme, type CalendarViewModel, type CategoryColorMap, DAYS, DEFAULT_CATEGORY_COLORS, MONTHS, type PopupPosition, index$2 as React, Calendar$1 as ReactCalendar, index$1 as ReactNative, Calendar as ReactNativeCalendar, index as Vanilla, createCalendar as createVanillaCalendar, formatAttendees, formatDateForDisplay, formatTimeRange, generateCalendarDates, generateYears, getCategoryColor, getCellClasses, getDefaultEventColor, getEventsForDate, getMonthYearText, getPopupPositionClass, hasEvents, isSameDay, isToday, isValidHexColor, mergeCategoryColors, name, normalizeDate, sortEventsByTime, version };

package/dist/index.d.ts

@@ -87,6 +87,19 @@ interface CalendarProps {
     onEventClick?: CalendarEventHandler;
     onMonthChange?: (year: number, month: number) => void;
 }
+interface CalendarTheme {
+    primary?: string;
+    secondary?: string;
+    tertiary?: string;
+    textColor?: string;
+    textLight?: string;
+    background?: string;
+    cellHover?: string;
+    borderColor?: string;
+    todayOutline?: string;
+    selectedBg?: string;
+    eventIndicator?: string;
+}
 
 declare const MONTHS: string[];
 declare const DAYS: string[];
@@ -205,6 +218,7 @@ interface ReactCalendarProps extends CalendarProps {
     renderEvent?: (event: CalendarEvent) => ReactNode;
     renderNoEvents?: () => ReactNode;
     title?: string;
+    theme?: CalendarTheme;
 }
 type CalendarComponentProps$1 = ReactCalendarProps;
 interface DatePopupProps$1 {
@@ -232,6 +246,7 @@ type index$2_CalendarEvent = CalendarEvent;
 type index$2_CalendarEventHandler = CalendarEventHandler;
 type index$2_CalendarProps = CalendarProps;
 type index$2_CalendarState = CalendarState;
+type index$2_CalendarTheme = CalendarTheme;
 type index$2_CalendarViewModel = CalendarViewModel;
 type index$2_CategoryColorMap = CategoryColorMap;
 declare const index$2_DAYS: typeof DAYS;
@@ -258,7 +273,7 @@ declare const index$2_mergeCategoryColors: typeof mergeCategoryColors;
 declare const index$2_normalizeDate: typeof normalizeDate;
 declare const index$2_sortEventsByTime: typeof sortEventsByTime;
 declare namespace index$2 {
-  export { Calendar$1 as Calendar, type index$2_CalendarActions as CalendarActions, type CalendarComponentProps$1 as CalendarComponentProps, type index$2_CalendarConfig as CalendarConfig, type index$2_CalendarDate as CalendarDate, index$2_CalendarEngine as CalendarEngine, type index$2_CalendarEvent as CalendarEvent, type index$2_CalendarEventHandler as CalendarEventHandler, type index$2_CalendarProps as CalendarProps, type index$2_CalendarState as CalendarState, type index$2_CalendarViewModel as CalendarViewModel, type index$2_CategoryColorMap as CategoryColorMap, index$2_DAYS as DAYS, index$2_DEFAULT_CATEGORY_COLORS as DEFAULT_CATEGORY_COLORS, DatePopup$1 as DatePopup, type DatePopupProps$1 as DatePopupProps, index$2_MONTHS as MONTHS, type index$2_PopupPosition as PopupPosition, type index$2_ReactCalendarProps as ReactCalendarProps, index$2_formatAttendees as formatAttendees, index$2_formatDateForDisplay as formatDateForDisplay, index$2_formatTimeRange as formatTimeRange, index$2_generateCalendarDates as generateCalendarDates, index$2_generateYears as generateYears, index$2_getCategoryColor as getCategoryColor, index$2_getCellClasses as getCellClasses, index$2_getDefaultEventColor as getDefaultEventColor, index$2_getEventsForDate as getEventsForDate, index$2_getMonthYearText as getMonthYearText, index$2_getPopupPositionClass as getPopupPositionClass, index$2_hasEvents as hasEvents, index$2_isSameDay as isSameDay, index$2_isToday as isToday, index$2_isValidHexColor as isValidHexColor, index$2_mergeCategoryColors as mergeCategoryColors, index$2_normalizeDate as normalizeDate, index$2_sortEventsByTime as sortEventsByTime };
+  export { Calendar$1 as Calendar, type index$2_CalendarActions as CalendarActions, type CalendarComponentProps$1 as CalendarComponentProps, type index$2_CalendarConfig as CalendarConfig, type index$2_CalendarDate as CalendarDate, index$2_CalendarEngine as CalendarEngine, type index$2_CalendarEvent as CalendarEvent, type index$2_CalendarEventHandler as CalendarEventHandler, type index$2_CalendarProps as CalendarProps, type index$2_CalendarState as CalendarState, type index$2_CalendarTheme as CalendarTheme, type index$2_CalendarViewModel as CalendarViewModel, type index$2_CategoryColorMap as CategoryColorMap, index$2_DAYS as DAYS, index$2_DEFAULT_CATEGORY_COLORS as DEFAULT_CATEGORY_COLORS, DatePopup$1 as DatePopup, type DatePopupProps$1 as DatePopupProps, index$2_MONTHS as MONTHS, type index$2_PopupPosition as PopupPosition, type index$2_ReactCalendarProps as ReactCalendarProps, index$2_formatAttendees as formatAttendees, index$2_formatDateForDisplay as formatDateForDisplay, index$2_formatTimeRange as formatTimeRange, index$2_generateCalendarDates as generateCalendarDates, index$2_generateYears as generateYears, index$2_getCategoryColor as getCategoryColor, index$2_getCellClasses as getCellClasses, index$2_getDefaultEventColor as getDefaultEventColor, index$2_getEventsForDate as getEventsForDate, index$2_getMonthYearText as getMonthYearText, index$2_getPopupPositionClass as getPopupPositionClass, index$2_hasEvents as hasEvents, index$2_isSameDay as isSameDay, index$2_isToday as isToday, index$2_isValidHexColor as isValidHexColor, index$2_mergeCategoryColors as mergeCategoryColors, index$2_normalizeDate as normalizeDate, index$2_sortEventsByTime as sortEventsByTime };
 }
 
 interface ReactNativeCalendarProps extends CalendarProps {
@@ -272,6 +287,7 @@ interface ReactNativeCalendarProps extends CalendarProps {
     renderNoEvents?: () => ReactNode;
     title?: string;
     showCloseButton?: boolean;
+    theme?: CalendarTheme;
 }
 type CalendarComponentProps = ReactNativeCalendarProps;
 interface DatePopupProps {
@@ -686,6 +702,7 @@ type index$1_CalendarEvent = CalendarEvent;
 type index$1_CalendarEventHandler = CalendarEventHandler;
 type index$1_CalendarProps = CalendarProps;
 type index$1_CalendarState = CalendarState;
+type index$1_CalendarTheme = CalendarTheme;
 type index$1_CalendarViewModel = CalendarViewModel;
 type index$1_CategoryColorMap = CategoryColorMap;
 declare const index$1_DAYS: typeof DAYS;
@@ -716,7 +733,7 @@ declare const index$1_mergeCategoryColors: typeof mergeCategoryColors;
 declare const index$1_normalizeDate: typeof normalizeDate;
 declare const index$1_sortEventsByTime: typeof sortEventsByTime;
 declare namespace index$1 {
-  export { index$1_Calendar as Calendar, type index$1_CalendarActions as CalendarActions, type index$1_CalendarComponentProps as CalendarComponentProps, type index$1_CalendarConfig as CalendarConfig, type index$1_CalendarDate as CalendarDate, index$1_CalendarEngine as CalendarEngine, type index$1_CalendarEvent as CalendarEvent, type index$1_CalendarEventHandler as CalendarEventHandler, type index$1_CalendarProps as CalendarProps, type index$1_CalendarState as CalendarState, type index$1_CalendarViewModel as CalendarViewModel, type index$1_CategoryColorMap as CategoryColorMap, index$1_DAYS as DAYS, index$1_DEFAULT_CATEGORY_COLORS as DEFAULT_CATEGORY_COLORS, index$1_DatePopup as DatePopup, type index$1_DatePopupProps as DatePopupProps, index$1_MONTHS as MONTHS, type index$1_PopupPosition as PopupPosition, type index$1_ReactNativeCalendarProps as ReactNativeCalendarProps, type index$1_SelectProps as SelectProps, index$1_calendarStyles as calendarStyles, index$1_formatAttendees as formatAttendees, index$1_formatDateForDisplay as formatDateForDisplay, index$1_formatTimeRange as formatTimeRange, index$1_generateCalendarDates as generateCalendarDates, index$1_generateYears as generateYears, index$1_getCategoryColor as getCategoryColor, index$1_getCellClasses as getCellClasses, index$1_getDefaultEventColor as getDefaultEventColor, index$1_getEventsForDate as getEventsForDate, index$1_getMonthYearText as getMonthYearText, index$1_getPopupPositionClass as getPopupPositionClass, index$1_hasEvents as hasEvents, index$1_isSameDay as isSameDay, index$1_isToday as isToday, index$1_isValidHexColor as isValidHexColor, index$1_mergeCategoryColors as mergeCategoryColors, index$1_normalizeDate as normalizeDate, index$1_sortEventsByTime as sortEventsByTime };
+  export { index$1_Calendar as Calendar, type index$1_CalendarActions as CalendarActions, type index$1_CalendarComponentProps as CalendarComponentProps, type index$1_CalendarConfig as CalendarConfig, type index$1_CalendarDate as CalendarDate, index$1_CalendarEngine as CalendarEngine, type index$1_CalendarEvent as CalendarEvent, type index$1_CalendarEventHandler as CalendarEventHandler, type index$1_CalendarProps as CalendarProps, type index$1_CalendarState as CalendarState, type index$1_CalendarTheme as CalendarTheme, type index$1_CalendarViewModel as CalendarViewModel, type index$1_CategoryColorMap as CategoryColorMap, index$1_DAYS as DAYS, index$1_DEFAULT_CATEGORY_COLORS as DEFAULT_CATEGORY_COLORS, index$1_DatePopup as DatePopup, type index$1_DatePopupProps as DatePopupProps, index$1_MONTHS as MONTHS, type index$1_PopupPosition as PopupPosition, type index$1_ReactNativeCalendarProps as ReactNativeCalendarProps, type index$1_SelectProps as SelectProps, index$1_calendarStyles as calendarStyles, index$1_formatAttendees as formatAttendees, index$1_formatDateForDisplay as formatDateForDisplay, index$1_formatTimeRange as formatTimeRange, index$1_generateCalendarDates as generateCalendarDates, index$1_generateYears as generateYears, index$1_getCategoryColor as getCategoryColor, index$1_getCellClasses as getCellClasses, index$1_getDefaultEventColor as getDefaultEventColor, index$1_getEventsForDate as getEventsForDate, index$1_getMonthYearText as getMonthYearText, index$1_getPopupPositionClass as getPopupPositionClass, index$1_hasEvents as hasEvents, index$1_isSameDay as isSameDay, index$1_isToday as isToday, index$1_isValidHexColor as isValidHexColor, index$1_mergeCategoryColors as mergeCategoryColors, index$1_normalizeDate as normalizeDate, index$1_sortEventsByTime as sortEventsByTime };
 }
 
 interface VanillaCalendarProps extends CalendarProps {
@@ -725,10 +742,12 @@ interface VanillaCalendarProps extends CalendarProps {
     title?: string;
     renderEvent?: (event: CalendarEvent) => string;
     renderNoEvents?: () => string;
+    theme?: CalendarTheme;
 }
 interface VanillaCalendarInstance {
     destroy: () => void;
     updateEvents: (events: CalendarEvent[]) => void;
+    updateTheme: (theme: CalendarTheme) => void;
     getCurrentDate: () => Date | null;
     goToDate: (date: Date) => void;
     getEngine: () => CalendarEngine;
@@ -741,10 +760,12 @@ declare class VanillaCalendar implements VanillaCalendarInstance {
     private props;
     private actions;
     constructor(props: VanillaCalendarProps);
+    private applyTheme;
     private init;
     private render;
     private attachEventListeners;
     updateEvents(events: CalendarEvent[]): void;
+    updateTheme(theme: CalendarTheme): void;
     getCurrentDate(): Date | null;
     goToDate(date: Date): void;
     getEngine(): CalendarEngine;
@@ -761,6 +782,7 @@ type index_CalendarEvent = CalendarEvent;
 type index_CalendarEventHandler = CalendarEventHandler;
 type index_CalendarProps = CalendarProps;
 type index_CalendarState = CalendarState;
+type index_CalendarTheme = CalendarTheme;
 type index_CalendarViewModel = CalendarViewModel;
 type index_CategoryColorMap = CategoryColorMap;
 declare const index_DAYS: typeof DAYS;
@@ -791,10 +813,10 @@ declare const index_mergeCategoryColors: typeof mergeCategoryColors;
 declare const index_normalizeDate: typeof normalizeDate;
 declare const index_sortEventsByTime: typeof sortEventsByTime;
 declare namespace index {
-  export { type index_CalendarActions as CalendarActions, type index_CalendarConfig as CalendarConfig, type index_CalendarDate as CalendarDate, index_CalendarEngine as CalendarEngine, type index_CalendarEvent as CalendarEvent, type index_CalendarEventHandler as CalendarEventHandler, type index_CalendarProps as CalendarProps, type index_CalendarState as CalendarState, type index_CalendarViewModel as CalendarViewModel, type index_CategoryColorMap as CategoryColorMap, index_DAYS as DAYS, index_DEFAULT_CATEGORY_COLORS as DEFAULT_CATEGORY_COLORS, index_MONTHS as MONTHS, type index_PopupPosition as PopupPosition, index_VanillaCalendar as VanillaCalendar, type index_VanillaCalendarInstance as VanillaCalendarInstance, type index_VanillaCalendarProps as VanillaCalendarProps, index_createCalendar as createCalendar, index_formatAttendees as formatAttendees, index_formatDateForDisplay as formatDateForDisplay, index_formatTimeRange as formatTimeRange, index_generateCalendarDates as generateCalendarDates, index_generateYears as generateYears, index_getCategoryColor as getCategoryColor, index_getCellClasses as getCellClasses, index_getDefaultEventColor as getDefaultEventColor, index_getEventsForDate as getEventsForDate, index_getMonthYearText as getMonthYearText, index_getPopupPositionClass as getPopupPositionClass, index_hasEvents as hasEvents, index_isSameDay as isSameDay, index_isToday as isToday, index_isValidHexColor as isValidHexColor, index_mergeCategoryColors as mergeCategoryColors, index_normalizeDate as normalizeDate, index_sortEventsByTime as sortEventsByTime };
+  export { type index_CalendarActions as CalendarActions, type index_CalendarConfig as CalendarConfig, type index_CalendarDate as CalendarDate, index_CalendarEngine as CalendarEngine, type index_CalendarEvent as CalendarEvent, type index_CalendarEventHandler as CalendarEventHandler, type index_CalendarProps as CalendarProps, type index_CalendarState as CalendarState, type index_CalendarTheme as CalendarTheme, type index_CalendarViewModel as CalendarViewModel, type index_CategoryColorMap as CategoryColorMap, index_DAYS as DAYS, index_DEFAULT_CATEGORY_COLORS as DEFAULT_CATEGORY_COLORS, index_MONTHS as MONTHS, type index_PopupPosition as PopupPosition, index_VanillaCalendar as VanillaCalendar, type index_VanillaCalendarInstance as VanillaCalendarInstance, type index_VanillaCalendarProps as VanillaCalendarProps, index_createCalendar as createCalendar, index_formatAttendees as formatAttendees, index_formatDateForDisplay as formatDateForDisplay, index_formatTimeRange as formatTimeRange, index_generateCalendarDates as generateCalendarDates, index_generateYears as generateYears, index_getCategoryColor as getCategoryColor, index_getCellClasses as getCellClasses, index_getDefaultEventColor as getDefaultEventColor, index_getEventsForDate as getEventsForDate, index_getMonthYearText as getMonthYearText, index_getPopupPositionClass as getPopupPositionClass, index_hasEvents as hasEvents, index_isSameDay as isSameDay, index_isToday as isToday, index_isValidHexColor as isValidHexColor, index_mergeCategoryColors as mergeCategoryColors, index_normalizeDate as normalizeDate, index_sortEventsByTime as sortEventsByTime };
 }
 
 declare const version = "1.0.0";
 declare const name = "kalendly";
 
-export { type CalendarActions, type CalendarConfig, type CalendarDate, CalendarEngine, type CalendarEvent, type CalendarEventHandler, type CalendarProps, type CalendarState, type CalendarViewModel, type CategoryColorMap, DAYS, DEFAULT_CATEGORY_COLORS, MONTHS, type PopupPosition, index$2 as React, Calendar$1 as ReactCalendar, index$1 as ReactNative, Calendar as ReactNativeCalendar, index as Vanilla, createCalendar as createVanillaCalendar, formatAttendees, formatDateForDisplay, formatTimeRange, generateCalendarDates, generateYears, getCategoryColor, getCellClasses, getDefaultEventColor, getEventsForDate, getMonthYearText, getPopupPositionClass, hasEvents, isSameDay, isToday, isValidHexColor, mergeCategoryColors, name, normalizeDate, sortEventsByTime, version };
+export { type CalendarActions, type CalendarConfig, type CalendarDate, CalendarEngine, type CalendarEvent, type CalendarEventHandler, type CalendarProps, type CalendarState, type CalendarTheme, type CalendarViewModel, type CategoryColorMap, DAYS, DEFAULT_CATEGORY_COLORS, MONTHS, type PopupPosition, index$2 as React, Calendar$1 as ReactCalendar, index$1 as ReactNative, Calendar as ReactNativeCalendar, index as Vanilla, createCalendar as createVanillaCalendar, formatAttendees, formatDateForDisplay, formatTimeRange, generateCalendarDates, generateYears, getCategoryColor, getCellClasses, getDefaultEventColor, getEventsForDate, getMonthYearText, getPopupPositionClass, hasEvents, isSameDay, isToday, isValidHexColor, mergeCategoryColors, name, normalizeDate, sortEventsByTime, version };