Merge pull request #116 from diegoldev/add-view-property-to-date-sele…

…ct-event Add view property to date select event
saade · Oct 8, 2023 · 7f14015 · 7f14015
2 parents 8a3babd + e200e74
commit 7f14015
Show file tree

Hide file tree

Showing 4 changed files with 29,163 additions and 17 deletions.
diff --git a/dist/filament-fullcalendar.css b/dist/filament-fullcalendar.css
@@ -1 +1,131 @@
-.resize{resize:both}.filament-fullcalendar{--fc-small-font-size:0.85em;--fc-page-bg-color:#fff;--fc-neutral-bg-color:#d0d0d04d;--fc-neutral-text-color:grey;--fc-border-color:rgba(var(--gray-200));--fc-button-text-color:#fff;--fc-button-bg-color:rgba(var(--primary-600));--fc-button-border-color:rgba(var(--primary-600));--fc-button-hover-bg-color:rgba(var(--primary-500));--fc-button-hover-border-color:rgba(var(--primary-500));--fc-button-active-bg-color:rgba(var(--primary-500));--fc-button-active-border-color:rgba(var(--primary-500));--fc-event-bg-color:rgba(var(--primary-600));--fc-event-border-color:rgba(var(--primary-600));--fc-event-text-color:#fff;--fc-event-selected-overlay-color:#00000040;--fc-more-link-bg-color:#d0d0d0;--fc-more-link-text-color:inherit;--fc-event-resizer-thickness:8px;--fc-event-resizer-dot-total-width:8px;--fc-event-resizer-dot-border-width:1px;--fc-non-business-color:#d7d7d74d;--fc-bg-event-color:#8fdf82;--fc-bg-event-opacity:0.3;--fc-highlight-color:rgba(var(--primary-500),0.1);--fc-today-bg-color:rgba(var(--primary-500),0.2);--fc-now-indicator-color:red}html.dark .filament-fullcalendar{--fc-border-color:rgba(var(--gray-800));--fc-button-bg-color:rgba(var(--primary-500));--fc-button-border-color:rgba(var(--primary-600));--fc-button-hover-bg-color:rgba(var(--primary-400));--fc-button-hover-border-color:rgba(var(--primary-500));--fc-button-active-bg-color:rgba(var(--primary-400));--fc-button-active-border-color:rgba(var(--primary-500));--fc-event-bg-color:rgba(var(--primary-500));--fc-event-border-color:rgba(var(--primary-600))}.filament-fullcalendar .fc-toolbar-chunk>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.filament-fullcalendar .fc-toolbar-title{font-size:1.125rem!important;line-height:1.25rem}@media (min-width:768px){.filament-fullcalendar .fc-toolbar-title{font-size:1.875rem!important;line-height:2.25rem!important}}.filament-fullcalendar.fc .fc-button{min-height:2.25rem;border-radius:.5rem;padding:.25rem 6px;font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid #0000;outline-offset:2px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@media (min-width:768px){.filament-fullcalendar.fc .fc-button{padding-left:1rem;padding-right:1rem}}.filament-fullcalendar.fc .fc-button-primary:disabled{opacity:.7}.filament-fullcalendar.fc .fc-button-primary:not(:disabled).fc-button-active,.filament-fullcalendar.fc .fc-button-primary:not(:disabled):active{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filament-fullcalendar .fc-view table,.filament-fullcalendar .fc-view table th{border-top-left-radius:.75rem;border-top-right-radius:.75rem}
+.static {
+  position: static;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.resize {
+  resize: both;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.filament-fullcalendar {
+  --fc-small-font-size: 0.85em;
+  --fc-page-bg-color: #fff;
+  --fc-neutral-bg-color: rgba(208, 208, 208, 0.3);
+  --fc-neutral-text-color: #808080;
+  --fc-border-color: rgba(var(--gray-200));
+  --fc-button-text-color: #fff;
+  --fc-button-bg-color: rgba(var(--primary-600));
+  --fc-button-border-color: rgba(var(--primary-600));
+  --fc-button-hover-bg-color: rgba(var(--primary-500));
+  --fc-button-hover-border-color: rgba(var(--primary-500));
+  --fc-button-active-bg-color: rgba(var(--primary-500));
+  --fc-button-active-border-color: rgba(var(--primary-500));
+  --fc-event-bg-color: rgba(var(--primary-600));
+  --fc-event-border-color: rgba(var(--primary-600));
+  --fc-event-text-color: #fff;
+  --fc-event-selected-overlay-color: rgba(0, 0, 0, 0.25);
+  --fc-more-link-bg-color: #d0d0d0;
+  --fc-more-link-text-color: inherit;
+  --fc-event-resizer-thickness: 8px;
+  --fc-event-resizer-dot-total-width: 8px;
+  --fc-event-resizer-dot-border-width: 1px;
+  --fc-non-business-color: rgba(215, 215, 215, 0.3);
+  --fc-bg-event-color: rgb(143, 223, 130);
+  --fc-bg-event-opacity: 0.3;
+  --fc-highlight-color: rgba(var(--primary-500), 0.1);
+  --fc-today-bg-color: rgba(var(--primary-500), 0.2);
+  --fc-now-indicator-color: red;
+}
+
+html.dark .filament-fullcalendar {
+  --fc-border-color: rgba(var(--gray-800));
+  --fc-button-bg-color: rgba(var(--primary-500));
+  --fc-button-border-color: rgba(var(--primary-600));
+  --fc-button-hover-bg-color: rgba(var(--primary-400));
+  --fc-button-hover-border-color: rgba(var(--primary-500));
+  --fc-button-active-bg-color: rgba(var(--primary-400));
+  --fc-button-active-border-color: rgba(var(--primary-500));
+  --fc-event-bg-color: rgba(var(--primary-500));
+  --fc-event-border-color: rgba(var(--primary-600));
+}
+
+.filament-fullcalendar .fc-toolbar-chunk > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
+.filament-fullcalendar .fc-toolbar-title {
+  font-size: 1.125rem !important;
+  line-height: 1.25rem;
+}
+
+@media (min-width: 768px) {
+  .filament-fullcalendar .fc-toolbar-title {
+    font-size: 1.875rem !important;
+    line-height: 2.25rem !important;
+  }
+}
+
+.filament-fullcalendar.fc .fc-button {
+  min-height: 2.25rem;
+  border-radius: 0.5rem;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+@media (min-width: 768px) {
+  .filament-fullcalendar.fc .fc-button {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+.filament-fullcalendar.fc .fc-button-primary:disabled {
+  opacity: 0.7;
+}
+
+.filament-fullcalendar.fc .fc-button-primary:not(:disabled).fc-button-active,
+.filament-fullcalendar.fc .fc-button-primary:not(:disabled):active {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.filament-fullcalendar .fc-view table,
+.filament-fullcalendar .fc-view table th {
+  border-top-left-radius: 0.75rem;
+  border-top-right-radius: 0.75rem;
+}
diff --git a/dist/filament-fullcalendar.js b/dist/filament-fullcalendar.js
diff --git a/resources/js/filament-fullcalendar.js b/resources/js/filament-fullcalendar.js
@@ -69,13 +69,13 @@ export default function fullcalendar({
                         revert()
                     }
                 },
-                dateClick: ({ dateStr, allDay }) => {
+                dateClick: ({ dateStr, allDay, view }) => {
                     if (!selectable) return;
-                    this.$wire.onDateSelect(dateStr, null, allDay)
+                    this.$wire.onDateSelect(dateStr, null, allDay, view)
                 },
-                select: ({ startStr, endStr, allDay }) => {
+                select: ({ startStr, endStr, allDay, view }) => {
                     if (!selectable) return;
-                    this.$wire.onDateSelect(startStr, endStr, allDay)
+                    this.$wire.onDateSelect(startStr, endStr, allDay, view)
                 },
             })
 
@@ -101,4 +101,4 @@ const availablePlugins = {
     'rrule': rrulePlugin,
     'moment': momentPlugin,
     'momentTimezone': momentTimezonePlugin,
-}
+}
diff --git a/src/Widgets/Concerns/InteractsWithEvents.php b/src/Widgets/Concerns/InteractsWithEvents.php
@@ -81,9 +81,10 @@ public function onEventResize(array $event, array $oldEvent, array $relatedEvent
      * @param string $start An ISO8601 string representation of the start date. It will have a timezone offset similar to the calendar’s timeZone. If selecting all-day cells, it won’t have a time nor timezone part.
      * @param string $end An ISO8601 string representation of the end date. It will have a timezone offset similar to the calendar’s timeZone. If selecting all-day cells, it won’t have a time nor timezone part.
      * @param bool $allDay Whether the selection happened on all-day cells.
+     * @param array $view A View array that contains information about a calendar view, such as title and date range.
      * @return void
      */
-    public function onDateSelect(string $start, ?string $end, bool $allDay): void
+    public function onDateSelect(string $start, ?string $end, bool $allDay, ?array $view): void
     {
         [$start, $end] = $this->calculateTimezoneOffset($start, $end, $allDay);