fix - visualizzazione feste nazionali

app/Http/Livewire/Calendar.php

@@ -35,6 +35,9 @@ class Calendar extends Component
 
     public $motivation_id = null;
 
+    public $festivities = [];
+    public $css_festivities = '';
+
     public function mount()
     {
         $this->names = \App\Models\Calendar::orderBy('name')->groupBy('name')->pluck('name')->toArray();
@@ -73,26 +76,44 @@ class Calendar extends Component
             $this->records[] = $data;
         }
 
-        for ($anno = 2025; $anno <= 2040; $anno++) {
-
-            $color = "lightgrey";
-            $this->records[] = array('id' => 0, 'title' => 'Capodanno', 'start' => "$anno-01-01 00:00:00", 'end' => "$anno-01-01 23:59:59", 'color' => $color);
-            $this->records[] = array('id' => 0, 'title' => 'Epifania', 'start' => "$anno-01-06 00:00:00", 'end' => "$anno-01-06 23:59:59", 'color' => $color);
-            $this->records[] = array('id' => 0, 'title' => 'Festa della Liberazione', 'start' => "$anno-04-25 00:00:00", 'end' => "$anno-04-25 23:59:59", 'color' => $color);
-            $this->records[] = array('id' => 0, 'title' => 'Festa del Lavoro', 'start' => "$anno-05-01 00:00:00", 'end' => "$anno-05-01 23:59:59", 'color' => $color);
-            $this->records[] = array('id' => 0, 'title' => 'Festa della Repubblica', 'start' => "$anno-06-02 00:00:00", 'end' => "$anno-06-02 23:59:59", 'color' => $color);
-            $this->records[] = array('id' => 0, 'title' => 'Ferragosto', 'start' => "$anno-08-15 00:00:00", 'end' => "$anno-08-15 23:59:59", 'color' => $color);
-            $this->records[] = array('id' => 0, 'title' => 'Ognissanti', 'start' => "$anno-11-01 00:00:00", 'end' => "$anno-11-01 23:59:59", 'color' => $color);
-            $this->records[] = array('id' => 0, 'title' => 'Immacolata Concezione', 'start' => "$anno-12-08 00:00:00", 'end' => "$anno-12-08 23:59:59", 'color' => $color);
-            $this->records[] = array('id' => 0, 'title' => 'Natale', 'start' => "$anno-12-25 00:00:00", 'end' => "$anno-12-25 23:59:59", 'color' => $color);
-            $this->records[] = array('id' => 0, 'title' => 'Santo Stefano', 'start' => "$anno-12-26 00:00:00", 'end' => "$anno-12-26 23:59:59", 'color' => $color);
+        for ($anno = 2025; $anno <= 2036; $anno++) {
+
+            // $background_color = "transparent";
+            // $color = "black";
+            $this->records[] = array('id' => 0, 'title' => 'Capodanno', 'allDay' => true, 'start' => "$anno-01-01 00:00:00", 'end' => "$anno-01-01 23:59:59", 'classNames' => ["festivity"]);
+            $this->records[] = array('id' => 0, 'title' => 'Epifania', 'allDay' => true, 'start' => "$anno-01-06 00:00:00", 'end' => "$anno-01-06 23:59:59", 'classNames' => ["festivity"]);
+            $this->records[] = array('id' => 0, 'title' => 'Festa della Liberazione', 'allDay' => true, 'start' => "$anno-04-25 00:00:00", 'end' => "$anno-04-25 23:59:59", 'classNames' => ["festivity"]);
+            $this->records[] = array('id' => 0, 'title' => 'Festa del Lavoro', 'allDay' => true, 'start' => "$anno-05-01 00:00:00", 'end' => "$anno-05-01 23:59:59", 'classNames' => ["festivity"]);
+            $this->records[] = array('id' => 0, 'title' => 'Festa della Repubblica', 'allDay' => true, 'start' => "$anno-06-02 00:00:00", 'end' => "$anno-06-02 23:59:59", 'classNames' => ["festivity"]);
+            $this->records[] = array('id' => 0, 'title' => 'Ferragosto', 'allDay' => true, 'start' => "$anno-08-15 00:00:00", 'end' => "$anno-08-15 23:59:59", 'classNames' => ["festivity"]);
+            $this->records[] = array('id' => 0, 'title' => 'Ognissanti', 'allDay' => true, 'start' => "$anno-11-01 00:00:00", 'end' => "$anno-11-01 23:59:59", 'classNames' => ["festivity"]);
+            $this->records[] = array('id' => 0, 'title' => 'Immacolata Concezione', 'allDay' => true, 'start' => "$anno-12-08 00:00:00", 'end' => "$anno-12-08 23:59:59", 'classNames' => ["festivity"]);
+            $this->records[] = array('id' => 0, 'title' => 'Natale', 'allDay' => true, 'start' => "$anno-12-25 00:00:00", 'end' => "$anno-12-25 23:59:59", 'classNames' => ["festivity"]);
+            $this->records[] = array('id' => 0, 'title' => 'Santo Stefano', 'allDay' => true, 'start' => "$anno-12-26 00:00:00", 'end' => "$anno-12-26 23:59:59", 'classNames' => ["festivity"]);
 
             $pasqua = date("Y-m-d", easter_date($anno));
-            $this->records[] = array('id' => 0, 'title' => 'Pasqua', 'start' => "$pasqua 00:00:00", 'end' => "$pasqua 23:59:59", 'color' => $color);
+            $this->records[] = array('id' => 0, 'title' => 'Pasqua', 'allDay' => true, 'start' => "$pasqua 00:00:00", 'end' => "$pasqua 23:59:59", 'classNames' => ["festivity"]);
             $pasquetta = date("Y-m-d", strtotime("$pasqua +1 day"));
-            $this->records[] = array('id' => 0, 'title' => 'Pasquetta', 'start' => "$pasquetta 00:00:00", 'end' => "$pasquetta 23:59:59", 'color' => $color);
+            $this->records[] = array('id' => 0, 'title' => 'Pasquetta', 'allDay' => true, 'start' => "$pasquetta 00:00:00", 'end' => "$pasquetta 23:59:59", 'classNames' => ["festivity"]);
+
+            $this->festivities[] = "$anno-01-01";
+            $this->festivities[] = "$anno-01-06";
+            $this->festivities[] = "$anno-04-25";
+            $this->festivities[] = "$anno-05-01";
+            $this->festivities[] = "$anno-06-02";
+            $this->festivities[] = "$anno-08-15";
+            $this->festivities[] = "$anno-11-01";
+            $this->festivities[] = "$anno-12-08";
+            $this->festivities[] = "$anno-12-25";
+            $this->festivities[] = "$anno-12-26";
+            $this->festivities[] = "$pasqua";
+            $this->festivities[] = "$pasquetta";
         }
 
+        $this->festivities = array_map(function($date) {
+            return "[data-date='$date']";
+        }, $this->festivities);
+        $this->css_festivities = implode(", ", $this->festivities);
         
         if ($reload)
             $this->emit('reload-calendar', ["'" . json_encode($this->records) . "'"]);

public/css/calendar.css

@@ -95,6 +95,19 @@ body input[type=checkbox]:checked {
     border-radius: 2px;
 }
 
+body .fc-event.festivity {
+    background: none;
+    border: none;
+    pointer-events: none;
+}
+
+body .fc-event.festivity .fc-event-title-container {
+    text-align: center;
+    color: #34454e;
+    font-weight: bold;
+    margin-top: 9px;
+}
+
 @media (max-width: 1024px) { 
     body .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk .fc-button {
         font-size: 14px;

resources/views/livewire/calendar.blade.php

@@ -1,3 +1,9 @@
+<style>
+    {!! $css_festivities !!} {
+        background: #dcf1ff !important;
+    }
+</style>
+
 <div class="col card--ui" id="card--dashboard">