picocrank 1.3.1 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {

package/router.js

@@ -4,6 +4,7 @@ import { HomeIcon } from '@hugeicons/core-free-icons';
 import { TableIcon } from '@hugeicons/core-free-icons';
 import { ViewIcon } from '@hugeicons/core-free-icons';
 import { SecurityValidationIcon } from '@hugeicons/core-free-icons';
+import { CalendarIcon } from '@hugeicons/core-free-icons';
 
 const routes = [
   {
@@ -43,6 +44,16 @@ const routes = [
       title: 'Admin',
       icon: SecurityValidationIcon,
     }
+  },
+  {
+    name: 'CalendarExample',
+    path: '/calendar-example',
+    component: () => import('./vue/views/CalendarExample.vue'),
+    props: true,
+    meta: {
+      title: 'Calendar Example',
+      icon: CalendarIcon,
+    }
   }
 ];
 

package/vue/components/Calendar.vue

@@ -0,0 +1,632 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+export interface CalendarEvent {
+  id: string | number
+  title: string
+  startDate?: Date | string | null
+  endDate?: Date | string | null
+  date?: Date | string | null
+  [key: string]: any
+}
+
+export interface CalendarProps {
+  events: CalendarEvent[]
+  monthNames?: string[]
+  dayNames?: string[]
+  loading?: boolean
+  error?: string | null
+  // Formatter functions
+  getEventDate?: (event: CalendarEvent) => Date | null
+  getEventDateRange?: (event: CalendarEvent) => { start: Date | null; end: Date | null }
+  formatEventTime?: (event: CalendarEvent, date: Date) => string
+  // Customization
+  showNavigation?: boolean
+  currentMonth?: number
+  currentYear?: number
+}
+
+const props = withDefaults(defineProps<CalendarProps>(), {
+  section: false,
+  monthNames: () => [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+  ],
+  dayNames: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  loading: false,
+  error: null,
+  showNavigation: true,
+})
+
+const emit = defineEmits<{
+  'event-click': [event: CalendarEvent]
+  'date-click': [date: Date]
+  'month-change': [month: number, year: number]
+  'event-context-menu': [event: CalendarEvent, mouseEvent: MouseEvent]
+}>()
+
+// Internal calendar state
+const internalCurrentDate = ref(new Date())
+const currentDate = computed(() => {
+  if (props.currentMonth !== undefined && props.currentYear !== undefined) {
+    return new Date(props.currentYear, props.currentMonth, 1)
+  }
+  return internalCurrentDate.value
+})
+
+const currentMonth = computed(() => currentDate.value.getMonth())
+const currentYear = computed(() => currentDate.value.getFullYear())
+
+// Helper function to check if a time is midnight (00:00)
+function isMidnight(dateValue: any): boolean {
+  if (!dateValue) return false
+  const date = new Date(dateValue)
+  return date.getHours() === 0 && date.getMinutes() === 0
+}
+
+// Helper function to format time, returning "No time" if midnight
+function formatTimeOrNoTime(dateValue: any): string {
+  if (!dateValue) return 'No time'
+  if (isMidnight(dateValue)) return 'No time'
+  const date = new Date(dateValue)
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+// Get event date range
+function getEventDateRange(event: CalendarEvent): { start: Date | null; end: Date | null } {
+  if (props.getEventDateRange) {
+    return props.getEventDateRange(event)
+  }
+  
+  // Default implementation
+  let start: Date | null = null
+  let end: Date | null = null
+  
+  if (event.startDate) {
+    start = new Date(event.startDate)
+  } else if (event.date) {
+    start = new Date(event.date)
+  }
+  
+  if (event.endDate) {
+    end = new Date(event.endDate)
+  }
+  
+  return { start, end }
+}
+
+// Get events for a specific date
+function getEventsForDate(date: Date): CalendarEvent[] {
+  const targetDate = new Date(date)
+  targetDate.setHours(0, 0, 0, 0)
+
+  return props.events.filter(event => {
+    const { start, end } = getEventDateRange(event)
+    
+    if (!start) return false
+    
+    const startDateOnly = new Date(start)
+    startDateOnly.setHours(0, 0, 0, 0)
+    
+    if (end) {
+      const endDateOnly = new Date(end)
+      endDateOnly.setHours(0, 0, 0, 0)
+      return targetDate >= startDateOnly && targetDate <= endDateOnly
+    } else {
+      return targetDate.getTime() === startDateOnly.getTime()
+    }
+  })
+}
+
+// Check if an event is a multi-day event
+function isMultiDayEvent(event: CalendarEvent): boolean {
+  const { start, end } = getEventDateRange(event)
+  
+  if (!start || !end) return false
+
+  const startDate = new Date(start)
+  const endDate = new Date(end)
+
+  startDate.setHours(0, 0, 0, 0)
+  endDate.setHours(0, 0, 0, 0)
+
+  return startDate.getTime() !== endDate.getTime()
+}
+
+// Get the position of an event within a multi-day range for a specific date
+function getMultiDayPosition(event: CalendarEvent, date: Date): 'start' | 'middle' | 'end' | 'single' {
+  const { start, end } = getEventDateRange(event)
+  
+  if (!start || !end) return 'single'
+
+  const startDate = new Date(start)
+  const endDate = new Date(end)
+  const targetDate = new Date(date)
+
+  startDate.setHours(0, 0, 0, 0)
+  endDate.setHours(0, 0, 0, 0)
+  targetDate.setHours(0, 0, 0, 0)
+
+  if (startDate.getTime() === endDate.getTime()) return 'single'
+  if (targetDate.getTime() === startDate.getTime()) return 'start'
+  if (targetDate.getTime() === endDate.getTime()) return 'end'
+  if (targetDate > startDate && targetDate < endDate) return 'middle'
+
+  return 'single'
+}
+
+// Format event time based on position in multi-day event
+function formatEventTimeDefault(event: CalendarEvent, date: Date): string {
+  if (props.formatEventTime) {
+    return props.formatEventTime(event, date)
+  }
+  
+  const { start, end } = getEventDateRange(event)
+  const position = getMultiDayPosition(event, date)
+
+  if (!start || !end) return 'No time'
+
+  if (position === 'start') {
+    return formatTimeOrNoTime(start)
+  } else if (position === 'end') {
+    return formatTimeOrNoTime(end)
+  } else if (position === 'middle') {
+    return 'All day'
+  } else if (position === 'single') {
+    return formatTimeOrNoTime(start)
+  }
+
+  return 'All day'
+}
+
+// Calendar generation
+const calendarDays = computed(() => {
+  const year = currentYear.value
+  const month = currentMonth.value
+
+  const firstDay = new Date(year, month, 1)
+  const lastDay = new Date(year, month + 1, 0)
+  const daysInMonth = lastDay.getDate()
+
+  // Get starting day of week (Monday as first day)
+  const startDay = (firstDay.getDay() + 6) % 7
+
+  const days = []
+
+  // Add days from previous month to fill the first row
+  const prevMonth = month === 0 ? 11 : month - 1
+  const prevYear = month === 0 ? year - 1 : year
+  const prevMonthLastDay = new Date(prevYear, prevMonth + 1, 0).getDate()
+
+  for (let i = 0; i < startDay; i++) {
+    const day = prevMonthLastDay - startDay + i + 1
+    const date = new Date(prevYear, prevMonth, day)
+    days.push({
+      date,
+      events: getEventsForDate(date)
+    })
+  }
+
+  // Add days of the month
+  for (let day = 1; day <= daysInMonth; day++) {
+    const date = new Date(year, month, day)
+    days.push({
+      date,
+      events: getEventsForDate(date)
+    })
+  }
+
+  // Add days from next month to complete the last row
+  const totalCells = 42
+  const remainingCells = totalCells - days.length
+
+  for (let day = 1; day <= remainingCells; day++) {
+    const date = new Date(year, month + 1, day)
+    days.push({
+      date,
+      events: getEventsForDate(date)
+    })
+  }
+
+  return days
+})
+
+// Navigation functions
+function previousMonth() {
+  if (props.currentMonth !== undefined && props.currentYear !== undefined) {
+    const newMonth = currentMonth.value === 0 ? 11 : currentMonth.value - 1
+    const newYear = currentMonth.value === 0 ? currentYear.value - 1 : currentYear.value
+    emit('month-change', newMonth, newYear)
+  } else {
+    internalCurrentDate.value = new Date(currentYear.value, currentMonth.value - 1, 1)
+  }
+}
+
+function nextMonth() {
+  if (props.currentMonth !== undefined && props.currentYear !== undefined) {
+    const newMonth = currentMonth.value === 11 ? 0 : currentMonth.value + 1
+    const newYear = currentMonth.value === 11 ? currentYear.value + 1 : currentYear.value
+    emit('month-change', newMonth, newYear)
+  } else {
+    internalCurrentDate.value = new Date(currentYear.value, currentMonth.value + 1, 1)
+  }
+}
+
+function goToToday() {
+  if (props.currentMonth !== undefined && props.currentYear !== undefined) {
+    const today = new Date()
+    emit('month-change', today.getMonth(), today.getFullYear())
+  } else {
+    internalCurrentDate.value = new Date()
+  }
+}
+
+// Event handlers
+function handleEventClick(event: CalendarEvent) {
+  emit('event-click', event)
+}
+
+function handleDateClick(date: Date) {
+  emit('date-click', date)
+}
+
+function handleContextMenu(event: CalendarEvent, mouseEvent: MouseEvent) {
+  mouseEvent.preventDefault()
+  mouseEvent.stopPropagation()
+  emit('event-context-menu', event, mouseEvent)
+}
+</script>
+
+<template>
+  <div class="calendar-wrapper">
+    <div v-if="showNavigation" class="calendar-header-nav">
+      <h2 class="calendar-title">{{ monthNames[currentMonth] }} {{ currentYear }}</h2>
+      <div class="calendar-nav-buttons">
+        <slot name="nav-buttons">
+          <button @click="previousMonth" class="button neutral">‹</button>
+          <button @click="goToToday" class="button neutral">Today</button>
+          <button @click="nextMonth" class="button neutral">›</button>
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="error" class="calendar-error">{{ error }}</div>
+    <div v-else-if="loading" class="calendar-loading">Loading…</div>
+    <div v-else class="calendar-container">
+      <div class="calendar-grid">
+        <!-- Day headers -->
+        <div v-for="day in dayNames" :key="day" class="day-header">{{ day }}</div>
+
+        <!-- Calendar days -->
+        <div
+          v-for="(day, index) in calendarDays"
+          :key="index"
+          class="calendar-day"
+          :class="{
+            'today': day && day.date.toDateString() === new Date().toDateString(),
+            'weekend': day && (day.date.getDay() === 0 || day.date.getDay() === 6),
+            'prev-month': day && day.date.getMonth() !== currentMonth && day.date.getMonth() !== (currentMonth + 1) % 12,
+            'next-month': day && day.date.getMonth() !== currentMonth && day.date.getMonth() === (currentMonth + 1) % 12
+          }"
+        >
+          <div v-if="day" class="day-content" @click="handleDateClick(day.date)">
+            <div class="day-number clickable">
+              {{ day.date.getDate() }}
+            </div>
+            <div class="day-events">
+              <div
+                v-for="event in day.events.sort((a, b) => {
+                  const aMultiDay = isMultiDayEvent(a);
+                  const bMultiDay = isMultiDayEvent(b);
+                  if (aMultiDay && !bMultiDay) return -1;
+                  if (!aMultiDay && bMultiDay) return 1;
+                  return 0;
+                }).slice(0, 3)"
+                :key="event.id"
+                class="calendar-event"
+                :class="{
+                  'multi-day': isMultiDayEvent(event),
+                  'multi-day-start': isMultiDayEvent(event) && getMultiDayPosition(event, day.date) === 'start',
+                  'multi-day-middle': isMultiDayEvent(event) && getMultiDayPosition(event, day.date) === 'middle',
+                  'multi-day-end': isMultiDayEvent(event) && getMultiDayPosition(event, day.date) === 'end'
+                }"
+                @click.stop="handleEventClick(event)"
+                @contextmenu.stop="handleContextMenu(event, $event)"
+              >
+                <slot name="event" :event="event" :date="day.date" :position="getMultiDayPosition(event, day.date)">
+                  <div class="event-content">
+                    <div class="event-title">
+                      {{ event.title }}
+                      <span v-if="isMultiDayEvent(event)" class="multi-day-indicator">
+                        {{ getMultiDayPosition(event, day.date) === 'start' ? '▶' :
+                           getMultiDayPosition(event, day.date) === 'end' ? '◀' :
+                           getMultiDayPosition(event, day.date) === 'middle' ? '▬' : '' }}
+                      </span>
+                    </div>
+                    <div class="event-time">
+                      {{ formatEventTimeDefault(event, day.date) }}
+                    </div>
+                  </div>
+                </slot>
+              </div>
+              <div v-if="day.events.length > 3" class="more-events">
+                +{{ day.events.length - 3 }} more
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.calendar-wrapper {
+  width: 100%;
+}
+
+.calendar-header-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+.calendar-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.calendar-nav-buttons {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.calendar-error {
+  color: #b00020;
+  padding: 1rem;
+}
+
+.calendar-loading {
+  padding: 1rem;
+  text-align: center;
+}
+
+.calendar-container {
+  background: white;
+  border: 1px solid #e0e0e0;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  min-height: 400px;
+}
+
+.day-header {
+  padding: 1rem;
+  text-align: center;
+  font-weight: 600;
+  color: #666;
+  border-right: 1px solid #e0e0e0;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f8f9fa;
+}
+
+.day-header:last-child {
+  border-right: none;
+}
+
+.calendar-day {
+  border-right: 1px solid #e0e0e0;
+  border-bottom: 1px solid #e0e0e0;
+  min-height: 120px;
+  position: relative;
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+}
+
+.calendar-day:hover {
+  background-color: #f0f8ff;
+}
+
+.calendar-day:nth-child(7n) {
+  border-right: none;
+}
+
+.calendar-day.weekend {
+  background: #f8f9fa;
+}
+
+.calendar-day.weekend:hover {
+  background: #e9ecef;
+}
+
+.calendar-day.next-month,
+.calendar-day.prev-month {
+  background: #f8f9fa;
+  opacity: 0.6;
+}
+
+.calendar-day.next-month:hover,
+.calendar-day.prev-month:hover {
+  background: #e9ecef;
+  opacity: 0.8;
+}
+
+.calendar-day.today {
+  background: #f7f8d7;
+  font-weight: bold;
+}
+
+.calendar-day.today:hover {
+  background: #bbdefb;
+}
+
+
+.day-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.day-number {
+  font-size: 0.9rem;
+  margin-bottom: 0.25rem;
+  color: #333;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0.1rem;
+  border-radius: 4px;
+  transition: all 0.2s;
+  min-width: 1.5rem;
+  text-align: center;
+}
+
+.day-number.clickable {
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.day-content:hover .day-number.clickable {
+  color: #007bff;
+}
+
+.day-events {
+  flex: 1;
+  overflow: hidden;
+}
+
+.calendar-event {
+  background: #d6f1aa;
+  border: 1px solid #c4db96;
+  margin-bottom: 0.25rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  padding: 0.1rem 0.1rem;
+}
+
+.calendar-event:hover {
+  background: #b3de6e;
+  border-color: #c4db96;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+.calendar-event.multi-day-start {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.calendar-event.multi-day-middle {
+  border-radius: 0;
+}
+
+.calendar-event.multi-day-end {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.event-content {
+  cursor: pointer;
+}
+
+.event-title {
+  font-weight: bold;
+  font-size: 0.85rem;
+  color: #333;
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.multi-day-indicator {
+  font-size: 0.7rem;
+  color: #007bff;
+  font-weight: bold;
+}
+
+.event-time {
+  font-size: 0.75rem;
+  color: #666;
+  margin-top: 0.125rem;
+}
+
+.more-events {
+  font-size: 0.75rem;
+  color: #666;
+  text-align: center;
+  padding: 0.25rem;
+  background: #f8f9fa;
+  border-radius: 4px;
+  margin-top: 0.25rem;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .calendar-header-nav {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .calendar-title {
+    font-size: 1.2rem;
+  }
+
+  .calendar-day {
+    min-height: 80px;
+  }
+
+  .day-number {
+    font-size: 1rem;
+  }
+
+  .event-title {
+    font-size: 0.8rem;
+  }
+
+  .event-time {
+    font-size: 0.7rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .calendar-grid {
+    min-height: 300px;
+  }
+
+  .calendar-day {
+    min-height: 60px;
+  }
+
+  .day-header {
+    padding: 0.5rem 0.25rem;
+    font-size: 0.8rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .day-content {
+    padding: 0.45rem;
+  }
+
+  .calendar-event {
+    border-radius: 4px;
+    padding: 0.25rem 0.5rem;
+  }
+}
+</style>
+

package/vue/components/Header.vue

@@ -17,9 +17,11 @@
 		
 		<div class = "fg1"></div>
 
-		<div class = "user-info">
-			<span v-if="username">{{ username }}</span>
-		</div>
+		<slot name = "user-info">
+			<div class = "user-info">
+				<span v-if="username">{{ username }}</span>
+			</div>
+		</slot>
 	</header>
 </template>
 

package/vue/components/Sidebar.vue

@@ -18,7 +18,12 @@
 					<li v-for="link in navigationLinks" :key="link.name" :title="link.title">
 						<!-- Render separator if link is a separator -->
 						<div v-if="link.type === 'separator'" class="separator"></div>
-						<!-- Render regular link if not a separator -->
+						<div v-else-if="link.type === 'callback'">
+							<a href="#" @click.prevent="link.callback()">
+								<HugeiconsIcon :icon="link.icon" />
+								<span>{{ link.title }}</span>
+							</a>
+						</div>
 						<router-link v-else :to="link.path" :class="{ active: isActive(link.path) }">
 							<HugeiconsIcon :icon="link.icon" />
 							<span>{{ link.title }}</span>
@@ -68,6 +73,18 @@ function addNavigationLink(link) {
   }
 }
 
+function addCallback(title, callback, options = {}) {
+  const callbackLink = {
+	name: options.name || title.toLowerCase().replace(/\s+/g, '-'),
+	type: 'callback',
+	icon: options.icon || PinIcon,
+	callback: callback || (() => {}),
+	title: title
+  }
+
+  addNavigationLink(callbackLink)
+}
+
 function addSeparator(id) {
   const separator = {
     name: id || `nav-separator-${Date.now()}`,
@@ -131,6 +148,7 @@ defineExpose({
   isActive,
   addNavigationLink,
   addRouterLink,
+  addCallback,
   addSeparator,
   removeNavigationLink,
   clearNavigationLinks,

package/vue/views/App.vue

@@ -28,6 +28,7 @@
 <script setup>
 	import { ref, onMounted } from 'vue';
 	import { useRouter } from 'vue-router';
+	import { Pin02Icon } from '@hugeicons/core-free-icons'
 
 	import QuickSearch from './../components/QuickSearch.vue'
 
@@ -44,9 +45,12 @@
 	onMounted(() => {
 		sidebar.value.addRouterLink('Welcome')
 		sidebar.value.addRouterLink('TableExample')
+		sidebar.value.addRouterLink('CalendarExample')
 		sidebar.value.addSeparator('separator-1');
 		sidebar.value.addRouterLink('ViewItem', { id: 1 })
 		sidebar.value.addSeparator('separator-2');
+		sidebar.value.addCallback('Hello World', helloWorld, { icon: Pin02Icon })
+		sidebar.value.addSeparator('separator-3');
 		sidebar.value.addRouterLink('Admin')
 		sidebar.value.open();
 		sidebar.value.stick();

package/vue/views/CalendarExample.vue

@@ -0,0 +1,328 @@
+<template>
+	<Section 
+		title="Example Calendar" 
+		padding
+	>
+        <template #toolbar>
+            <button @click="goToToday">Today</button>
+            <button @click="previousMonth">‹</button>
+            <div class="date-picker-container">
+                <input 
+                    id="goto-date"
+                    type="month" 
+                    v-model="selectedDate"
+                    @change="goToSelectedDate"
+                    class="date-picker-input"
+                />
+            </div>
+            <button @click="nextMonth">›</button>
+        </template>
+		<Calendar 
+            :section="true"
+			:events="events"
+			:loading="loading"
+			:error="error"
+			:show-navigation="false"
+			:current-month="currentMonthIndex"
+			:current-year="currentYear"
+			@event-click="handleEventClick"
+			@date-click="handleDateClick"
+			@month-change="handleMonthChange"
+		/>
+	</Section>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import Calendar from '../components/Calendar.vue'
+import Section from '../components/Section.vue'
+
+const events = ref([])
+const loading = ref(false)
+const error = ref(null)
+const currentMonth = ref('?')
+const currentMonthIndex = ref(new Date().getMonth())
+const currentYear = ref(new Date().getFullYear())
+
+// Date picker state - using native HTML5 month input
+const selectedDate = ref('')
+
+// Generate dummy events for the current month
+function generateDummyEvents() {
+	const now = new Date()
+	const currentMonth = now.getMonth()
+	const currentYear = now.getFullYear()
+	
+	// Get the number of days in the current month
+	const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate()
+	
+	const dummyEvents = []
+	
+	// Add some recurring events
+	for (let day = 1; day <= daysInMonth; day++) {
+		const date = new Date(currentYear, currentMonth, day)
+		const dayOfWeek = date.getDay()
+		
+		// Add weekend events (Saturday and Sunday)
+		if (dayOfWeek === 0 || dayOfWeek === 6) {
+			dummyEvents.push({
+				id: `weekend-${day}`,
+				title: 'Weekend Activity',
+				date: new Date(currentYear, currentMonth, day, 10, 0),
+				description: 'Relaxing weekend activity'
+			})
+		}
+		
+		// Add some random events
+		if (Math.random() > 0.7) {
+			const eventTypes = [
+				{ title: 'Team Meeting', time: [9, 0], duration: 1 },
+				{ title: 'Client Call', time: [14, 30], duration: 0.5 },
+				{ title: 'Project Review', time: [16, 0], duration: 2 },
+				{ title: 'Lunch Break', time: [12, 0], duration: 1 },
+				{ title: 'Code Review', time: [10, 0], duration: 1.5 }
+			]
+			
+			const eventType = eventTypes[Math.floor(Math.random() * eventTypes.length)]
+			const [hours, minutes] = eventType.time
+			
+			dummyEvents.push({
+				id: `event-${day}-${Math.random().toString(36).substr(2, 9)}`,
+				title: eventType.title,
+				date: new Date(currentYear, currentMonth, day, hours, minutes),
+				description: `Scheduled ${eventType.title.toLowerCase()}`
+			})
+		}
+	}
+	
+	// Add some multi-day events
+	dummyEvents.push({
+		id: 'conference-1',
+		title: 'Tech Conference',
+		startDate: new Date(currentYear, currentMonth, 5, 9, 0),
+		endDate: new Date(currentYear, currentMonth, 7, 17, 0),
+		description: 'Annual technology conference'
+	})
+	
+	dummyEvents.push({
+		id: 'vacation-1',
+		title: 'Vacation',
+		startDate: new Date(currentYear, currentMonth, 15, 0, 0),
+		endDate: new Date(currentYear, currentMonth, 18, 23, 59),
+		description: 'Family vacation time'
+	})
+	
+	// Add some all-day events
+	dummyEvents.push({
+		id: 'holiday-1',
+		title: 'Public Holiday',
+		date: new Date(currentYear, currentMonth, 1, 0, 0),
+		description: 'National holiday - office closed'
+	})
+	
+	if (daysInMonth >= 25) {
+		dummyEvents.push({
+			id: 'deadline-1',
+			title: 'Project Deadline',
+			date: new Date(currentYear, currentMonth, 25, 0, 0),
+			description: 'Important project deadline'
+		})
+	}
+	
+	return dummyEvents
+}
+
+function handleEventClick(event) {
+	console.log('Event clicked:', event)
+	alert(`Event: ${event.title}\nDescription: ${event.description || 'No description'}`)
+}
+
+function handleDateClick(date) {
+	console.log('Date clicked:', date)
+	alert(`Date selected: ${date.toLocaleDateString()}`)
+}
+
+// Helper function to update the date picker value
+function updateDatePicker(monthIndex, year) {
+	const month = String(monthIndex + 1).padStart(2, '0')
+	selectedDate.value = `${year}-${month}`
+}
+
+// Navigation functions - using the same fast path as internal calendar navigation
+function previousMonth() {
+	const newMonth = currentMonthIndex.value === 0 ? 11 : currentMonthIndex.value - 1
+	const newYear = currentMonthIndex.value === 0 ? currentYear.value - 1 : currentYear.value
+	
+	// Update state directly (fast path)
+	currentMonthIndex.value = newMonth
+	currentYear.value = newYear
+	
+	// Update title
+	const date = new Date(newYear, newMonth, 1)
+	currentMonth.value = date.toLocaleDateString('en-US', { 
+		month: 'long', 
+		year: 'numeric' 
+	})
+	
+	// Update date picker
+	updateDatePicker(newMonth, newYear)
+}
+
+function nextMonth() {
+	const newMonth = currentMonthIndex.value === 11 ? 0 : currentMonthIndex.value + 1
+	const newYear = currentMonthIndex.value === 11 ? currentYear.value + 1 : currentYear.value
+	
+	// Update state directly (fast path)
+	currentMonthIndex.value = newMonth
+	currentYear.value = newYear
+	
+	// Update title
+	const date = new Date(newYear, newMonth, 1)
+	currentMonth.value = date.toLocaleDateString('en-US', { 
+		month: 'long', 
+		year: 'numeric' 
+	})
+	
+	// Update date picker
+	updateDatePicker(newMonth, newYear)
+}
+
+function goToToday() {
+	const now = new Date()
+	const newMonth = now.getMonth()
+	const newYear = now.getFullYear()
+	
+	// Update state directly (fast path)
+	currentMonthIndex.value = newMonth
+	currentYear.value = newYear
+	
+	// Update title
+	currentMonth.value = now.toLocaleDateString('en-US', { 
+		month: 'long', 
+		year: 'numeric' 
+	})
+	
+	// Update date picker
+	updateDatePicker(newMonth, newYear)
+}
+
+function goToSelectedDate() {
+	if (!selectedDate.value) return
+	
+	// Parse the YYYY-MM format from the native date picker
+	const [year, month] = selectedDate.value.split('-').map(Number)
+	const monthIndex = month - 1 // Convert to 0-based month index
+	
+	// Update state directly (fast path)
+	currentMonthIndex.value = monthIndex
+	currentYear.value = year
+	
+	// Update title
+	const date = new Date(year, monthIndex, 1)
+	currentMonth.value = date.toLocaleDateString('en-US', { 
+		month: 'long', 
+		year: 'numeric' 
+	})
+}
+
+function handleMonthChange(month, year) {
+	console.log('Month changed:', month, year)
+	// In a real app, you might fetch events for the new month
+	loading.value = true
+	
+	// Update current month and year state
+	currentMonthIndex.value = month
+	currentYear.value = year
+	
+	// Use native JavaScript to format month and year
+	const date = new Date(year, month, 1)
+	currentMonth.value = date.toLocaleDateString('en-US', { 
+		month: 'long', 
+		year: 'numeric' 
+	})
+	
+	// Update date picker to reflect the new month
+	updateDatePicker(month, year)
+	
+	setTimeout(() => {
+		// Simulate loading delay
+		events.value = generateDummyEvents()
+		loading.value = false
+	}, 500)
+}
+
+onMounted(() => {
+	// Generate initial events for current month
+	events.value = generateDummyEvents()
+	
+	// Set initial month title using native JavaScript
+	const now = new Date()
+	currentMonthIndex.value = now.getMonth()
+	currentYear.value = now.getFullYear()
+	currentMonth.value = now.toLocaleDateString('en-US', { 
+		month: 'long', 
+		year: 'numeric' 
+	})
+	
+	// Initialize the native date picker with current month/year
+	const year = now.getFullYear()
+	const month = String(now.getMonth() + 1).padStart(2, '0')
+	selectedDate.value = `${year}-${month}`
+})
+</script>
+
+<style scoped>
+.date-picker-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.date-picker-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.date-picker-input {
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  background: white;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.date-picker-input:hover {
+  border-color: #9ca3af;
+}
+
+.date-picker-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  .date-picker-label {
+    color: #d1d5db;
+  }
+  
+  .date-picker-input {
+    background: #374151;
+    border-color: #4b5563;
+    color: #f9fafb;
+  }
+  
+  .date-picker-input:hover {
+    border-color: #6b7280;
+  }
+  
+  .date-picker-input:focus {
+    border-color: #60a5fa;
+    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
+  }
+}
+</style>