kalendly 0.1.4 → 0.1.6

package/README.md

@@ -1,26 +1,39 @@
-# kalendly Universal Calendar Scheduler
+# kalendly Universal Calendar
 
-A universal calendar scheduler component that works seamlessly across React, Vue, and React Native with full TypeScript support.
+A universal calendar component that works seamlessly across React, Vue, and React Native with full TypeScript support.
 
 ## Features
 
 - 🚀 **Universal**: Works with React, Vue, React Native, and Vanilla JavaScript
-- 📱 **Responsive**: Mobile-friendly design that matches your existing Vue implementation
+- 📱 **Responsive**: Mobile-friendly design that matches your existing UI implementation
 - 🎨 **Customizable**: Easy to theme and customize with CSS variables
 - 🔒 **Type Safe**: Full TypeScript support
 - 📅 **Event Management**: Add, display, and manage events with rich metadata
 - 🔔 **Advanced Features**: Recurring events, reminders, categories, priorities, and collaboration
 - 🌐 **Accessible**: Built with accessibility in mind
 - 📦 **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
 
@@ -273,17 +286,19 @@ export default App;
 
 ### Props
 
-| Prop             | Type                                    | Default            | Description                             |
-| ---------------- | --------------------------------------- | ------------------ | --------------------------------------- |
-| `events`         | `CalendarEvent[]`                       | `[]`               | Array of events to display              |
-| `initialDate`    | `Date`                                  | `new Date()`       | Initial date to display                 |
-| `minYear`        | `number`                                | `currentYear - 30` | Minimum selectable year                 |
-| `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      |
-| `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             |
+| Prop                 | Type                                    | Default            | Description                             |
+| -------------------- | --------------------------------------- | ------------------ | --------------------------------------- |
+| `events`             | `CalendarEvent[]`                       | `[]`               | Array of events to display              |
+| `initialDate`        | `Date`                                  | `new Date()`       | Initial date to display                 |
+| `minYear`            | `number`                                | `currentYear - 30` | Minimum selectable year                 |
+| `maxYear`            | `number`                                | `currentYear + 10` | Maximum selectable year                 |
+| `weekStartsOn`       | `0 \| 1`                                | `0`                | Week start day (0 = Sunday, 1 = Monday) |
+| `useShortMonthNames` | `boolean`                               | `false`            | Use abbreviated month names (Jan, Feb)  |
+| `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             |
 
 ### CalendarEvent Interface
 
@@ -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
@@ -508,7 +735,9 @@ Always include the CSS file:
 ```css
 :root {
   --calendar-primary-color: #fc8917;
+  --calendar-primary-color-rgb: 252, 137, 23;
   --calendar-secondary-color: #fca045;
+  --calendar-secondary-color-rgb: 252, 160, 69;
   --calendar-tertiary-color: #fdb873;
   --calendar-text-color: #2c3e50;
   --calendar-border-color: #dee2e6;
@@ -518,6 +747,8 @@ Always include the CSS file:
 }
 ```
 
+> **Note:** The `-rgb` variables are used for semi-transparent backgrounds (e.g., hover states) and provide compatibility with older browsers (Chrome < 111, Safari iOS < 16.2).
+
 ### React Native Theming
 
 ```javascript
@@ -558,6 +789,10 @@ const actions = engine.getActions();
 actions.next();
 actions.previous();
 actions.jump(2025, 5); // June 2025
+actions.goToToday(); // Navigate to current month
+
+// Check current view
+const isCurrentMonth = actions.isCurrentMonth(); // true if viewing today's month
 
 // Clean up
 unsubscribe();
@@ -613,6 +848,10 @@ See [CHANGELOG.md](CHANGELOG.md) for detailed release notes and version history.
 
 ### Recent Updates
 
-- **v0.1.2** (Upcoming): Enhanced event parameters with structured metadata, categories, recurrence, collaboration features, and Netlify deployment
+- **v0.1.6** (Upcoming): Navigation enhancements with Today button, month/year picker dropdown, calendar grid improvements showing previous/next month days, and browser compatibility fixes
+- **v0.1.5**: Universal theming system, TypeScript support improvements, integration test enhancements
+- **v0.1.4**: Netlify configuration updates
+- **v0.1.3**: Vue types generation improvements
+- **v0.1.2**: Enhanced event parameters with structured metadata, categories, recurrence, collaboration features
 - **v0.1.1**: Pre-commit hooks and trusted publishing with OIDC
 - **v0.1.0**: Initial release with React, Vue, React Native, and Vanilla JavaScript support

package/dist/core/index.d.mts

@@ -57,6 +57,8 @@ interface CalendarActions {
     next: () => void;
     previous: () => void;
     jump: (year: number, month: number) => void;
+    goToToday: () => void;
+    isCurrentMonth: () => boolean;
     selectDate: (date: Date) => void;
     updateTasks: () => void;
 }
