frappe-ui 1.0.0-beta.55 → 1.0.0-beta.56

package/experimental/Calendar/Calendar.cy.ts

@@ -13,6 +13,16 @@ function monthYear(offsetDays = 0) {
 
 const today = monthYear()
 
+/**
+ * A weekday (0 = Sunday) of the current week. Weeks run Sunday to Saturday,
+ * so a span over Monday to Wednesday sits inside one week row whatever day
+ * the suite runs on; the month grid pads with neighbouring months, so it
+ * shows those days whichever month they fall in.
+ */
+function thisWeek(weekday: number) {
+  return monthYear(weekday - new Date().getDay())
+}
+
 const events: CalendarEvent[] = [
   {
     id: 'EV-001',
@@ -40,6 +50,10 @@ const events: CalendarEvent[] = [
 ]
 
 describe('Calendar', () => {
+  // Below the `sm` breakpoint the Month view stacks days instead of drawing
+  // week rows; the desktop specs want the rows.
+  beforeEach(() => cy.viewport(1024, 768))
+
   // Behavior 1: renders with default props
   it('renders the month view with the default header', () => {
     cy.mount(Calendar, { props: { events: [] } })
@@ -75,6 +89,134 @@ describe('Calendar', () => {
     cy.contains('Design review').should('not.exist')
   })
 
+  it('draws a multi-day event as one bar in the month view', () => {
+    cy.mount(Calendar, {
+      props: {
+        events: [
+          {
+            id: 'EV-STAY',
+            title: 'Offsite',
+            fromDate: thisWeek(1),
+            toDate: thisWeek(3),
+            isFullDay: true,
+            color: 'cyan',
+          },
+        ],
+      },
+    })
+
+    // One bar across the stay's three days, never a copy per day.
+    cy.get('.event')
+      .filter(':contains("Offsite")')
+      .should('have.length', 1)
+      .then(($bar) => {
+        const cell = $bar.closest('[data-week-row]')
+        const cellWidth = cell.width()! / 7
+        expect($bar.width()!).to.be.greaterThan(cellWidth * 1.5)
+      })
+  })
+
+  it('sizes a month row to its day and shows every event in it', () => {
+    const titles = [
+      'Standup',
+      'Design review',
+      'Interview',
+      'Team lunch',
+      'Retro',
+    ]
+    cy.mount(Calendar, {
+      props: {
+        events: titles.map((title, i) => ({
+          id: `EV-${i}`,
+          title,
+          fromDate: today,
+          toDate: today,
+          fromTime: `${9 + i}:00`,
+          toTime: `${10 + i}:00`,
+        })),
+      },
+    })
+
+    // Five events on one day: all five rendered, nothing folded behind a
+    // count.
+    for (const title of titles)
+      cy.contains('.event', title).should('be.visible')
+    cy.contains('more').should('not.exist')
+  })
+
+  it('names the month on its first day', () => {
+    // Pinned mid-month: today's own number is a bare pill, so on the 1st the
+    // label would not be there to find.
+    cy.clock(new Date(2026, 7, 15), ['Date'])
+    cy.mount(Calendar, { props: { events: [] } })
+
+    cy.get('[data-strip-date]').first().contains('Aug 1').should('exist')
+  })
+
+  it('stacks the days on a narrow screen', () => {
+    cy.viewport(390, 800)
+    cy.mount(Calendar, {
+      props: {
+        events: [
+          {
+            id: 'EV-STAY',
+            title: 'Offsite',
+            fromDate: thisWeek(1),
+            toDate: thisWeek(3),
+            isFullDay: true,
+          },
+        ],
+      },
+    })
+
+    // No week-row grid; a row per day, with a stay saying which day it is on.
+    cy.get('[data-week-row]').should('not.exist')
+    cy.contains('.event', 'Offsite').should('have.length.at.least', 1)
+    cy.contains('Day 1 of 3').should('exist')
+  })
+
+  it('puts a multi-day event in the all-day row and splits an overnight one', () => {
+    cy.mount(Calendar, {
+      props: {
+        events: [
+          {
+            id: 'EV-STAY',
+            title: 'Offsite',
+            fromDate: thisWeek(1),
+            toDate: thisWeek(2),
+            isFullDay: true,
+            color: 'cyan',
+          },
+          {
+            id: 'EV-NIGHT',
+            title: 'Release night',
+            fromDate: thisWeek(1),
+            toDate: thisWeek(2),
+            fromTime: '22:00',
+            toTime: '02:00',
+            color: 'violet',
+          },
+        ],
+        config: { defaultMode: 'Week' },
+      },
+    })
+
+    // The all-day row holds the stay as a bar spanning its days.
+    cy.get('[data-day-columns]')
+      .first()
+      .within(() => {
+        cy.contains('.event', 'Offsite').should('exist')
+      })
+    // The overnight event shows once per day in the time grid, each piece
+    // still labelled with the whole event's times.
+    cy.get('[data-time-grid] .event')
+      .filter(':contains("Release night")')
+      .should('have.length', 2)
+      .each(($piece) => {
+        expect($piece.text()).to.contain('10 pm - 2 am')
+      })
+  })
+
   it('emits rangeChange with the visible range on mount', () => {
     cy.mount(Calendar, {
       props: { events: [], onRangeChange: cy.spy().as('onRangeChange') },
@@ -122,6 +264,26 @@ describe('Calendar', () => {
     cy.contains('All day').should('not.exist')
   })
 
+  // Anything layered over the calendar owns the keyboard. The shortcuts are bare
+  // letters, so without this they reached straight through an open dialog and
+  // switched the view behind it.
+  it('ignores shortcuts while an overlay is open', () => {
+    cy.mount(Calendar, { props: { events: [] } })
+
+    // The month/year button is the header's first control; its picker is a dialog.
+    cy.get('button').first().click()
+    cy.get('[role=dialog]').should('exist')
+
+    cy.get('body').type('w')
+    cy.contains('All day').should('not.exist')
+
+    // Closed again, the same key does what it always did.
+    cy.get('body').type('{esc}')
+    cy.get('[role=dialog]').should('not.exist')
+    cy.get('body').type('w')
+    cy.contains('All day').should('exist')
+  })
+
   // Behavior 5: every documented slot renders
   it('renders the #header slot with its props', () => {
     cy.mount(Calendar, {

package/experimental/Calendar/Calendar.md

@@ -45,6 +45,16 @@ Each entry in `events` is a `CalendarEvent`:
 }
 ```
 
+An event runs from `fromDate fromTime` to `toDate toTime`, dates inclusive.
+One whose `toDate` is later than its `fromDate` spans those days: the Month
+view draws it as a single bar across them, and the Week view puts it in the
+all-day row. A timed event that crosses midnight but is shorter than a day
+(an evening running late) stays in the time grid, cut at midnight into a
+piece per day. A timed event ending at `00:00` stops as that day begins, so
+it does not occupy it. Dragging a spanning event moves both ends together.
+
+`isFullDay` events ignore their times and cover `fromDate`..`toDate` whole.
+
 The calendar keeps an internal copy of `events` and refreshes it when the
 prop changes. Edits made inside the calendar (create, drag, resize, delete)
 mutate the copy and come back through the `create`, `update`, and `delete`
@@ -54,6 +64,25 @@ emits — persist them and refresh your source of truth from there.
 `cyan`, `blue`, `orange`, `green`) with the CSS variables used per state, for
 building matching UI such as a color picker.
 
+## Month view
+
+The Month view is a strip of week rows covering the month in view, and it
+scrolls when the rows outgrow the calendar's height. The arrows, Today, and
+the month picker move the month and scroll the strip to their date.
+
+Each row is as tall as its busiest day needs. Multi-day events run as bars
+across the top of the row; single-day events sit beneath them in their
+cells with the title wrapping to a second line, so every event is shown —
+there is no "n more".
+
+Below the `sm` breakpoint the days stack instead: a row per day, a heading
+where each month begins, and a week strip above to keep your place. Clicking a date number in either layout
+opens that day in the Day view.
+
+`rangeChange` reports the strip's full extent for the Month view — the
+padding days of the first and last weeks included — so a data source that
+fetches by range has events for every cell.
+
 ## Config
 
 The `config` prop takes a partial `CalendarConfig`; unset keys use these
@@ -83,6 +112,9 @@ With `enableShortcuts` on: `m` / `w` / `d` switch views, `t` jumps to today,
 `←` / `→` navigate, and `Delete` removes the event whose popover is open
 (edit mode only).
 
+They stay out of the way of whatever is on top: nothing fires while a field has
+focus, or while a dialog, popover, menu or select is open anywhere on the page.
+
 ## Click handling
 
 By default, a single click on an event opens its detail popover and a double

package/experimental/Calendar/Calendar.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="flex h-full flex-col overflow-hidden">
+  <!-- No overflow-hidden here: each view scrolls itself, and clipping at the
+       root only cut the focus outline off the header's buttons. -->
+  <div class="flex h-full flex-col">
     <slot
       name="header"
       v-bind="{
@@ -67,9 +69,10 @@
       v-if="activeView === 'Month'"
       :events="events"
       :currentMonth="currentMonth"
-      :currentMonthDates="currentMonthDates"
+      :currentYear="currentYear"
+      :currentDate="selectedDay"
+      :jumpDate="currentDate"
       :config="overrideConfig"
-      @setCurrentDate="(d) => updateCurrentDate(d)"
     >
       <template #event-popover-content="slotProps">
         <slot name="event-popover-content" v-bind="slotProps" />
@@ -142,6 +145,8 @@ import CalendarDaily from './CalendarDaily.vue'
 import NewEventModal from './NewEventModal.vue'
 import useEventModal from './composables/useEventModal'
 import { isAnyPopoverOpen } from './useEventBase'
+import { stripPlacement } from './eventSpan'
+import { stripRange } from './monthStrip'
 import {
   ACTIVE_VIEW_KEY,
   CALENDAR_ACTIONS_KEY,
@@ -227,6 +232,27 @@ function syncSelectedMonth(year: number, month: number) {
   }
 }
 
+// Anything layered over the calendar owns the keyboard while it is up — a modal,
+// a dropdown, an event's own popover, the header's month picker. The shortcuts are
+// bare letters, so a press meant for the thing on top switched the view behind it,
+// and an arrow key moved the month under an open picker.
+//
+// Asked of the document rather than of the event's ancestors: an overlay is
+// portalled to <body>, a sibling of the calendar rather than a descendant, and a
+// press with nothing focused reports <body> itself as the target — `closest()`
+// from there would see neither.
+//
+// By role, which is what tells an overlay apart from the rest of the page: reka
+// gives dialogs and popovers `dialog`, menus `menu`, selects `listbox`, and each
+// is in the DOM only while open. Tooltips are `tooltip` and so are left out — one
+// showing under the pointer is not something the keyboard is talking to.
+const OVERLAY_SELECTOR =
+  '[role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"]'
+
+function isOverlayOpen() {
+  return !!document.querySelector(OVERLAY_SELECTOR)
+}
+
 // shortcuts for changing the active view and navigating through the calendar
 onMounted(() => {
   if (!overrideConfig.enableShortcuts) return
@@ -236,6 +262,8 @@ onUnmounted(() => {
   window.removeEventListener('keydown', handleShortcuts)
 })
 function handleShortcuts(e: KeyboardEvent) {
+  if (isOverlayOpen()) return
+
   const target = e.target as HTMLElement | null
   if (
     target?.tagName === 'INPUT' ||
@@ -274,28 +302,31 @@ watch(activeView, (value) => {
   }
 })
 
-const parseEvents = computed(() => {
+/**
+ * A fresh internal copy of the events prop. A function rather than a computed
+ * on purpose: the views edit the copy in place (a drag shifts its dates), and
+ * `reloadEvents` must hand back the prop's values, not the edited objects a
+ * cached computed would return again.
+ */
+function parseEvents(): CalendarEvent[] {
   return (
     props.events?.map((event) => {
       const { fromDate, toDate, fromTime, toTime, ...rest } = event
-      const date = fromDate
-      const fromDateTime = fromDate + ' ' + fromTime
-      const toDateTime = toDate + ' ' + toTime
-
+      const timed = !!(fromTime && toTime)
       return {
         ...rest,
-        date,
-        fromDateTime,
-        toDateTime,
+        date: fromDate,
+        fromDateTime: fromDate + ' ' + fromTime,
+        toDateTime: toDate + ' ' + toTime,
         fromDate,
         toDate,
-        fromTime,
-        toTime,
+        fromTime: timed ? handleSeconds(fromTime) : fromTime,
+        toTime: timed ? handleSeconds(toTime) : toTime,
       }
     }) || []
   )
-})
-const events = ref<CalendarEvent[]>(parseEvents.value)
+}
+const events = ref<CalendarEvent[]>(parseEvents())
 
 watch(
   () => props.events,
@@ -304,16 +335,9 @@ watch(
 )
 
 function reloadEvents() {
-  events.value = parseEvents.value
+  events.value = parseEvents()
 }
 
-events.value.forEach((event) => {
-  if (!event.fromTime || !event.toTime) return
-
-  event.fromTime = handleSeconds(event.fromTime)
-  event.toTime = handleSeconds(event.toTime)
-})
-
 const { showEventModal, newEvent, openNewEventModal } = useEventModal()
 
 provide(CALENDAR_ACTIONS_KEY, {
@@ -322,6 +346,7 @@ provide(CALENDAR_ACTIONS_KEY, {
   deleteEvent,
   handleCellClick,
   updateActiveView,
+  setCalendarDate,
   props,
 })
 
@@ -334,6 +359,8 @@ function createNewEvent(event: CalendarEvent) {
 }
 
 function updateEventState(event: CalendarEvent) {
+  // A view may hand back one day's piece of the event; store the whole one.
+  event = stripPlacement(event)
   const eventID = event.id
   let eventIndex = events.value.findIndex((e) => e.id === eventID)
   event.fromDateTime = event.fromDate + ' ' + event.fromTime
@@ -466,12 +493,6 @@ watch(currentDay, (newVal) => {
   setCalendarDate(target)
 })
 
-function updateCurrentDate(d: Date) {
-  activeView.value = 'Day'
-  date.value = findIndexOfDate(d)
-  week.value = findCurrentWeek(d)
-}
-
 function increment() {
   incrementClickEvents[activeView.value]()
   syncSelectedMonth(currentYear.value, currentMonth.value)
@@ -488,8 +509,17 @@ const incrementClickEvents: Record<CalendarMode, () => void> = {
   Day: incrementDay,
 }
 
+// decrementMonth lands on the month's last day, which is right for stepping
+// back a day across a month edge but scrolls the Month strip to its bottom;
+// the Month view's own arrow lands on the first day, as the other arrow does.
+function decrementMonthView() {
+  decrementMonth()
+  date.value = findFirstDateOfMonth(currentMonth.value, currentYear.value)
+  week.value = findCurrentWeek(currentMonthDates.value[date.value])
+}
+
 const decrementClickEvents: Record<CalendarMode, () => void> = {
-  Month: decrementMonth,
+  Month: decrementMonthView,
   Week: decrementWeek,
   Day: decrementDay,
 }
@@ -712,15 +742,11 @@ function getVisibleRange() {
     }
   }
 
-  const start = dayjs(
-    new Date(currentYear.value, currentMonth.value, 1),
-  ).startOf('day')
-  const end = dayjs(
-    new Date(currentYear.value, currentMonth.value + 1, 0),
-  ).endOf('day')
+  // The Month strip's first and last weeks reach into the neighbouring months.
+  const range = stripRange(currentMonth.value, currentYear.value)
   return {
-    startDate: start.format('YYYY-MM-DD'),
-    endDate: end.format('YYYY-MM-DD'),
+    startDate: dayjs(range.start).format('YYYY-MM-DD'),
+    endDate: dayjs(range.end).format('YYYY-MM-DD'),
   }
 }
 

package/experimental/Calendar/CalendarDaily.vue

@@ -126,6 +126,7 @@ import {
   twentyFourHoursFormat,
 } from './calendarUtils'
 import useCalendarData from './composables/useCalendarData'
+import { eventDays } from './eventSpan'
 import CalendarWeekDayEvent from './CalendarWeekDayEvent.vue'
 import {
   CALENDAR_ACTIONS_KEY,
@@ -141,8 +142,8 @@ const props = defineProps<{
 const timedEvents = computed(
   () => useCalendarData(props.events).timedEvents.value,
 )
-const fullDayEvents = computed(
-  () => useCalendarData(props.events).fullDayEvents.value,
+const allDayEvents = computed(
+  () => useCalendarData(props.events).allDayEvents.value,
 )
 const gridRef = ref<HTMLElement | null>(null)
 const hourHeight = props.config.hourHeight
@@ -150,9 +151,14 @@ const minuteHeight = hourHeight / 60
 
 const showCollapsable = ref(false)
 const isCollapsed = ref(true)
-const dayFullDayEvents = computed(
-  () => fullDayEvents.value?.[parseDate(props.currentDate)] || [],
-)
+// Every all-day-row event covering this day, a multi-day one included.
+const dayFullDayEvents = computed(() => {
+  const day = parseDate(props.currentDate)
+  return allDayEvents.value.filter((event) => {
+    const { start, end } = eventDays(event)
+    return start <= day && day <= end
+  })
+})
 
 function updateFullDayEventsState() {
   // Show collapsible if more than 4 events

package/experimental/Calendar/CalendarMonthEvent.vue

@@ -16,9 +16,12 @@
     <template #trigger>
       <div
         v-bind="$attrs"
-        class="event flex gap-1.5 min-h-6 mx-px rounded-4 p-[5px] transition-all duration-75 w-full overflow-hidden"
+        class="event flex gap-1.5 min-h-6 rounded-4 p-[5px] transition-all duration-75 overflow-hidden"
         :class="{
           active: activeEvent == (props.event?.id || props.event?.name),
+          'rounded-l-none': bar && !bar.isStart,
+          'rounded-r-none': bar && !bar.isEnd,
+          'event-draft': !!props.event.isDraft,
         }"
         :style="eventBgStyle"
         @click.stop="
@@ -31,22 +34,32 @@
         @dblclick.prevent="handleEventEdit($event)"
       >
         <div
-          v-if="props.event.fromTime"
+          v-if="props.event.fromTime && !props.event.isDraft"
           class="event-border w-[2px] rounded-4 shrink-0"
-          :style="eventBorderStyle"
         />
         <div
-          class="relative flex h-full select-none items-start gap-2 overflow-hidden"
+          class="relative flex h-full min-w-0 select-none items-start gap-2 overflow-hidden"
         >
           <div v-if="config.showIcon && eventIcon">
             <component :is="eventIcon" class="h-4 w-4 text-ink-gray-8" />
           </div>
-          <p
-            class="text-sm-medium truncate text-ink-gray-8"
-            :class="{ italic: !props.event.title }"
-          >
-            {{ props.event.title || '[No title]' }}
-          </p>
+          <div class="min-w-0">
+            <p
+              class="event-title text-sm-medium"
+              :class="[
+                wrap ? 'line-clamp-2 break-words' : 'truncate',
+                props.event.isDeclined
+                  ? 'line-through text-ink-gray-5'
+                  : 'text-ink-gray-8',
+                { italic: !props.event.title },
+              ]"
+            >
+              {{ props.event.title || '[No title]' }}
+            </p>
+            <p v-if="subtitle" class="event-subtitle mt-0.5 truncate text-xs">
+              {{ subtitle }}
+            </p>
+          </div>
         </div>
       </div>
     </template>
@@ -92,13 +105,26 @@ import NewEventModal from './NewEventModal.vue'
 import Popover from '#components/Popover/Popover.vue'
 import { useEventBase } from './useEventBase'
 import { computed, ref } from 'vue'
-import type { CalendarEvent } from './types'
+import type { CalendarEvent, CalendarRowBar } from './types'
 
 const isPopoverOpen = ref(false)
 
 const props = defineProps<{
   event: CalendarEvent
   date: Date
+  /**
+   * The bar this pill draws in a week row. A side the event runs past is
+   * squared off, so a stay that began last week reads as continuing.
+   */
+  bar?: CalendarRowBar
+  /**
+   * Lets the title run to a second line instead of cutting it off. The
+   * Month strip sizes its rows to their content, so a pill there can afford
+   * to show its whole title.
+   */
+  wrap?: boolean
+  /** A second, quieter line under the title — a time, or "Day 2 of 3". */
+  subtitle?: string
 }>()
 
 defineOptions({ inheritAttrs: false })
@@ -111,7 +137,6 @@ const {
   eventIcons,
   showEventModal,
   eventBgStyle,
-  eventBorderStyle,
   handleEventClick,
   handleEventEdit,
   handleEventDelete,