picocrank 1.19.0 → 1.20.0

package/package.json

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

package/vue/components/Calendar.vue

@@ -46,6 +46,8 @@ export interface CalendarProps {
   formatEventTime?: (event: CalendarEvent, date: Date) => string
   // Customization
   showNavigation?: boolean
+  /** When true, day titles show ordinal + full month name (e.g. "21st July") instead of the day number alone. */
+  shortMonthSuffix?: boolean
   currentMonth?: number
   currentYear?: number
 }
@@ -62,6 +64,7 @@ const props = withDefaults(defineProps<CalendarProps>(), {
   eventDragEnabled: true,
   eventMoveResponseTimeoutMs: 15000,
   showNavigation: true,
+  shortMonthSuffix: false,
 })
 
 const emit = defineEmits<{
@@ -646,8 +649,16 @@ watch([currentMonth, currentYear], () => {
           }"
         >
           <div class="day-content">
-            <div class="day-number clickable">
-              {{ day.date.getDate() }}<span class="day-month">{{ getOrdinalSuffix(day.date.getDate()) }} {{ monthNames[day.date.getMonth()].substring(0, 3) }}</span>
+            <div
+              class="day-number clickable"
+              :class="{ 'with-month-suffix': shortMonthSuffix }"
+            >
+              <template v-if="shortMonthSuffix">
+                {{ day.date.getDate() }}{{ getOrdinalSuffix(day.date.getDate()) }} {{ monthNames[day.date.getMonth()] }}
+              </template>
+              <template v-else>
+                {{ day.date.getDate() }}<span class="day-month">{{ getOrdinalSuffix(day.date.getDate()) }} {{ monthNames[day.date.getMonth()].substring(0, 3) }}</span>
+              </template>
             </div>
             <div class="day-events">
               <div
@@ -913,6 +924,13 @@ watch([currentMonth, currentYear], () => {
   font-size: small;
 }
 
+.day-number.with-month-suffix {
+  min-width: auto;
+  text-align: center;
+  font-size: 0.8rem;
+  white-space: nowrap;
+}
+
 .day-content:hover .day-number.clickable {
   color: #007bff;
 }

package/vue/views/CalendarExample.vue

@@ -4,6 +4,10 @@
 		padding
 	>
         <template #toolbar>
+            <label class="short-month-suffix-toggle">
+                <input type="checkbox" v-model="shortMonthSuffix" />
+                Short month suffix
+            </label>
             <button @click="goToToday">Today</button>
             <button @click="previousMonth">‹</button>
             <div class="date-picker-container">
@@ -23,6 +27,7 @@
 			:loading="loading"
 			:error="error"
 			:show-navigation="false"
+			:short-month-suffix="shortMonthSuffix"
 			:current-month="currentMonthIndex"
 			:current-year="currentYear"
 			@event-click="handleEventClick"
@@ -51,6 +56,7 @@ import {
 const events = ref([])
 const loading = ref(false)
 const error = ref(null)
+const shortMonthSuffix = ref(false)
 const currentMonth = ref('?')
 const currentMonthIndex = ref(new Date().getMonth())
 const currentYear = ref(new Date().getFullYear())
@@ -401,6 +407,15 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.short-month-suffix-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  user-select: none;
+}
+
 .date-picker-container {
   display: flex;
   align-items: center;