@@ -70,7 +72,7 @@ interface CalendarViewModel extends CalendarState {
     years: number[];
     monthAndYearText: string;
     scheduleDay: string;
-    calendarDates: (CalendarDate | null)[][];
+    calendarDates: CalendarDate[][];
     popupPositionClass: string;
 }
 type CalendarEventHandler = (event: CalendarEvent) => void;
@@ -80,12 +82,27 @@ interface CalendarProps {
     minYear?: number;
     maxYear?: number;
     weekStartsOn?: 0 | 1;
+    useShortMonthNames?: boolean;
     onDateSelect?: (date: Date) => void;
     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 MONTHS_FULL: string[];
 declare const DAYS: string[];
 declare function normalizeDate(date: Date): Date;
 declare function isSameDay(date1: Date, date2: Date): boolean;
@@ -93,9 +110,9 @@ declare function isToday(date: Date): boolean;
 declare function generateYears(minYear?: number, maxYear?: number): number[];
 declare function getEventsForDate(events: CalendarEvent[], date: Date): CalendarEvent[];
 declare function hasEvents(events: CalendarEvent[], date: Date): boolean;
-declare function generateCalendarDates(year: number, month: number, events?: CalendarEvent[], weekStartsOn?: 0 | 1): (CalendarDate | null)[][];
+declare function generateCalendarDates(year: number, month: number, events?: CalendarEvent[], weekStartsOn?: 0 | 1): CalendarDate[][];
 declare function getPopupPositionClass(selectedDayIndex: number | null): string;
-declare function getCellClasses(calendarDate: CalendarDate | null): string[];
+declare function getCellClasses(calendarDate: CalendarDate): string[];
 declare function formatDateForDisplay(date: Date): string;
 declare function getMonthYearText(year: number, month: number): string;
 declare function formatTimeRange(event: CalendarEvent): string;
@@ -145,6 +162,14 @@ declare class CalendarEngine {
      * Jump to specific month and year
      */
     private jump;
+    /**
+     * Navigate to current month (today)
+     */
+    private goToToday;
+    /**
+     * Check if currently viewing today's month
+     */
+    private isCurrentMonth;
     /**
      * Select a specific date
      */
@@ -195,4 +220,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, MONTHS_FULL, 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

@@ -57,6 +57,8 @@ interface CalendarActions {
     next: () => void;
     previous: () => void;
     jump: (year: number, month: number) => void;
+    goToToday: () => void;
+    isCurrentMonth: () => boolean;
     selectDate: (date: Date) => void;
     updateTasks: () => void;
 }
@@ -70,7 +72,7 @@ interface CalendarViewModel extends CalendarState {
     years: number[];
     monthAndYearText: string;
     scheduleDay: string;
-    calendarDates: (CalendarDate | null)[][];
+    calendarDates: CalendarDate[][];
     popupPositionClass: string;
 }
 type CalendarEventHandler = (event: CalendarEvent) => void;
@@ -80,12 +82,27 @@ interface CalendarProps {
     minYear?: number;
     maxYear?: number;
     weekStartsOn?: 0 | 1;
+    useShortMonthNames?: boolean;
     onDateSelect?: (date: Date) => void;
     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 MONTHS_FULL: string[];
 declare const DAYS: string[];
 declare function normalizeDate(date: Date): Date;
 declare function isSameDay(date1: Date, date2: Date): boolean;
@@ -93,9 +110,9 @@ declare function isToday(date: Date): boolean;
 declare function generateYears(minYear?: number, maxYear?: number): number[];
 declare function getEventsForDate(events: CalendarEvent[], date: Date): CalendarEvent[];
 declare function hasEvents(events: CalendarEvent[], date: Date): boolean;
-declare function generateCalendarDates(year: number, month: number, events?: CalendarEvent[], weekStartsOn?: 0 | 1): (CalendarDate | null)[][];
+declare function generateCalendarDates(year: number, month: number, events?: CalendarEvent[], weekStartsOn?: 0 | 1): CalendarDate[][];
 declare function getPopupPositionClass(selectedDayIndex: number | null): string;
-declare function getCellClasses(calendarDate: CalendarDate | null): string[];
+declare function getCellClasses(calendarDate: CalendarDate): string[];
 declare function formatDateForDisplay(date: Date): string;
 declare function getMonthYearText(year: number, month: number): string;
 declare function formatTimeRange(event: CalendarEvent): string;
@@ -145,6 +162,14 @@ declare class CalendarEngine {
      * Jump to specific month and year
      */
     private jump;
+    /**
+     * Navigate to current month (today)
+     */
+    private goToToday;
+    /**
+     * Check if currently viewing today's month
+     */
+    private isCurrentMonth;
     /**
      * Select a specific date
      */
@@ -195,4 +220,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, MONTHS_FULL, type PopupPosition, formatAttendees, formatDateForDisplay, formatTimeRange, generateCalendarDates, generateYears, getCategoryColor, getCellClasses, getDefaultEventColor, getEventsForDate, getMonthYearText, getPopupPositionClass, hasEvents, isSameDay, isToday, isValidHexColor, mergeCategoryColors, normalizeDate, sortEventsByTime };

package/dist/core/index.js

@@ -24,6 +24,7 @@ __export(index_exports, {
   DAYS: () => DAYS,
   DEFAULT_CATEGORY_COLORS: () => DEFAULT_CATEGORY_COLORS,
   MONTHS: () => MONTHS,
+  MONTHS_FULL: () => MONTHS_FULL,
   formatAttendees: () => formatAttendees,
   formatDateForDisplay: () => formatDateForDisplay,
   formatTimeRange: () => formatTimeRange,
@@ -60,6 +61,20 @@ var MONTHS = [
   "Nov",
   "Dec"
 ];
+var MONTHS_FULL = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
 var DAYS = [
   "Sunday",
   "Monday",
@@ -98,19 +113,39 @@ function generateCalendarDates(year, month, events = [], weekStartsOn = 0) {
   const firstDay = new Date(year, month, 1);
   const lastDay = new Date(year, month + 1, 0);
   const daysInMonth = lastDay.getDate();
+  const prevMonthLastDay = new Date(year, month, 0).getDate();
   let firstDayOfWeek = firstDay.getDay();
   if (weekStartsOn === 1) {
     firstDayOfWeek = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1;
   }
   const dates = [];
   let day = 1;
+  let nextMonthDay = 1;
   for (let week = 0; week < 6; week++) {
     const weekDates = [];
     for (let dayOfWeek = 0; dayOfWeek < 7; dayOfWeek++) {
       if (week === 0 && dayOfWeek < firstDayOfWeek) {
-        weekDates.push(null);
+        const prevDay = prevMonthLastDay - firstDayOfWeek + dayOfWeek + 1;
+        const prevDate = new Date(year, month - 1, prevDay);
+        const dateEvents = getEventsForDate(events, prevDate);
+        weekDates.push({
+          date: prevDate,
+          isCurrentMonth: false,
+          isToday: isToday(prevDate),
+          hasEvents: dateEvents.length > 0,
+          events: dateEvents
+        });
       } else if (day > daysInMonth) {
-        weekDates.push(null);
+        const nextDate = new Date(year, month + 1, nextMonthDay);
+        const dateEvents = getEventsForDate(events, nextDate);
+        weekDates.push({
+          date: nextDate,
+          isCurrentMonth: false,
+          isToday: isToday(nextDate),
+          hasEvents: dateEvents.length > 0,
+          events: dateEvents
+        });
+        nextMonthDay++;
       } else {
         const currentDate = new Date(year, month, day);
         const dateEvents = getEventsForDate(events, currentDate);
@@ -125,9 +160,6 @@ function generateCalendarDates(year, month, events = [], weekStartsOn = 0) {
       }
     }
     dates.push(weekDates);
-    if (day > daysInMonth && weekDates.every((date) => date === null)) {
-      break;
-    }
   }
   return dates;
 }
@@ -142,8 +174,10 @@ function getPopupPositionClass(selectedDayIndex) {
   }
 }
 function getCellClasses(calendarDate) {
-  if (!calendarDate) return [];
   const classes = [];
+  if (!calendarDate.isCurrentMonth) {
+    classes.push("other-month");
+  }
   if (calendarDate.isToday) {
     classes.push("schedule--current--exam");
   }
@@ -156,7 +190,7 @@ function formatDateForDisplay(date) {
   return `${DAYS[date.getDay()]} ${date.getDate()}`;
 }
 function getMonthYearText(year, month) {
-  return `${MONTHS[month]} ${year}`;
+  return `${MONTHS_FULL[month]} ${year}`;
 }
 function formatTimeRange(event) {
   if (event.allDay || !event.startTime && !event.endTime) {
@@ -283,6 +317,8 @@ var CalendarEngine = class {
       next: this.next.bind(this),
       previous: this.previous.bind(this),
       jump: this.jump.bind(this),
+      goToToday: this.goToToday.bind(this),
+      isCurrentMonth: this.isCurrentMonth.bind(this),
       selectDate: this.selectDate.bind(this),
       updateTasks: this.updateTasks.bind(this)
     };
@@ -328,6 +364,25 @@ var CalendarEngine = class {
     this.updateTasks();
     this.notify();
   }
+  /**
+   * Navigate to current month (today)
+   */
+  goToToday() {
+    const today = /* @__PURE__ */ new Date();
+    this.state.currentYear = today.getFullYear();
+    this.state.currentMonth = today.getMonth();
+    this.state.selectedDate = null;
+    this.state.selectedDayIndex = null;
+    this.updateTasks();
+    this.notify();
+  }
+  /**
+   * Check if currently viewing today's month
+   */
+  isCurrentMonth() {
+    const today = /* @__PURE__ */ new Date();
+    return this.state.currentYear === today.getFullYear() && this.state.currentMonth === today.getMonth();
+  }
   /**
    * Select a specific date
    */
@@ -428,6 +483,7 @@ var CalendarEngine = class {
   DAYS,
   DEFAULT_CATEGORY_COLORS,
   MONTHS,
+  MONTHS_FULL,
   formatAttendees,
   formatDateForDisplay,
   formatTimeRange,