From d4450b677636fdf9cf9542aa33780ac09ee2cad3 Mon Sep 17 00:00:00 2001 From: Martijn Wagena Date: Thu, 1 Aug 2024 12:50:21 +0200 Subject: [PATCH 01/10] added direct trigger options on dateselect and dateclick --- resources/js/calendar-widget.js | 72 +++++++++++++++------- resources/views/widgets/calendar.blade.php | 4 ++ src/Concerns/HandlesDateClick.php | 25 ++++++++ src/Concerns/HandlesDateSelect.php | 25 ++++++++ src/Widgets/CalendarWidget.php | 4 ++ 5 files changed, 109 insertions(+), 21 deletions(-) create mode 100644 src/Concerns/HandlesDateClick.php create mode 100644 src/Concerns/HandlesDateSelect.php diff --git a/resources/js/calendar-widget.js b/resources/js/calendar-widget.js index f22eff9..4d982f2 100644 --- a/resources/js/calendar-widget.js +++ b/resources/js/calendar-widget.js @@ -1,23 +1,25 @@ export default function calendarWidget({ - view = 'dayGridMonth', - locale = 'en', - firstDay = 1, - events = [], - eventContent = null, - selectable = false, - eventClickEnabled = false, - eventDragEnabled = false, - eventResizeEnabled = false, - noEventsClickEnabled = false, - dayMaxEvents = false, - moreLinkContent = null, - resources = [], - hasDateClickContextMenu = false, - hasDateSelectContextMenu = false, - hasEventClickContextMenu = false, - hasNoEventsClickContextMenu = false, - options = {}, - }) { + view = 'dayGridMonth', + locale = 'en', + firstDay = 1, + events = [], + eventContent = null, + selectable = false, + eventClickEnabled = false, + eventDragEnabled = false, + eventResizeEnabled = false, + noEventsClickEnabled = false, + dateSelectEnabled = false, + dateClickEnabled = false, + dayMaxEvents = false, + moreLinkContent = null, + resources = [], + hasDateClickContextMenu = false, + hasDateSelectContextMenu = false, + hasEventClickContextMenu = false, + hasNoEventsClickContextMenu = false, + options = {}, +}) { return { calendarEl: null, @@ -43,7 +45,7 @@ export default function calendarWidget({ eventDurationEditable: eventResizeEnabled, }; - if (hasDateClickContextMenu) { + if (hasDateClickContextMenu && !dateClickEnabled) { settings.dateClick = (info) => { self.$el.querySelector('[calendar-context-menu]').dispatchEvent(new CustomEvent('calendar--open-menu', { detail: { @@ -62,7 +64,7 @@ export default function calendarWidget({ }; } - if (hasDateSelectContextMenu) { + if (hasDateSelectContextMenu && !dateSelectEnabled) { settings.select = (info) => { self.$el.querySelector('[calendar-context-menu]').dispatchEvent(new CustomEvent('calendar--open-menu', { detail: { @@ -82,6 +84,34 @@ export default function calendarWidget({ }; } + if (dateClickEnabled && !hasEventClickContextMenu) { + settings.dateClick = (info) => { + console.log('dateClickEnabled') + console.log(info); + this.$wire.onDateClick({ + date: info.date, + dateStr: info.dateStr, + allDay: info.allDay, + view: info.view, + resource: info.resource, + }); + }; + } + + if (dateSelectEnabled && !hasDateSelectContextMenu) { + settings.select = (info) => { + this.$wire.onDateSelectClick({ + start: info.start, + startStr: info.startStr, + end: info.end, + endStr: info.endStr, + allDay: info.allDay, + view: info.view, + resource: info.resource, + }); + }; + } + if (eventContent !== null) { settings.eventContent = (info) => { const content = self.getEventContent(info); diff --git a/resources/views/widgets/calendar.blade.php b/resources/views/widgets/calendar.blade.php index b0589b7..13146c7 100644 --- a/resources/views/widgets/calendar.blade.php +++ b/resources/views/widgets/calendar.blade.php @@ -3,6 +3,8 @@ $eventDragEnabled = $this->isEventDragEnabled(); $eventResizeEnabled = $this->isEventResizeEnabled(); $noEventsClickEnabled = $this->isNoEventsClickEnabled(); + $dateClickEnabled = $this->isDateClickEnabled(); + $dateSelectEnabled = $this->isDateSelectEnabled(); $onEventResizeStart = method_exists($this, 'onEventResizeStart'); $onEventResizeStop = method_exists($this, 'onEventResizeStop'); $hasDateClickContextMenu = !empty($this->getCachedDateClickContextMenuActions()); @@ -73,6 +75,8 @@ hasDateSelectContextMenu: @js($hasDateSelectContextMenu), hasEventClickContextMenu: @js($hasEventClickContextMenu), hasNoEventsClickContextMenu: @js($hasNoEventsClickContextMenu), + dateClickEnabled: @js($dateClickEnabled), + dateSelectEnabled: @js($dateSelectEnabled), options: @js($this->getOptions()), })" > diff --git a/src/Concerns/HandlesDateClick.php b/src/Concerns/HandlesDateClick.php new file mode 100644 index 0000000..ac1e7cc --- /dev/null +++ b/src/Concerns/HandlesDateClick.php @@ -0,0 +1,25 @@ +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..de75782 --- /dev/null +++ b/src/Concerns/HandlesDateSelect.php @@ -0,0 +1,25 @@ +dateSelectEnabled = $enabled; + + return $this; + } + + public function isDateSelectEnabled(): bool + { + return $this->dateSelectEnabled; + } +} diff --git a/src/Widgets/CalendarWidget.php b/src/Widgets/CalendarWidget.php index f41f866..fd55f4e 100644 --- a/src/Widgets/CalendarWidget.php +++ b/src/Widgets/CalendarWidget.php @@ -8,6 +8,8 @@ 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; @@ -51,6 +53,8 @@ class CalendarWidget extends Widget implements HasActions, HasForms use HasOptions; use HasResources; use HasSchema; + use HandlesDateClick; + use HandlesDateSelect; use InteractsWithActions; use InteractsWithForms; use InteractsWithRecord; From 5a98a4aa8f9804f41dbc17d2ba23a18647b8e934 Mon Sep 17 00:00:00 2001 From: Martijn Wagena Date: Thu, 1 Aug 2024 13:00:31 +0200 Subject: [PATCH 02/10] built the widget js dist file --- dist/js/calendar-widget.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/js/calendar-widget.js b/dist/js/calendar-widget.js index 081900e..3a66d90 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}; +export default function b({view:E="dayGridMonth",locale:h="en",firstDay:y=1,events:g=[],eventContent:l=null,selectable:x=!1,eventClickEnabled:m=!1,eventDragEnabled:c=!1,eventResizeEnabled:i=!1,noEventsClickEnabled:p=!1,dateSelectEnabled:v=!1,dateClickEnabled:u=!1,dayMaxEvents:C=!1,moreLinkContent:o=null,resources:S=[],hasDateClickContextMenu:D=!1,hasDateSelectContextMenu:s=!1,hasEventClickContextMenu:w=!1,hasNoEventsClickContextMenu:k=!1,options:$={}}){return{calendarEl:null,init:async function(){this.calendarEl=this.$el;let t=this,n={view:E,resources:S,eventSources:[{events:(e,a,r)=>this.$wire.getEventsJs(e)}],locale:h,firstDay:y,dayMaxEvents:C,selectable:s,eventStartEditable:c,eventDurationEditable:i};D&&!u&&(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"}}))}),s&&!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"}}))}),u&&!w&&(n.dateClick=e=>{console.log("dateClickEnabled"),console.log(e),this.$wire.onDateClick({date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource})}),v&&!s&&(n.select=e=>{this.$wire.onDateSelectClick({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=>{const a=t.getEventContent(e);if(a!==void 0)return{html:a}}),o!==null&&(n.moreLinkContent=e=>({html:t.getMoreLinkContent(e)})),m&&(n.eventClick=e=>{if(e.event.extendedProps.url){const a=e.event.extendedProps.url_target??"_blank";window.open(e.event.extendedProps.url,a)}else w?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})}),p&&(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=>{const a=e.event.durationEditable;let 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(d=>{d===!1&&e.revert()})},n.eventDrop=async e=>{const a=e.event.startEditable;let r=c;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(d=>{d===!1&&e.revert()})},this.ec=new EventCalendar(this.$el.querySelector("div"),{...n,...$}),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 l=="string")return this.wrapContent(l,t);if(typeof l=="object"){const n=t.event.extendedProps.model,e=l[n];return e===void 0?void 0:this.wrapContent(e,t)}},getMoreLinkContent:function(t){return this.wrapContent(o,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}}} From d89d3d512b667f5f659c61c167520437b6a01b3d Mon Sep 17 00:00:00 2001 From: Martijn Wagena Date: Thu, 1 Aug 2024 13:02:51 +0200 Subject: [PATCH 03/10] display selectable layer when dateSelectEnabled --- resources/js/calendar-widget.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/calendar-widget.js b/resources/js/calendar-widget.js index 4d982f2..6b3ccbf 100644 --- a/resources/js/calendar-widget.js +++ b/resources/js/calendar-widget.js @@ -40,7 +40,7 @@ export default function calendarWidget({ locale: locale, firstDay: firstDay, dayMaxEvents: dayMaxEvents, - selectable: hasDateSelectContextMenu, + selectable: hasDateSelectContextMenu || dateSelectEnabled, eventStartEditable: eventDragEnabled, eventDurationEditable: eventResizeEnabled, }; From a3a65a25ce411068afe2f45eb7d089ec968c19ea Mon Sep 17 00:00:00 2001 From: Martijn Wagena Date: Thu, 1 Aug 2024 13:03:10 +0200 Subject: [PATCH 04/10] added dist file --- dist/js/calendar-widget.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/js/calendar-widget.js b/dist/js/calendar-widget.js index 3a66d90..b2a4b5b 100644 --- a/dist/js/calendar-widget.js +++ b/dist/js/calendar-widget.js @@ -1 +1 @@ -export default function b({view:E="dayGridMonth",locale:h="en",firstDay:y=1,events:g=[],eventContent:l=null,selectable:x=!1,eventClickEnabled:m=!1,eventDragEnabled:c=!1,eventResizeEnabled:i=!1,noEventsClickEnabled:p=!1,dateSelectEnabled:v=!1,dateClickEnabled:u=!1,dayMaxEvents:C=!1,moreLinkContent:o=null,resources:S=[],hasDateClickContextMenu:D=!1,hasDateSelectContextMenu:s=!1,hasEventClickContextMenu:w=!1,hasNoEventsClickContextMenu:k=!1,options:$={}}){return{calendarEl:null,init:async function(){this.calendarEl=this.$el;let t=this,n={view:E,resources:S,eventSources:[{events:(e,a,r)=>this.$wire.getEventsJs(e)}],locale:h,firstDay:y,dayMaxEvents:C,selectable:s,eventStartEditable:c,eventDurationEditable:i};D&&!u&&(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"}}))}),s&&!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"}}))}),u&&!w&&(n.dateClick=e=>{console.log("dateClickEnabled"),console.log(e),this.$wire.onDateClick({date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource})}),v&&!s&&(n.select=e=>{this.$wire.onDateSelectClick({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=>{const a=t.getEventContent(e);if(a!==void 0)return{html:a}}),o!==null&&(n.moreLinkContent=e=>({html:t.getMoreLinkContent(e)})),m&&(n.eventClick=e=>{if(e.event.extendedProps.url){const a=e.event.extendedProps.url_target??"_blank";window.open(e.event.extendedProps.url,a)}else w?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})}),p&&(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=>{const a=e.event.durationEditable;let 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(d=>{d===!1&&e.revert()})},n.eventDrop=async e=>{const a=e.event.startEditable;let r=c;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(d=>{d===!1&&e.revert()})},this.ec=new EventCalendar(this.$el.querySelector("div"),{...n,...$}),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 l=="string")return this.wrapContent(l,t);if(typeof l=="object"){const n=t.event.extendedProps.model,e=l[n];return e===void 0?void 0:this.wrapContent(e,t)}},getMoreLinkContent:function(t){return this.wrapContent(o,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 default function g({view:E="dayGridMonth",locale:h="en",firstDay:y=1,events:x=[],eventContent:l=null,selectable:b=!1,eventClickEnabled:m=!1,eventDragEnabled:i=!1,eventResizeEnabled:v=!1,noEventsClickEnabled:p=!1,dateSelectEnabled:s=!1,dateClickEnabled:u=!1,dayMaxEvents:C=!1,moreLinkContent:o=null,resources:S=[],hasDateClickContextMenu:D=!1,hasDateSelectContextMenu:d=!1,hasEventClickContextMenu:w=!1,hasNoEventsClickContextMenu:k=!1,options:$={}}){return{calendarEl:null,init:async function(){this.calendarEl=this.$el;let t=this,n={view:E,resources:S,eventSources:[{events:(e,a,r)=>this.$wire.getEventsJs(e)}],locale:h,firstDay:y,dayMaxEvents:C,selectable:d||s,eventStartEditable:i,eventDurationEditable:v};D&&!u&&(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"}}))}),d&&!s&&(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"}}))}),u&&!w&&(n.dateClick=e=>{console.log("dateClickEnabled"),console.log(e),this.$wire.onDateClick({date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource})}),s&&!d&&(n.select=e=>{this.$wire.onDateSelectClick({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=>{const a=t.getEventContent(e);if(a!==void 0)return{html:a}}),o!==null&&(n.moreLinkContent=e=>({html:t.getMoreLinkContent(e)})),m&&(n.eventClick=e=>{if(e.event.extendedProps.url){const a=e.event.extendedProps.url_target??"_blank";window.open(e.event.extendedProps.url,a)}else w?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})}),p&&(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=>{const a=e.event.durationEditable;let r=v;a!==void 0&&(r=a),r&&await this.$wire.onEventResize({event:e.event,oldEvent:e.oldEvent,endDelta:e.endDelta,view:e.view}).then(c=>{c===!1&&e.revert()})},n.eventDrop=async e=>{const a=e.event.startEditable;let r=i;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(c=>{c===!1&&e.revert()})},this.ec=new EventCalendar(this.$el.querySelector("div"),{...n,...$}),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 l=="string")return this.wrapContent(l,t);if(typeof l=="object"){const n=t.event.extendedProps.model,e=l[n];return e===void 0?void 0:this.wrapContent(e,t)}},getMoreLinkContent:function(t){return this.wrapContent(o,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}}} From 64c7efa3cc9bbb0020d711c103ea92e79eb48608 Mon Sep 17 00:00:00 2001 From: Martijn Wagena Date: Thu, 1 Aug 2024 13:09:53 +0200 Subject: [PATCH 05/10] typo --- dist/js/calendar-widget.js | 2 +- resources/js/calendar-widget.js | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/dist/js/calendar-widget.js b/dist/js/calendar-widget.js index b2a4b5b..d8f6fd1 100644 --- a/dist/js/calendar-widget.js +++ b/dist/js/calendar-widget.js @@ -1 +1 @@ -export default function g({view:E="dayGridMonth",locale:h="en",firstDay:y=1,events:x=[],eventContent:l=null,selectable:b=!1,eventClickEnabled:m=!1,eventDragEnabled:i=!1,eventResizeEnabled:v=!1,noEventsClickEnabled:p=!1,dateSelectEnabled:s=!1,dateClickEnabled:u=!1,dayMaxEvents:C=!1,moreLinkContent:o=null,resources:S=[],hasDateClickContextMenu:D=!1,hasDateSelectContextMenu:d=!1,hasEventClickContextMenu:w=!1,hasNoEventsClickContextMenu:k=!1,options:$={}}){return{calendarEl:null,init:async function(){this.calendarEl=this.$el;let t=this,n={view:E,resources:S,eventSources:[{events:(e,a,r)=>this.$wire.getEventsJs(e)}],locale:h,firstDay:y,dayMaxEvents:C,selectable:d||s,eventStartEditable:i,eventDurationEditable:v};D&&!u&&(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"}}))}),d&&!s&&(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"}}))}),u&&!w&&(n.dateClick=e=>{console.log("dateClickEnabled"),console.log(e),this.$wire.onDateClick({date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource})}),s&&!d&&(n.select=e=>{this.$wire.onDateSelectClick({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=>{const a=t.getEventContent(e);if(a!==void 0)return{html:a}}),o!==null&&(n.moreLinkContent=e=>({html:t.getMoreLinkContent(e)})),m&&(n.eventClick=e=>{if(e.event.extendedProps.url){const a=e.event.extendedProps.url_target??"_blank";window.open(e.event.extendedProps.url,a)}else w?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})}),p&&(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=>{const a=e.event.durationEditable;let r=v;a!==void 0&&(r=a),r&&await this.$wire.onEventResize({event:e.event,oldEvent:e.oldEvent,endDelta:e.endDelta,view:e.view}).then(c=>{c===!1&&e.revert()})},n.eventDrop=async e=>{const a=e.event.startEditable;let r=i;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(c=>{c===!1&&e.revert()})},this.ec=new EventCalendar(this.$el.querySelector("div"),{...n,...$}),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 l=="string")return this.wrapContent(l,t);if(typeof l=="object"){const n=t.event.extendedProps.model,e=l[n];return e===void 0?void 0:this.wrapContent(e,t)}},getMoreLinkContent:function(t){return this.wrapContent(o,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 default function f({view:E="dayGridMonth",locale:h="en",firstDay:y=1,events:x=[],eventContent:l=null,selectable:b=!1,eventClickEnabled:m=!1,eventDragEnabled:i=!1,eventResizeEnabled:v=!1,noEventsClickEnabled:p=!1,dateSelectEnabled:s=!1,dateClickEnabled:u=!1,dayMaxEvents:S=!1,moreLinkContent:o=null,resources:C=[],hasDateClickContextMenu:D=!1,hasDateSelectContextMenu:d=!1,hasEventClickContextMenu:w=!1,hasNoEventsClickContextMenu:k=!1,options:$={}}){return{calendarEl:null,init:async function(){this.calendarEl=this.$el;let t=this,n={view:E,resources:C,eventSources:[{events:(e,a,r)=>this.$wire.getEventsJs(e)}],locale:h,firstDay:y,dayMaxEvents:S,selectable:d||s,eventStartEditable:i,eventDurationEditable:v};D&&!u&&(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"}}))}),d&&!s&&(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"}}))}),u&&!w&&(n.dateClick=e=>{this.$wire.onDateClick({date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource})}),s&&!d&&(n.select=e=>{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=>{const a=t.getEventContent(e);if(a!==void 0)return{html:a}}),o!==null&&(n.moreLinkContent=e=>({html:t.getMoreLinkContent(e)})),m&&(n.eventClick=e=>{if(e.event.extendedProps.url){const a=e.event.extendedProps.url_target??"_blank";window.open(e.event.extendedProps.url,a)}else w?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})}),p&&(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=>{const a=e.event.durationEditable;let r=v;a!==void 0&&(r=a),r&&await this.$wire.onEventResize({event:e.event,oldEvent:e.oldEvent,endDelta:e.endDelta,view:e.view}).then(c=>{c===!1&&e.revert()})},n.eventDrop=async e=>{const a=e.event.startEditable;let r=i;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(c=>{c===!1&&e.revert()})},this.ec=new EventCalendar(this.$el.querySelector("div"),{...n,...$}),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 l=="string")return this.wrapContent(l,t);if(typeof l=="object"){const n=t.event.extendedProps.model,e=l[n];return e===void 0?void 0:this.wrapContent(e,t)}},getMoreLinkContent:function(t){return this.wrapContent(o,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}}} diff --git a/resources/js/calendar-widget.js b/resources/js/calendar-widget.js index 6b3ccbf..05f43c7 100644 --- a/resources/js/calendar-widget.js +++ b/resources/js/calendar-widget.js @@ -86,8 +86,6 @@ export default function calendarWidget({ if (dateClickEnabled && !hasEventClickContextMenu) { settings.dateClick = (info) => { - console.log('dateClickEnabled') - console.log(info); this.$wire.onDateClick({ date: info.date, dateStr: info.dateStr, @@ -100,7 +98,7 @@ export default function calendarWidget({ if (dateSelectEnabled && !hasDateSelectContextMenu) { settings.select = (info) => { - this.$wire.onDateSelectClick({ + this.$wire.onDateSelect({ start: info.start, startStr: info.startStr, end: info.end, From 48b8d66d3c38be34872ce6f1e557500c9e082cb0 Mon Sep 17 00:00:00 2001 From: Martijn Wagena Date: Thu, 1 Aug 2024 21:55:49 +0200 Subject: [PATCH 06/10] store current view info in variable --- dist/js/calendar-widget.js | 2 +- resources/js/calendar-widget.js | 4 ++++ src/Widgets/CalendarWidget.php | 7 +++++++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/dist/js/calendar-widget.js b/dist/js/calendar-widget.js index d8f6fd1..38fce49 100644 --- a/dist/js/calendar-widget.js +++ b/dist/js/calendar-widget.js @@ -1 +1 @@ -export default function f({view:E="dayGridMonth",locale:h="en",firstDay:y=1,events:x=[],eventContent:l=null,selectable:b=!1,eventClickEnabled:m=!1,eventDragEnabled:i=!1,eventResizeEnabled:v=!1,noEventsClickEnabled:p=!1,dateSelectEnabled:s=!1,dateClickEnabled:u=!1,dayMaxEvents:S=!1,moreLinkContent:o=null,resources:C=[],hasDateClickContextMenu:D=!1,hasDateSelectContextMenu:d=!1,hasEventClickContextMenu:w=!1,hasNoEventsClickContextMenu:k=!1,options:$={}}){return{calendarEl:null,init:async function(){this.calendarEl=this.$el;let t=this,n={view:E,resources:C,eventSources:[{events:(e,a,r)=>this.$wire.getEventsJs(e)}],locale:h,firstDay:y,dayMaxEvents:S,selectable:d||s,eventStartEditable:i,eventDurationEditable:v};D&&!u&&(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"}}))}),d&&!s&&(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"}}))}),u&&!w&&(n.dateClick=e=>{this.$wire.onDateClick({date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource})}),s&&!d&&(n.select=e=>{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=>{const a=t.getEventContent(e);if(a!==void 0)return{html:a}}),o!==null&&(n.moreLinkContent=e=>({html:t.getMoreLinkContent(e)})),m&&(n.eventClick=e=>{if(e.event.extendedProps.url){const a=e.event.extendedProps.url_target??"_blank";window.open(e.event.extendedProps.url,a)}else w?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})}),p&&(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=>{const a=e.event.durationEditable;let r=v;a!==void 0&&(r=a),r&&await this.$wire.onEventResize({event:e.event,oldEvent:e.oldEvent,endDelta:e.endDelta,view:e.view}).then(c=>{c===!1&&e.revert()})},n.eventDrop=async e=>{const a=e.event.startEditable;let r=i;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(c=>{c===!1&&e.revert()})},this.ec=new EventCalendar(this.$el.querySelector("div"),{...n,...$}),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 l=="string")return this.wrapContent(l,t);if(typeof l=="object"){const n=t.event.extendedProps.model,e=l[n];return e===void 0?void 0:this.wrapContent(e,t)}},getMoreLinkContent:function(t){return this.wrapContent(o,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 default function f({view:E="dayGridMonth",locale:h="en",firstDay:y=1,events:x=[],eventContent:l=null,selectable:b=!1,eventClickEnabled:p=!1,eventDragEnabled:c=!1,eventResizeEnabled:v=!1,noEventsClickEnabled:m=!1,dateSelectEnabled:s=!1,dateClickEnabled:u=!1,dayMaxEvents:S=!1,moreLinkContent:w=null,resources:C=[],hasDateClickContextMenu:D=!1,hasDateSelectContextMenu:d=!1,hasEventClickContextMenu:o=!1,hasNoEventsClickContextMenu:$=!1,options:k={}}){return{calendarEl:null,init:async function(){this.calendarEl=this.$el;let t=this,n={view:E,resources:C,eventSources:[{events:(e,a,r)=>this.$wire.getEventsJs(e)}],locale:h,firstDay:y,dayMaxEvents:S,selectable:d||s,eventStartEditable:c,eventDurationEditable:v};D&&!u&&(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"}}))}),d&&!s&&(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"}}))}),u&&!o&&(n.dateClick=e=>{this.$wire.onDateClick({date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource})}),s&&!d&&(n.select=e=>{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=>{const a=t.getEventContent(e);if(a!==void 0)return{html:a}}),w!==null&&(n.moreLinkContent=e=>({html:t.getMoreLinkContent(e)})),p&&(n.eventClick=e=>{if(e.event.extendedProps.url){const a=e.event.extendedProps.url_target??"_blank";window.open(e.event.extendedProps.url,a)}else o?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})}),m&&(n.noEventsClick=e=>{$?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=>{const a=e.event.durationEditable;let r=v;a!==void 0&&(r=a),r&&await this.$wire.onEventResize({event:e.event,oldEvent:e.oldEvent,endDelta:e.endDelta,view:e.view}).then(i=>{i===!1&&e.revert()})},n.eventDrop=async e=>{const a=e.event.startEditable;let r=c;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(i=>{i===!1&&e.revert()})},n.eventAllUpdated=e=>{this.$wire.currentView=e.view},this.ec=new EventCalendar(this.$el.querySelector("div"),{...n,...k}),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 l=="string")return this.wrapContent(l,t);if(typeof l=="object"){const n=t.event.extendedProps.model,e=l[n];return e===void 0?void 0:this.wrapContent(e,t)}},getMoreLinkContent:function(t){return this.wrapContent(w,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}}} diff --git a/resources/js/calendar-widget.js b/resources/js/calendar-widget.js index 05f43c7..e099e5b 100644 --- a/resources/js/calendar-widget.js +++ b/resources/js/calendar-widget.js @@ -224,6 +224,10 @@ export default function calendarWidget({ } }; + settings.eventAllUpdated = (info) => { + this.$wire.currentView = info.view; + }; + this.ec = new EventCalendar(this.$el.querySelector('div'), { ...settings, ...options diff --git a/src/Widgets/CalendarWidget.php b/src/Widgets/CalendarWidget.php index fd55f4e..917f7fa 100644 --- a/src/Widgets/CalendarWidget.php +++ b/src/Widgets/CalendarWidget.php @@ -63,8 +63,15 @@ class CalendarWidget extends Widget implements HasActions, HasForms protected int | string | array $columnSpan = 'full'; + public array $currentView; + public function refreshRecords(): void { $this->dispatch('calendar--refresh'); } + + public function getView(): array + { + return $this->currentView; + } } From 3e617287efdad5e606271b2d33445fcf6c433d83 Mon Sep 17 00:00:00 2001 From: Martijn Wagena Date: Fri, 2 Aug 2024 21:47:39 +0200 Subject: [PATCH 07/10] processed mr feedback --- dist/js/calendar-widget.js | 2 +- resources/js/calendar-widget.js | 32 ++++++++++++++------------------ 2 files changed, 15 insertions(+), 19 deletions(-) diff --git a/dist/js/calendar-widget.js b/dist/js/calendar-widget.js index 38fce49..8028f8b 100644 --- a/dist/js/calendar-widget.js +++ b/dist/js/calendar-widget.js @@ -1 +1 @@ -export default function f({view:E="dayGridMonth",locale:h="en",firstDay:y=1,events:x=[],eventContent:l=null,selectable:b=!1,eventClickEnabled:p=!1,eventDragEnabled:c=!1,eventResizeEnabled:v=!1,noEventsClickEnabled:m=!1,dateSelectEnabled:s=!1,dateClickEnabled:u=!1,dayMaxEvents:S=!1,moreLinkContent:w=null,resources:C=[],hasDateClickContextMenu:D=!1,hasDateSelectContextMenu:d=!1,hasEventClickContextMenu:o=!1,hasNoEventsClickContextMenu:$=!1,options:k={}}){return{calendarEl:null,init:async function(){this.calendarEl=this.$el;let t=this,n={view:E,resources:C,eventSources:[{events:(e,a,r)=>this.$wire.getEventsJs(e)}],locale:h,firstDay:y,dayMaxEvents:S,selectable:d||s,eventStartEditable:c,eventDurationEditable:v};D&&!u&&(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"}}))}),d&&!s&&(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"}}))}),u&&!o&&(n.dateClick=e=>{this.$wire.onDateClick({date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource})}),s&&!d&&(n.select=e=>{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=>{const a=t.getEventContent(e);if(a!==void 0)return{html:a}}),w!==null&&(n.moreLinkContent=e=>({html:t.getMoreLinkContent(e)})),p&&(n.eventClick=e=>{if(e.event.extendedProps.url){const a=e.event.extendedProps.url_target??"_blank";window.open(e.event.extendedProps.url,a)}else o?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})}),m&&(n.noEventsClick=e=>{$?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=>{const a=e.event.durationEditable;let r=v;a!==void 0&&(r=a),r&&await this.$wire.onEventResize({event:e.event,oldEvent:e.oldEvent,endDelta:e.endDelta,view:e.view}).then(i=>{i===!1&&e.revert()})},n.eventDrop=async e=>{const a=e.event.startEditable;let r=c;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(i=>{i===!1&&e.revert()})},n.eventAllUpdated=e=>{this.$wire.currentView=e.view},this.ec=new EventCalendar(this.$el.querySelector("div"),{...n,...k}),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 l=="string")return this.wrapContent(l,t);if(typeof l=="object"){const n=t.event.extendedProps.model,e=l[n];return e===void 0?void 0:this.wrapContent(e,t)}},getMoreLinkContent:function(t){return this.wrapContent(w,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 default function $({view:o="dayGridMonth",locale:w="en",firstDay:E=1,events:b=[],eventContent:l=null,selectable:f=!1,eventClickEnabled:h=!1,eventDragEnabled:d=!1,eventResizeEnabled:i=!1,noEventsClickEnabled:y=!1,dateSelectEnabled:c=!1,dateClickEnabled:m=!1,dayMaxEvents:p=!1,moreLinkContent:v=null,resources:C=[],hasDateClickContextMenu:S=!1,hasDateSelectContextMenu:u=!1,hasEventClickContextMenu:D=!1,hasNoEventsClickContextMenu:k=!1,options:x={}}){return{calendarEl:null,init:async function(){this.calendarEl=this.$el;let t=this,n={view:o,resources:C,eventSources:[{events:(e,a,r)=>this.$wire.getEventsJs(e)}],locale:w,firstDay:E,dayMaxEvents:p,selectable:u||c,eventStartEditable:d,eventDurationEditable:i};S?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"}}))}:m&&(n.dateClick=e=>{this.$wire.onDateClick({date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource})}),u?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"}}))}:c&&(n.select=e=>{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=>{const a=t.getEventContent(e);if(a!==void 0)return{html:a}}),v!==null&&(n.moreLinkContent=e=>({html:t.getMoreLinkContent(e)})),h&&(n.eventClick=e=>{if(e.event.extendedProps.url){const a=e.event.extendedProps.url_target??"_blank";window.open(e.event.extendedProps.url,a)}else D?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})}),y&&(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=>{const a=e.event.durationEditable;let 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=>{const a=e.event.startEditable;let 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()})},n.viewDidMount=e=>{this.$wire.currentView=e.view},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 l=="string")return this.wrapContent(l,t);if(typeof l=="object"){const n=t.event.extendedProps.model,e=l[n];return e===void 0?void 0:this.wrapContent(e,t)}},getMoreLinkContent:function(t){return this.wrapContent(v,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}}} diff --git a/resources/js/calendar-widget.js b/resources/js/calendar-widget.js index e099e5b..d222fef 100644 --- a/resources/js/calendar-widget.js +++ b/resources/js/calendar-widget.js @@ -45,7 +45,7 @@ export default function calendarWidget({ eventDurationEditable: eventResizeEnabled, }; - if (hasDateClickContextMenu && !dateClickEnabled) { + if (hasDateClickContextMenu) { settings.dateClick = (info) => { self.$el.querySelector('[calendar-context-menu]').dispatchEvent(new CustomEvent('calendar--open-menu', { detail: { @@ -62,9 +62,19 @@ export default function calendarWidget({ }, })); }; + } else if (dateClickEnabled) { + settings.dateClick = (info) => { + this.$wire.onDateClick({ + date: info.date, + dateStr: info.dateStr, + allDay: info.allDay, + view: info.view, + resource: info.resource, + }); + }; } - if (hasDateSelectContextMenu && !dateSelectEnabled) { + if (hasDateSelectContextMenu) { settings.select = (info) => { self.$el.querySelector('[calendar-context-menu]').dispatchEvent(new CustomEvent('calendar--open-menu', { detail: { @@ -82,21 +92,7 @@ export default function calendarWidget({ }, })); }; - } - - if (dateClickEnabled && !hasEventClickContextMenu) { - settings.dateClick = (info) => { - this.$wire.onDateClick({ - date: info.date, - dateStr: info.dateStr, - allDay: info.allDay, - view: info.view, - resource: info.resource, - }); - }; - } - - if (dateSelectEnabled && !hasDateSelectContextMenu) { + } else if (dateSelectEnabled) { settings.select = (info) => { this.$wire.onDateSelect({ start: info.start, @@ -224,7 +220,7 @@ export default function calendarWidget({ } }; - settings.eventAllUpdated = (info) => { + settings.viewDidMount = (info) => { this.$wire.currentView = info.view; }; From d0464db89cdd08ece606e89208ca7c5deb2e0918 Mon Sep 17 00:00:00 2001 From: Martijn Wagena Date: Fri, 2 Aug 2024 21:52:30 +0200 Subject: [PATCH 08/10] seems the object IS the view instead of view being a property of the object --- resources/js/calendar-widget.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/calendar-widget.js b/resources/js/calendar-widget.js index d222fef..67abea3 100644 --- a/resources/js/calendar-widget.js +++ b/resources/js/calendar-widget.js @@ -221,7 +221,7 @@ export default function calendarWidget({ }; settings.viewDidMount = (info) => { - this.$wire.currentView = info.view; + this.$wire.currentView = info; }; this.ec = new EventCalendar(this.$el.querySelector('div'), { From aab146e8b870279adcf5f9f7bb9f94d51db2c3f2 Mon Sep 17 00:00:00 2001 From: Lukas Frey Date: Sat, 3 Aug 2024 16:08:43 +0200 Subject: [PATCH 09/10] feat: add dateClick, dateSelect, viewDidMount event support Signed-off-by: Lukas Frey --- dist/js/calendar-widget.js | 2 +- resources/js/calendar-widget.js | 164 +++++++++++---------- resources/views/widgets/calendar.blade.php | 6 +- src/Concerns/HandlesDateClick.php | 5 +- src/Concerns/HandlesDateSelect.php | 5 +- src/Concerns/HandlesViewMount.php | 22 +++ src/Concerns/HasContextMenuActions.php | 12 -- src/ValueObjects/Event.php | 1 - src/Widgets/CalendarWidget.php | 13 +- 9 files changed, 116 insertions(+), 114 deletions(-) create mode 100644 src/Concerns/HandlesViewMount.php diff --git a/dist/js/calendar-widget.js b/dist/js/calendar-widget.js index 8028f8b..d881112 100644 --- a/dist/js/calendar-widget.js +++ b/dist/js/calendar-widget.js @@ -1 +1 @@ -export default function $({view:o="dayGridMonth",locale:w="en",firstDay:E=1,events:b=[],eventContent:l=null,selectable:f=!1,eventClickEnabled:h=!1,eventDragEnabled:d=!1,eventResizeEnabled:i=!1,noEventsClickEnabled:y=!1,dateSelectEnabled:c=!1,dateClickEnabled:m=!1,dayMaxEvents:p=!1,moreLinkContent:v=null,resources:C=[],hasDateClickContextMenu:S=!1,hasDateSelectContextMenu:u=!1,hasEventClickContextMenu:D=!1,hasNoEventsClickContextMenu:k=!1,options:x={}}){return{calendarEl:null,init:async function(){this.calendarEl=this.$el;let t=this,n={view:o,resources:C,eventSources:[{events:(e,a,r)=>this.$wire.getEventsJs(e)}],locale:w,firstDay:E,dayMaxEvents:p,selectable:u||c,eventStartEditable:d,eventDurationEditable:i};S?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"}}))}:m&&(n.dateClick=e=>{this.$wire.onDateClick({date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource})}),u?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"}}))}:c&&(n.select=e=>{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=>{const a=t.getEventContent(e);if(a!==void 0)return{html:a}}),v!==null&&(n.moreLinkContent=e=>({html:t.getMoreLinkContent(e)})),h&&(n.eventClick=e=>{if(e.event.extendedProps.url){const a=e.event.extendedProps.url_target??"_blank";window.open(e.event.extendedProps.url,a)}else D?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})}),y&&(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=>{const a=e.event.durationEditable;let 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=>{const a=e.event.startEditable;let 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()})},n.viewDidMount=e=>{this.$wire.currentView=e.view},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 l=="string")return this.wrapContent(l,t);if(typeof l=="object"){const n=t.event.extendedProps.model,e=l[n];return e===void 0?void 0:this.wrapContent(e,t)}},getMoreLinkContent:function(t){return this.wrapContent(v,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}}} +function $({view:o="dayGridMonth",locale:w="en",firstDay:E=1,events:b=[],eventContent:l=null,selectable:g=!1,eventClickEnabled:h=!1,eventDragEnabled:d=!1,eventResizeEnabled:i=!1,noEventsClickEnabled:y=!1,dateSelectEnabled:c=!1,dateClickEnabled:m=!1,viewDidMountEnabled:p=!1,dayMaxEvents:C=!1,moreLinkContent:v=null,resources:D=[],hasDateClickContextMenu:S=!1,hasDateSelectContextMenu:u=!1,hasEventClickContextMenu:k=!1,hasNoEventsClickContextMenu:f=!1,options:x={}}){return{calendarEl:null,init:async function(){this.calendarEl=this.$el;let t=this,n={view:o,resources:D,eventSources:[{events:(e,a,r)=>this.$wire.getEventsJs(e)}],locale:w,firstDay:E,dayMaxEvents:C,selectable:u||c,eventStartEditable:d,eventDurationEditable:i};S?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"}}))}:m&&(n.dateClick=e=>{this.$wire.onDateClick({date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource})}),u?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"}}))}:c&&(n.select=e=>{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}}),v!==null&&(n.moreLinkContent=e=>({html:t.getMoreLinkContent(e)})),h&&(n.eventClick=e=>{if(e.event.extendedProps.url){let a=e.event.extendedProps.url_target??"_blank";window.open(e.event.extendedProps.url,a)}else k?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})}),y&&(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,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()})},p&&(n.viewDidMount=e=>{this.$wire.onViewDidMount({view:e})}),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 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(v,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{$ as default}; diff --git a/resources/js/calendar-widget.js b/resources/js/calendar-widget.js index 67abea3..2e25338 100644 --- a/resources/js/calendar-widget.js +++ b/resources/js/calendar-widget.js @@ -1,25 +1,26 @@ export default function calendarWidget({ - view = 'dayGridMonth', - locale = 'en', - firstDay = 1, - events = [], - eventContent = null, - selectable = false, - eventClickEnabled = false, - eventDragEnabled = false, - eventResizeEnabled = false, - noEventsClickEnabled = false, - dateSelectEnabled = false, - dateClickEnabled = false, - dayMaxEvents = false, - moreLinkContent = null, - resources = [], - hasDateClickContextMenu = false, - hasDateSelectContextMenu = false, - hasEventClickContextMenu = false, - hasNoEventsClickContextMenu = false, - options = {}, -}) { + view = 'dayGridMonth', + locale = 'en', + firstDay = 1, + events = [], + eventContent = null, + selectable = false, + eventClickEnabled = false, + eventDragEnabled = false, + eventResizeEnabled = false, + noEventsClickEnabled = false, + dateSelectEnabled = false, + dateClickEnabled = false, + viewDidMountEnabled = false, + dayMaxEvents = false, + moreLinkContent = null, + resources = [], + hasDateClickContextMenu = false, + hasDateSelectContextMenu = false, + hasEventClickContextMenu = false, + hasNoEventsClickContextMenu = false, + options = {}, + }) { return { calendarEl: null, @@ -40,69 +41,69 @@ export default function calendarWidget({ locale: locale, firstDay: firstDay, dayMaxEvents: dayMaxEvents, - selectable: hasDateSelectContextMenu || dateSelectEnabled, + 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 if (dateClickEnabled) { - settings.dateClick = (info) => { - this.$wire.onDateClick({ - date: info.date, - dateStr: info.dateStr, - allDay: info.allDay, - view: info.view, - resource: info.resource, - }); + })); + } 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 if (dateSelectEnabled) { - settings.select = (info) => { - this.$wire.onDateSelect({ - start: info.start, - startStr: info.startStr, - end: info.end, - endStr: info.endStr, - allDay: info.allDay, - view: info.view, - resource: info.resource, - }); + })); + } 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, + }); + } }; } @@ -220,20 +221,21 @@ export default function calendarWidget({ } }; - settings.viewDidMount = (info) => { - this.$wire.currentView = info; - }; + + 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 13146c7..5115d0b 100644 --- a/resources/views/widgets/calendar.blade.php +++ b/resources/views/widgets/calendar.blade.php @@ -5,6 +5,7 @@ $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()); @@ -66,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()), @@ -75,8 +79,6 @@ hasDateSelectContextMenu: @js($hasDateSelectContextMenu), hasEventClickContextMenu: @js($hasEventClickContextMenu), hasNoEventsClickContextMenu: @js($hasNoEventsClickContextMenu), - dateClickEnabled: @js($dateClickEnabled), - dateSelectEnabled: @js($dateSelectEnabled), options: @js($this->getOptions()), })" > diff --git a/src/Concerns/HandlesDateClick.php b/src/Concerns/HandlesDateClick.php index ac1e7cc..2ae6dda 100644 --- a/src/Concerns/HandlesDateClick.php +++ b/src/Concerns/HandlesDateClick.php @@ -6,10 +6,7 @@ trait HandlesDateClick { protected bool $dateClickEnabled = false; - public function onDateClick(array $info = []): void - { - - } + public function onDateClick(array $info = []): void {} public function dateClickEnabled(bool $enabled = true): static { diff --git a/src/Concerns/HandlesDateSelect.php b/src/Concerns/HandlesDateSelect.php index de75782..8ddada8 100644 --- a/src/Concerns/HandlesDateSelect.php +++ b/src/Concerns/HandlesDateSelect.php @@ -6,10 +6,7 @@ trait HandlesDateSelect { protected bool $dateSelectEnabled = false; - public function onDateSelect(array $info = []): void - { - - } + public function onDateSelect(array $info = []): void {} public function dateSelectEnabled(bool $enabled = true): static { 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 917f7fa..3db4850 100644 --- a/src/Widgets/CalendarWidget.php +++ b/src/Widgets/CalendarWidget.php @@ -14,6 +14,7 @@ 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; @@ -34,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; @@ -53,8 +57,6 @@ class CalendarWidget extends Widget implements HasActions, HasForms use HasOptions; use HasResources; use HasSchema; - use HandlesDateClick; - use HandlesDateSelect; use InteractsWithActions; use InteractsWithForms; use InteractsWithRecord; @@ -63,15 +65,8 @@ class CalendarWidget extends Widget implements HasActions, HasForms protected int | string | array $columnSpan = 'full'; - public array $currentView; - public function refreshRecords(): void { $this->dispatch('calendar--refresh'); } - - public function getView(): array - { - return $this->currentView; - } } From ed41be8dcf0ee7c46edcbf2b10ed1353247bbba7 Mon Sep 17 00:00:00 2001 From: Lukas Frey Date: Sat, 3 Aug 2024 16:08:56 +0200 Subject: [PATCH 10/10] chore: rebuild js Signed-off-by: Lukas Frey --- dist/js/calendar-widget.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/js/calendar-widget.js b/dist/js/calendar-widget.js index d881112..ddbaeba 100644 --- a/dist/js/calendar-widget.js +++ b/dist/js/calendar-widget.js @@ -1 +1 @@ -function $({view:o="dayGridMonth",locale:w="en",firstDay:E=1,events:b=[],eventContent:l=null,selectable:g=!1,eventClickEnabled:h=!1,eventDragEnabled:d=!1,eventResizeEnabled:i=!1,noEventsClickEnabled:y=!1,dateSelectEnabled:c=!1,dateClickEnabled:m=!1,viewDidMountEnabled:p=!1,dayMaxEvents:C=!1,moreLinkContent:v=null,resources:D=[],hasDateClickContextMenu:S=!1,hasDateSelectContextMenu:u=!1,hasEventClickContextMenu:k=!1,hasNoEventsClickContextMenu:f=!1,options:x={}}){return{calendarEl:null,init:async function(){this.calendarEl=this.$el;let t=this,n={view:o,resources:D,eventSources:[{events:(e,a,r)=>this.$wire.getEventsJs(e)}],locale:w,firstDay:E,dayMaxEvents:C,selectable:u||c,eventStartEditable:d,eventDurationEditable:i};S?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"}}))}:m&&(n.dateClick=e=>{this.$wire.onDateClick({date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource})}),u?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"}}))}:c&&(n.select=e=>{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}}),v!==null&&(n.moreLinkContent=e=>({html:t.getMoreLinkContent(e)})),h&&(n.eventClick=e=>{if(e.event.extendedProps.url){let a=e.event.extendedProps.url_target??"_blank";window.open(e.event.extendedProps.url,a)}else k?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})}),y&&(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,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()})},p&&(n.viewDidMount=e=>{this.$wire.onViewDidMount({view:e})}),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 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(v,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{$ 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};