我已经设法用FullCalendar 5作为Livewire组件构建了一个Laravel 9项目。我构建了一个单一的模态，当日历上的开放日期被点击（激发“select”函数）和现有事件被点击（激发eventClick函数）时，该模态被激发。eventClick函数在模态的输入字段中填充来自数据库的事件数据。
我需要帮助获取模态中updateEvent和addEvent函数上的“保存”按钮，以分别创建或编辑数据库中的信息。
以下是刀片格式的完整日历视图：
<style>
#calendar-container {
display: grid;
grid-template-columns: 200px 1fr;
padding: 20px;
}
#events {
grid-column: 1;
}
#calendar {
grid-column: 2;
height: 700px;
}
.dropEvent {
background-color: DodgerBlue;
color: white;
padding: 5px 16px;
margin-bottom: 10px;
text-align: center;
display: inline-block;
font-size: 16px;
border-radius: 4px;
cursor:pointer;
}
</style>
<div>
@include('livewire.eventmodal')
<div>
<!-- sidebar -->
<div id="calendar-container" wire:ignore>
<div id="events">
<div data-event='{"title":"Evénement A"}' class="dropEvent">Event One Drag</div>
<div data-event='{"title":"Evénement B"}' class="dropEvent">Event Two Draggable</div>
</div>
<div id="calendar"></div>
</div>
</div>
</div>
@push('scripts')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.10.1/main.min.js'></script>
<script>
create_UUID = () => {
let dt = new Date().getTime();
const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
let r = (dt + Math.random() * 16) % 16 | 0;
dt = Math.floor(dt / 16);
return (c == 'x' ? r :(r&0x3|0x8)).toString(16);
});
return uuid;
}
document.addEventListener('livewire:load', function () {
const Calendar = FullCalendar.Calendar;
const calendarEl = document.getElementById('calendar');
const Draggable = FullCalendar.Draggable;
new Draggable(document.getElementById('events'), {
itemSelector: '.dropEvent'
});
const calendar = new Calendar(calendarEl, {
headerToolbar: {
left: 'promptResource prev,next today',
center: 'title',
right: 'resourceMonth,dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
views: {
resourceMonth: {
type: 'resourceTimelineMonth',
buttonText: 'personnel'
}
},
customButtons: {
promptResource: {
text: "+ personnel",
click: function() {
var title = prompt("Name");
if (title) {
calendar.addResource({
title: title
});
fetch("add_resources.php", {
method: "POST",
headers: {
Accept: "application/json"
},
body: encodeFormData({ title: title })
})
.then(response => console.log(response))
.catch(error => console.log(error));
}
}
}
},
initialView: 'resourceTimelineMonth',
locale: '{{ config('app.locale') }}',
events: JSON.parse(@this.events),
resourceAreaHeaderContent: 'Personnel',
resources: JSON.parse(@this.resources),
//'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
editable: true,
eventResize: info => @this.eventChange(info.event),
eventDrop: info => @this.eventChange(info.event),
eventReceive: info => {
const id = create_UUID();
info.event.setProp('id', id);
@this.eventAdd(info.event);
},
selectable: true,
select: function(info) {
$('#eventModal').modal('show');
},
eventClick: function(info, event) {
// Display the modal and set the values to the event values.
$('#updateEventModal').modal('show');
$('#updateEventModal').find('#title').val(info.event.title);
$('#updateEventModal').find('#acronym').val(info.event.extendedProps.acronym);
$('#updateEventModal').find('#city').val(info.event.extendedProps.city);
$('#updateEventModal').find('#venue').val(info.event.extendedProps.venue);
$('#updateEventModal').find('#value').val(info.event.extendedProps.value);
$('#updateEventModal').find('#start').val(info.event.start);
$('#updateEventModal').find('#end').val(info.event.end);
$('#calendar').calendar ('updateEvent', event);
},
});
calendar.render();
});
</script>
<link href='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.11.3/main.min.css' rel='stylesheet' />
@endpush下面是日历组件：
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Event;
use App\Models\Resource;
use Illuminate\Support\Arr;
class Calendar extends Component
{
public $events, $resources, $title, $acronym, $city, $venue, $value ;
public function eventChange ( $event )
{
$e=Event::find($event['id']) ;
$e->start=$event['start'] ;
if(Arr::exists($event,'end')) {
$e->end=$event['end'];
}
$e->save();
}
public function saveEvent()
{
$validatedData = $this->validate();
Event::create($validatedData);
session()->flash('message','Event Added Successfully');
$this->resetInput();
$this->dispatchBrowserEvent('close-modal');
}
public function render()
{
$this->events=json_encode(Event::all());
$this->resources=json_encode(Resource::all());
return view('livewire.calendar');
}
public function eventAdd ( $event )
{
Event::create ( $event );
}
public function eventRemove ( $id )
{
Event::destroy ( $id );
}
public function resourceAdd ( $resources )
{
Resource::create ( $resources );
}
public function resourceRemove ( $id )
{
Resource::destroy ( $id );
}
}
1条答案
按热度按时间bvhaajcl1#
我设法在livewire组件中构建了AddEvent模态和EditEvent模态。
以下是我的刀片式服务器视图：
下面是我的EVENT控制器：
以下是相关的路线：
由于以下问题，这不是理想的解决方案：
1.当您通过单击某个日期或日期范围来选择日历上的事件时，select方法不会从日历中获取实际日期参数。