Feb 26, 2024
0
Level 1
My FullCalendar does not refresh events
Hello,
I've got 2 Livewire components in a blade view:
- select-house
- fullcalendar They are NOT nested.
"select-house" display a select option with house name, id.
"fullcalendar" display a FullCalendar with events according of house_id which is defined in select-house.
Both components are initialy displayed correctly in the browser exepted that fullcalendar does NOT refresh events when I select another house.
Here is my blade view for 2 components:
<div class="col-md-6 mx-auto form-group">
@livewire('select-house')
</div>
<div class="col-md-8 col-lg-5 mx-auto">
@livewire('full-calendar')
</div>
Here is my select-house Livewire blade:
<div class="form-group row">
<div class="col-md-6">
<label class="control-label " for="house">Votre choix de maison:</label><sup>*</sup>
<select class="form-control input-lg" wire:model="houseId">
@foreach($houses as $house)
<option class="form-control" value="{{$house->id}}" wire:key="{{$house->id}}" wire:click="houseSelected({{$house->id}})" >{{$house->name }} {{$house->capacity }}</option>
@endforeach
</select>
</div>
</div>
Here is the class :
namespace App\Http\Livewire;
use Livewire\Component;
use App\House;
class SelectHouse extends Component
{
public $houseId = 1;
public $houses;
public function mount()
{
$this->houses = House::all();
$this->houseId = House::find($this->houseId)->id;
}
public function houseSelected($id)
{
$this->emit('houseSelected',$id);
}
public function render()
{
return view('livewire.select-house');
}
}
Related to fullcalendar component :
View :
<div>
{{$houseId}}
<!-- Load Calendar -->
<div id="fullCalendar" class="mt-5 mb-3" wire:ignore ></div>
<!-- Display Legend-->
<div>
<table id="legend" style="width:100%;text-align:right">
<tr>
<td>
<tr>
<td>{{ __('sign-up.TXT_TARIF_LOW') }} </td>
<td style="width:30px;background: {{ $seasonLow[0]['color']}}"></td>
<td> </td>
<td>{{ __('sign-up.TXT_TARIF_MID') }} </td>
<td style="width:30px;background: {{ $seasonMid[0]['color']}}"></td>
</tr>
<tr>
<td>{{ __('sign-up.TXT_TARIF_HIGH') }} </td>
<td style="width:30px;background: {{ $seasonHigh[0]['color']}}"></td>
<td> </td>
<td>{{ __('sign-up.TXT_TARIF_NOEL') }} </td>
<td style="width:30px;background: {{ $seasonNoel[0]['color']}}"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>{{ __('sign-up.TXT_TARIF_NY') }} </td>
<td style="width:30px;background: {{ $seasonNY[0]['color']}}"></td>
</tr>
</td>
<td>
<tr>
<td>{{ __('sign-up.TXT_TARIF_BOOKED') }} </td>
<td style="width:30px;background: {{ $booked->color}}"></td>
</tr>
<tr>
<td>{{ __('sign-up.TXT_TARIF_OPTIONAL') }} </td>
<td style="width:30px;background: {{ $optional->color}}"></td>
</tr>
</td>
</tr>
</table>
</div>
@push('scripts')
<script>
$(document).ready(function () {
var path = location.pathname;
var lang = path.substr(1,2), value; //retreive lang value from url
var y = new Date().getFullYear()+1;
var calendarEl = document.getElementById('fullCalendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: lang,
initialView: 'dayGridMonth',
//height : 500,
aspectRatio: 1,
initialDate: new Date(),
firstDay: 1,
events : @json($fusion),
validRange: {
end: y + '-12-31'
}
});
calendar.render();
Livewire.on('refreshCalendar', function(){
calendar.refetchEvents()
});
});
</script>
@endpush
</div>
And the class :
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\House;
use App\Booking;
use App\Season;
use App\Prices;
class FullCalendar extends Component
{
public $fusion;
public $seasonLow;
public $seasonMid;
public $seasonHigh;
public $seasonNoel;
public $seasonNY;
public $booked;
public $optional;
public $houseId = 1;
protected $listeners = ['houseSelected'];
public function mount()
{
$this->houseSelected($this->houseId);
}
public function houseSelected($id)
{
$this->houseId = $id;
$house_id = House::find($id);
$this->booked = Season::where('name', 'Réservation')->first();
$this->optional = Season::where('name', 'Option')->first();
$events = $this->getBookingData($house_id->id, 2, $this->booked->color);
$option = $this->getBookingData($house_id->id, 1, $this->optional->color);
//necessary for showing background events in fullcalendar
$this->seasonLow = $this->season(1, $house_id->id);
$this->seasonMid = $this->season(2, $house_id->id);
$this->seasonHigh = $this->season(3, $house_id->id);
$this->seasonNoel = $this->season(4, $house_id->id);
$this->seasonNY = $this->season(5, $house_id->id);
$this->fusion = array_merge($events, $option, $this->seasonLow, $this->seasonMid, $this->seasonHigh, $this->seasonNoel, $this->seasonNY);
$this->emit('refreshCalendar',$this->fusion);
}
public function getBookingData($house_id, $status_id, $color)
{
$bookings = Booking::where('house_id', $house_id)
->where('status_id', $status_id)
->where('arrival', '>', date('Y-01-01'))
->where('departure', '>', date('Y-01-01'))
->get(['arrival as start', 'departure as end'])
->toArray();
foreach ($bookings as $key => $booking) {
$booking['color'] = $color;
$bookings[$key] = $booking;
}
return $bookings;
}
public function season($season_id, $house_id) {
$season = Prices::join('seasons', 'prices.season_id', '=', 'seasons.id')
->select('prices.start', 'prices.end', 'seasons.color')
->where('prices.season_id', $season_id)
->where('prices.house_id', $house_id)
->get()->toArray();
foreach($season as $key => $event) {
$event['display'] = 'background';
$season[$key] = $event;
}
return $season;
}
public function render()
{
return view('livewire.full-calendar');
}
}
If someone can tell me why the calendar does not display the events related to house ID. Thanks a lot for help.
Please or to participate in this conversation.