event calendar

app/Http/Livewire/BitcoinEvent/BitcoinEventTable.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Livewire\BitcoinEvent;
 
+use App\Models\BitcoinEvent;
 use App\Models\Country;
 use Livewire\Component;
 
@@ -10,6 +11,27 @@ class BitcoinEventTable extends Component
     public Country $country;
     public function render()
     {
-        return view('livewire.bitcoin-event.bitcoin-event-table');
+        return view('livewire.bitcoin-event.bitcoin-event-table', [
+            'events' => BitcoinEvent::query()
+                                   ->get()
+                                   ->map(fn($event) => [
+                                       'id'          => $event->id,
+                                       'startDate'   => $event->from,
+                                       'endDate'     => $event->to,
+                                       'location'    => $event->title,
+                                       'description' => $event->description,
+                                   ]),
+        ]);
+    }
+
+    public function popover($content, $ids)
+    {
+        return to_route('bitcoinEvent.table.bitcoinEvent', [
+            'country' => $this->country->code, 'table' => [
+                'filters' => [
+                    'byid' => $ids,
+                ]
+            ]
+        ]);
     }
 }

app/Http/Livewire/Tables/BitcoinEventTable.php

@@ -6,6 +6,7 @@ use App\Models\BitcoinEvent;
 use Illuminate\Database\Eloquent\Builder;
 use Rappasoft\LaravelLivewireTables\DataTableComponent;
 use Rappasoft\LaravelLivewireTables\Views\Column;
+use Rappasoft\LaravelLivewireTables\Views\Filters\TextFilter;
 
 class BitcoinEventTable extends DataTableComponent
 {
@@ -34,6 +35,17 @@ class BitcoinEventTable extends DataTableComponent
              ->setPerPage(10);
     }
 
+    public function filters(): array
+    {
+        return [
+            TextFilter::make('Event by ID', 'byid')
+                      ->hiddenFromMenus()
+                      ->filter(function (Builder $builder, string $value) {
+                          $builder->whereIn('bitcoin_events.id', str($value)->explode(','));
+                      }),
+        ];
+    }
+
     public function columns(): array
     {
         return [

resources/views/livewire/bitcoin-event/bitcoin-event-table.blade.php

@@ -4,6 +4,72 @@
     {{-- MAIN --}}
     <section class="w-full mb-12">
         <div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4" id="table">
+            <div class="">
+
+                <link rel="stylesheet" type="text/css"
+                      href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css"/>
+                <script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script>
+                <script src="https://unpkg.com/js-year-calendar@latest/locales/js-year-calendar.de.js"></script>
+
+                <style>
+                    .calendar .calendar-header {
+                        background-color: #F7931A;
+                        color: white;
+                        border: 0;
+                    }
+
+                    .calendar table.month th.month-title {
+                        color: #fff;
+                    }
+
+                    .calendar table.month th.day-header {
+                        color: #fff;
+                    }
+
+                    .calendar table.month td.day .day-content {
+                        color: #fff;
+                    }
+                </style>
+
+                <div
+                    wire:ignore
+                    x-data="{
+                        calendar: null,
+                        init() {
+                            let events = {{ Js::from($events) }};
+                            events = events.map(function(e){
+                                return {id: e.id, startDate: new Date(e.startDate), endDate: new Date(e.endDate), location: e.location, description: e.description}
+                            })
+
+                            new Calendar(this.$refs.calendar, {
+                                style: 'background',
+                                language: 'de',
+                                dataSource: events,
+                                clickDay: function(e) {
+                                    if(e.events.length > 0) {
+                                        var content = '';
+                                        var ids = [];
+
+                                        for(var i in e.events) {
+                                            ids.push(e.events[i].id);
+                                            content += '<div class=\'event-tooltip-content\'>'
+                                            + '<div class=\'event-name\'>' + e.events[i].location + '</div>'
+                                            + '<div class=\'event-location\'>' + e.events[i].description + '</div>'
+                                            + '</div>';
+                                        }
+                                        console.log(content);
+
+                                        $wire.call('popover', content, ids.join(','));
+                                    }
+                                },
+                            });
+                        },
+                    }"
+                >
+                    <div x-ref="calendar"></div>
+                </div>
+            </div>
+
             <livewire:tables.bitcoin-event-table :country="$country->code"/>
         </div>
     </section>