diff --git a/dist/js/calendar-widget.js b/dist/js/calendar-widget.js index 081900e..ddbaeba 100644 --- a/dist/js/calendar-widget.js +++ b/dist/js/calendar-widget.js @@ -1 +1 @@ -function S({view:u="dayGridMonth",locale:o="en",firstDay:E=1,events:b=[],eventContent:r=null,selectable:k=!1,eventClickEnabled:w=!1,eventDragEnabled:d=!1,eventResizeEnabled:i=!1,noEventsClickEnabled:h=!1,dayMaxEvents:m=!1,moreLinkContent:c=null,resources:p=[],hasDateClickContextMenu:y=!1,hasDateSelectContextMenu:v=!1,hasEventClickContextMenu:C=!1,hasNoEventsClickContextMenu:f=!1,options:x={}}){return{calendarEl:null,init:async function(){this.calendarEl=this.$el;let t=this,n={view:u,resources:p,eventSources:[{events:(e,a,l)=>this.$wire.getEventsJs(e)}],locale:o,firstDay:E,dayMaxEvents:m,selectable:v,eventStartEditable:d,eventDurationEditable:i};y&&(n.dateClick=e=>{t.$el.querySelector("[calendar-context-menu]").dispatchEvent(new CustomEvent("calendar--open-menu",{detail:{mountData:{date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource},jsEvent:e.jsEvent,dayEl:e.dayEl,context:"dateClick"}}))}),v&&(n.select=e=>{t.$el.querySelector("[calendar-context-menu]").dispatchEvent(new CustomEvent("calendar--open-menu",{detail:{mountData:{start:e.start,startStr:e.startStr,end:e.end,endStr:e.endStr,allDay:e.allDay,view:e.view,resource:e.resource},jsEvent:e.jsEvent,context:"dateSelect"}}))}),r!==null&&(n.eventContent=e=>{let a=t.getEventContent(e);if(a!==void 0)return{html:a}}),c!==null&&(n.moreLinkContent=e=>({html:t.getMoreLinkContent(e)})),w&&(n.eventClick=e=>{if(e.event.extendedProps.url){let a=e.event.extendedProps.url_target??"_blank";window.open(e.event.extendedProps.url,a)}else C?t.$el.querySelector("[calendar-context-menu]").dispatchEvent(new CustomEvent("calendar--open-menu",{detail:{mountData:{event:e.event,view:e.view},jsEvent:e.jsEvent,context:"eventClick"}})):this.$wire.onEventClick({event:e.event,view:e.view})}),h&&(n.noEventsClick=e=>{f?t.$el.querySelector("[calendar-context-menu]").dispatchEvent(new CustomEvent("calendar--open-menu",{detail:{mountData:{view:e.view},jsEvent:e.jsEvent,context:"noEventsClick"}})):this.$wire.onNoEventsClick({view:e.view})}),n.eventResize=async e=>{let a=e.event.durationEditable,l=i;a!==void 0&&(l=a),l&&await this.$wire.onEventResize({event:e.event,oldEvent:e.oldEvent,endDelta:e.endDelta,view:e.view}).then(s=>{s===!1&&e.revert()})},n.eventDrop=async e=>{let a=e.event.startEditable,l=d;a!==void 0&&(l=a),l&&await this.$wire.onEventDrop({event:e.event,oldEvent:e.oldEvent,oldResource:e.oldResource,newResource:e.newResource,delta:e.delta,view:e.view}).then(s=>{s===!1&&e.revert()})},this.ec=new EventCalendar(this.$el.querySelector("div"),{...n,...x}),window.addEventListener("ec-add-event",this.addEvent),window.addEventListener("calendar--refresh",()=>this.ec.refetchEvents())},addEvent:function(t){this.ec.addEvent(t)},getEventContent:function(t){if(typeof r=="string")return this.wrapContent(r,t);if(typeof r=="object"){let n=t.event.extendedProps.model,e=r[n];return e===void 0?void 0:this.wrapContent(e,t)}},getMoreLinkContent:function(t){return this.wrapContent(c,t)},wrapContent:function(t,n){let e=document.createElement("div");return e.innerHTML=t,e.setAttribute("x-data",JSON.stringify(n)),e.classList.add("w-full"),e.outerHTML}}}export{S as default}; +function b({view:v="dayGridMonth",locale:o="en",firstDay:w=1,events:f=[],eventContent:l=null,selectable:g=!1,eventClickEnabled:E=!1,eventDragEnabled:d=!1,eventResizeEnabled:i=!1,noEventsClickEnabled:h=!1,dateSelectEnabled:c=!1,dateClickEnabled:y=!1,viewDidMountEnabled:m=!1,dayMaxEvents:p=!1,moreLinkContent:u=null,resources:C=[],hasDateClickContextMenu:D=!1,hasDateSelectContextMenu:S=!1,hasEventClickContextMenu:x=!1,hasNoEventsClickContextMenu:k=!1,options:$={}}){return{calendarEl:null,init:async function(){this.calendarEl=this.$el;let t=this,n={view:v,resources:C,eventSources:[{events:(e,a,r)=>this.$wire.getEventsJs(e)}],locale:o,firstDay:w,dayMaxEvents:p,selectable:c,eventStartEditable:d,eventDurationEditable:i};y&&(n.dateClick=e=>{D?t.$el.querySelector("[calendar-context-menu]").dispatchEvent(new CustomEvent("calendar--open-menu",{detail:{mountData:{date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource},jsEvent:e.jsEvent,dayEl:e.dayEl,context:"dateClick"}})):this.$wire.onDateClick({date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource})}),c&&(n.select=e=>{S?t.$el.querySelector("[calendar-context-menu]").dispatchEvent(new CustomEvent("calendar--open-menu",{detail:{mountData:{start:e.start,startStr:e.startStr,end:e.end,endStr:e.endStr,allDay:e.allDay,view:e.view,resource:e.resource},jsEvent:e.jsEvent,context:"dateSelect"}})):this.$wire.onDateSelect({start:e.start,startStr:e.startStr,end:e.end,endStr:e.endStr,allDay:e.allDay,view:e.view,resource:e.resource})}),l!==null&&(n.eventContent=e=>{let a=t.getEventContent(e);if(a!==void 0)return{html:a}}),u!==null&&(n.moreLinkContent=e=>({html:t.getMoreLinkContent(e)})),E&&(n.eventClick=e=>{if(e.event.extendedProps.url){let a=e.event.extendedProps.url_target??"_blank";window.open(e.event.extendedProps.url,a)}else x?t.$el.querySelector("[calendar-context-menu]").dispatchEvent(new CustomEvent("calendar--open-menu",{detail:{mountData:{event:e.event,view:e.view},jsEvent:e.jsEvent,context:"eventClick"}})):this.$wire.onEventClick({event:e.event,view:e.view})}),h&&(n.noEventsClick=e=>{k?t.$el.querySelector("[calendar-context-menu]").dispatchEvent(new CustomEvent("calendar--open-menu",{detail:{mountData:{view:e.view},jsEvent:e.jsEvent,context:"noEventsClick"}})):this.$wire.onNoEventsClick({view:e.view})}),n.eventResize=async e=>{let a=e.event.durationEditable,r=i;a!==void 0&&(r=a),r&&await this.$wire.onEventResize({event:e.event,oldEvent:e.oldEvent,endDelta:e.endDelta,view:e.view}).then(s=>{s===!1&&e.revert()})},n.eventDrop=async e=>{let a=e.event.startEditable,r=d;a!==void 0&&(r=a),r&&await this.$wire.onEventDrop({event:e.event,oldEvent:e.oldEvent,oldResource:e.oldResource,newResource:e.newResource,delta:e.delta,view:e.view}).then(s=>{s===!1&&e.revert()})},m&&(n.viewDidMount=e=>{this.$wire.onViewDidMount({view:e})}),this.ec=new EventCalendar(this.$el.querySelector("div"),{...n,...$}),window.addEventListener("calendar--refresh",()=>this.ec.refetchEvents())},getEventContent:function(t){if(typeof l=="string")return this.wrapContent(l,t);if(typeof l=="object"){let n=t.event.extendedProps.model,e=l[n];return e===void 0?void 0:this.wrapContent(e,t)}},getMoreLinkContent:function(t){return this.wrapContent(u,t)},wrapContent:function(t,n){let e=document.createElement("div");return e.innerHTML=t,e.setAttribute("x-data",JSON.stringify(n)),e.classList.add("w-full"),e.outerHTML}}}export{b as default}; diff --git a/resources/js/calendar-widget.js b/resources/js/calendar-widget.js index f22eff9..2e25338 100644 --- a/resources/js/calendar-widget.js +++ b/resources/js/calendar-widget.js @@ -9,6 +9,9 @@ export default function calendarWidget({ eventDragEnabled = false, eventResizeEnabled = false, noEventsClickEnabled = false, + dateSelectEnabled = false, + dateClickEnabled = false, + viewDidMountEnabled = false, dayMaxEvents = false, moreLinkContent = null, resources = [], @@ -38,47 +41,69 @@ export default function calendarWidget({ locale: locale, firstDay: firstDay, dayMaxEvents: dayMaxEvents, - selectable: hasDateSelectContextMenu, + selectable: dateSelectEnabled, eventStartEditable: eventDragEnabled, eventDurationEditable: eventResizeEnabled, }; - if (hasDateClickContextMenu) { + if (dateClickEnabled) { settings.dateClick = (info) => { - self.$el.querySelector('[calendar-context-menu]').dispatchEvent(new CustomEvent('calendar--open-menu', { - detail: { - mountData: { - date: info.date, - dateStr: info.dateStr, - allDay: info.allDay, - view: info.view, - resource: info.resource, + if (hasDateClickContextMenu) { + self.$el.querySelector('[calendar-context-menu]').dispatchEvent(new CustomEvent('calendar--open-menu', { + detail: { + mountData: { + date: info.date, + dateStr: info.dateStr, + allDay: info.allDay, + view: info.view, + resource: info.resource, + }, + jsEvent: info.jsEvent, + dayEl: info.dayEl, + context: 'dateClick', }, - jsEvent: info.jsEvent, - dayEl: info.dayEl, - context: 'dateClick', - }, - })); + })); + } else { + this.$wire.onDateClick({ + date: info.date, + dateStr: info.dateStr, + allDay: info.allDay, + view: info.view, + resource: info.resource, + }); + } }; } - if (hasDateSelectContextMenu) { + if (dateSelectEnabled) { settings.select = (info) => { - self.$el.querySelector('[calendar-context-menu]').dispatchEvent(new CustomEvent('calendar--open-menu', { - detail: { - mountData: { - start: info.start, - startStr: info.startStr, - end: info.end, - endStr: info.endStr, - allDay: info.allDay, - view: info.view, - resource: info.resource, + if (hasDateSelectContextMenu) { + self.$el.querySelector('[calendar-context-menu]').dispatchEvent(new CustomEvent('calendar--open-menu', { + detail: { + mountData: { + start: info.start, + startStr: info.startStr, + end: info.end, + endStr: info.endStr, + allDay: info.allDay, + view: info.view, + resource: info.resource, + }, + jsEvent: info.jsEvent, + context: 'dateSelect', }, - jsEvent: info.jsEvent, - context: 'dateSelect', - }, - })); + })); + } else { + this.$wire.onDateSelect({ + start: info.start, + startStr: info.startStr, + end: info.end, + endStr: info.endStr, + allDay: info.allDay, + view: info.view, + resource: info.resource, + }); + } }; } @@ -196,16 +221,21 @@ export default function calendarWidget({ } }; + + if (viewDidMountEnabled) { + settings.viewDidMount = (view) => { + this.$wire.onViewDidMount({ + view: view, + }); + }; + } + this.ec = new EventCalendar(this.$el.querySelector('div'), { ...settings, ...options }); - window.addEventListener('ec-add-event', this.addEvent); - window.addEventListener('calendar--refresh', () => this.ec.refetchEvents()) - }, - addEvent: function (event) { - this.ec.addEvent(event); + window.addEventListener('calendar--refresh', () => this.ec.refetchEvents()) }, getEventContent: function (info) { diff --git a/resources/views/widgets/calendar.blade.php b/resources/views/widgets/calendar.blade.php index b0589b7..5115d0b 100644 --- a/resources/views/widgets/calendar.blade.php +++ b/resources/views/widgets/calendar.blade.php @@ -3,6 +3,9 @@ $eventDragEnabled = $this->isEventDragEnabled(); $eventResizeEnabled = $this->isEventResizeEnabled(); $noEventsClickEnabled = $this->isNoEventsClickEnabled(); + $dateClickEnabled = $this->isDateClickEnabled(); + $dateSelectEnabled = $this->isDateSelectEnabled(); + $viewDidMountEnabled = $this->isViewDidMountEnabled(); $onEventResizeStart = method_exists($this, 'onEventResizeStart'); $onEventResizeStop = method_exists($this, 'onEventResizeStop'); $hasDateClickContextMenu = !empty($this->getCachedDateClickContextMenuActions()); @@ -64,6 +67,9 @@ eventDragEnabled: @js($eventDragEnabled), eventResizeEnabled: @js($eventResizeEnabled), noEventsClickEnabled: @js($noEventsClickEnabled), + dateClickEnabled: @js($dateClickEnabled), + dateSelectEnabled: @js($dateSelectEnabled), + viewDidMountEnabled: @js($viewDidMountEnabled), onEventResizeStart: @js($onEventResizeStart), onEventResizeStop: @js($onEventResizeStop), dayMaxEvents: @js($this->dayMaxEvents()), diff --git a/src/Concerns/HandlesDateClick.php b/src/Concerns/HandlesDateClick.php new file mode 100644 index 0000000..2ae6dda --- /dev/null +++ b/src/Concerns/HandlesDateClick.php @@ -0,0 +1,22 @@ +dateClickEnabled = $enabled; + + return $this; + } + + public function isDateClickEnabled(): bool + { + return $this->dateClickEnabled; + } +} diff --git a/src/Concerns/HandlesDateSelect.php b/src/Concerns/HandlesDateSelect.php new file mode 100644 index 0000000..8ddada8 --- /dev/null +++ b/src/Concerns/HandlesDateSelect.php @@ -0,0 +1,22 @@ +dateSelectEnabled = $enabled; + + return $this; + } + + public function isDateSelectEnabled(): bool + { + return $this->dateSelectEnabled; + } +} diff --git a/src/Concerns/HandlesViewMount.php b/src/Concerns/HandlesViewMount.php new file mode 100644 index 0000000..3692bf3 --- /dev/null +++ b/src/Concerns/HandlesViewMount.php @@ -0,0 +1,22 @@ +viewDidMountEnabled = $enabled; + + return $this; + } + + public function isViewDidMountEnabled(): bool + { + return $this->viewDidMountEnabled; + } +} diff --git a/src/Concerns/HasContextMenuActions.php b/src/Concerns/HasContextMenuActions.php index 28dce05..50d610c 100644 --- a/src/Concerns/HasContextMenuActions.php +++ b/src/Concerns/HasContextMenuActions.php @@ -64,23 +64,11 @@ public function getNoEventsClickContextMenuActions(): array public function getCachedDateClickContextMenuActions(): array { return data_get($this->getCachedContextMenuActions(), Context::DateClick->value, []); - // return collect($this->getCachedContextMenuActions()) - // ->filter(fn ($action) => ! method_exists($action, 'getContext') - // || $action->getContext() === null - // || $action->getContext() === Context::Click) - // ->all() - // ; } public function getCachedDateSelectContextMenuActions(): array { return data_get($this->getCachedContextMenuActions(), Context::DateSelect->value, []); - // return collect($this->getCachedContextMenuActions()) - // ->filter(fn ($action) => ! method_exists($action, 'getContext') - // || $action->getContext() === null - // || $action->getContext() === Context::Select) - // ->all() - // ; } public function getCachedEventClickContextMenuActions(): array diff --git a/src/ValueObjects/Event.php b/src/ValueObjects/Event.php index dd281ed..5c73761 100644 --- a/src/ValueObjects/Event.php +++ b/src/ValueObjects/Event.php @@ -266,7 +266,6 @@ public function toArray(): array 'textColor' => $this->getTextColor(), 'resourceIds' => $this->getResourceIds(), 'extendedProps' => $this->getExtendedProps(), - // 'display' => 'background', ]; if (($editable = $this->getEditable()) !== null) { diff --git a/src/Widgets/CalendarWidget.php b/src/Widgets/CalendarWidget.php index f41f866..3db4850 100644 --- a/src/Widgets/CalendarWidget.php +++ b/src/Widgets/CalendarWidget.php @@ -8,10 +8,13 @@ use Filament\Forms\Contracts\HasForms; use Filament\Support\Concerns\EvaluatesClosures; use Filament\Widgets\Widget; +use Guava\Calendar\Concerns\HandlesDateClick; +use Guava\Calendar\Concerns\HandlesDateSelect; use Guava\Calendar\Concerns\HandlesEventClick; use Guava\Calendar\Concerns\HandlesEventDragAndDrop; use Guava\Calendar\Concerns\HandlesEventResize; use Guava\Calendar\Concerns\HandlesNoEventsClick; +use Guava\Calendar\Concerns\HandlesViewMount; use Guava\Calendar\Concerns\HasCalendarView; use Guava\Calendar\Concerns\HasContextMenuActions; use Guava\Calendar\Concerns\HasDayMaxEvents; @@ -32,10 +35,13 @@ class CalendarWidget extends Widget implements HasActions, HasForms { use EvaluatesClosures; + use HandlesDateClick; + use HandlesDateSelect; use HandlesEventClick; use HandlesEventDragAndDrop; use HandlesEventResize; use HandlesNoEventsClick; + use HandlesViewMount; use HasCalendarView; use HasContextMenuActions; use HasDayMaxEvents;