+ calendar: add onClickDay callback and getDayEvents method

Author: catouse

lib/calendar/dev.ts

@@ -26,6 +26,10 @@ onPageLoad(() => {
         onClickEvent: (event, category, mouseEvent) => {
             console.log('> onClickEvent', {event, category, mouseEvent});
         },
+        onClickDay: function (date, mouseEvent) {
+            const dayEvents = this.getDayEvents(date);
+            console.log('> onClickDay', {date, mouseEvent, dayEvents});
+        },
     });
     console.log('> calendar', calendar);
 });

lib/calendar/src/component/calendar-month-view.tsx

@@ -46,7 +46,7 @@ export class CalendarMonthView extends Component<CalendarMonthViewProps> {
             'is-weekend': weekDay === 0 || weekDay === 6,
         });
         return (
-            <div className={className} key={dateStr} z-date={dateStr} zui-command={`.~clickDay/${dateStr}`}>
+            <div className={className} key={dateStr} z-date={dateStr} zui-command={`.~clickDay/${dateStr}/$.event`}>
                 <div className="calendar-month-view-day-head" title={dateStr}>
                     {(date === 1 && monthNames) ? <span class="calendar-month-view-month-name">{monthNames[day.getMonth()]}</span> : null}
                     <span class="calendar-month-view-day-number">{day.getDate()}</span>

lib/calendar/src/component/calendar.tsx

@@ -1,6 +1,6 @@
 import {ComponentChildren, RenderableProps} from 'preact';
 import {HElementSignals, computed, effect} from '@zui/core';
-import {createDate, type DateLike, getDateTime} from '@zui/helpers';
+import {createDate, type DateLike, formatDate, getDateTime} from '@zui/helpers';
 import type {CalendarCategory, CalendarEvent, CalendarProps, CalendarState} from '../types';
 import {CalendarHeader} from './calendar-header';
 import {CalendarMonthView} from './calendar-month-view';
@@ -97,10 +97,20 @@ export class Calendar<P extends CalendarProps = CalendarProps> extends HElementS
         this.props.onClickEvent?.call(this, event, category!, mouseEvent);
     }
 
+    clickDay(dateStr: string, mouseEvent: MouseEvent) {
+        const date = createDate(dateStr);
+        this.props.onClickDay?.call(this, date, mouseEvent);
+    }
+
     getEvent(eventID: string) {
         return this.events.find(event => String(event.id) === String(eventID));
     }
 
+    getDayEvents(date: DateLike) {
+        const dateStr = formatDate(date, 'yyyy-MM-dd');
+        return this.events.filter(event => formatDate(event.start, 'yyyy-MM-dd') === dateStr);
+    }
+
     getCategory(categoryID: string) {
         return this.categories.find(category => String(category.id) === String(categoryID));
     }

lib/calendar/src/types/calendar-props.ts

@@ -59,6 +59,9 @@ export type CalendarProps = HElementProps & {
     /** 点击日历事件 */
     onClickEvent?: (event: CalendarEvent, category: CalendarCategory, mouseEvent: MouseEvent) => void;
 
+    /** 点击日历日期 */
+    onClickDay?: (date: Date, mouseEvent: MouseEvent) => void;
+
     /** 切换日期回调函数 */
     onSwitchDate?: (date: Date, mode: CalendarViewMode) => void;
 };