#laravel #bootstrap-modal #form-submit
#laravel #bootstrap-modal #форма-отправка
Вопрос:
Я успешно отправил форму с использованием bootstrap modal в laravel.Теперь я хочу отобразить данные в календаре в соответствии с датой.Я пытался, но не смог получить событие в календарные дни.
event.blade.php
css
<link href="{{asset('admin-panel/assets/libs/fullcalendar/dist/fullcalendar.min.css')}}" rel="stylesheet" />
<link href="{{asset('admin-panel/assets/extra-libs/calendar/calendar.css')}}" rel="stylesheet" />
<link href="{{asset('admin-panel/dist/css/style.min.css')}}" rel="stylesheet">
<script src="{{asset('admin-panel/assets/libs/jquery/dist/jquery.min.js')}}"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="">
<div class="row">
<div class="col-lg-3 border-right p-r-0">
<div class="card-body border-bottom">
<h4 class="card-title m-t-10">Drag amp; Drop Event</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div id="calendar-events" class="">
<div class="calendar-events m-b-20" data-class="bg-info"><i class="fa fa-circle text-info m-r-10"></i>Event</div>
<div class="calendar-events m-b-20" data-class="bg-success"><i class="fa fa-circle text-success m-r-10"></i>Event</div>
<div class="calendar-events m-b-20" data-class="bg-danger"><i class="fa fa-circle text-danger m-r-10"></i>Event</div>
<div class="calendar-events m-b-20" data-class="bg-warning"><i class="fa fa-circle text-warning m-r-10"></i>Event</div>
</div>
<!-- checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="drop-remove">
<label class="custom-control-label" for="drop-remove">Remove after drop</label>
</div>
<a href="javascript:void(0)" data-toggle="modal" data-target="#add-new-event" class="btn m-t-20 btn-info btn-block waves-effect waves-light">
<i class="ti-plus"></i> Add New Event
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card-body b-l calender-sidebar">
<div id="calendar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BEGIN MODAL -->
<div class="modal none-border" id="my-event">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><strong>Add Event</strong></h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">amp;times;</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success save-event waves-effect waves-light">Create event</button>
<button type="button" class="btn btn-danger delete-event waves-effect waves-light" data-dismiss="modal">Delete</button>
</div>
</div>
</div>
</div>
<!-- Modal Add Category -->
<div class="modal fade none-border" id="add-new-event">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><strong>Add</strong> Event</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">amp;times;</button>
</div>
<form action="{{route('event.store')}}" method="post">
@csrf
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<label class="control-label">Date</label>
<input class="form-control form-white" name="date" type="date"/>
</div>
<div class="col-md-6">
<label class="control-label">Event Name</label>
<input class="form-control form-white" name="event" placeholder="Enter name" type="text"/>
<br>
</div>
<div class="col-md-12">
<label class="control-label">Description</label>
<input class="form-control form-white" name="description" placeholder="Enter description" type="text"/>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger waves-effect waves-light save-category">Save</button>
<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
javascript
@section('js')
<script src="{{asset('admin-panel/assets/libs/jquery/dist/jquery.min.js')}}"></script>
<script src="{{asset('admin-panel/dist/js/jquery-ui.min.js')}}"></script>
<script src="{{asset('admin-panel/assets/libs/bootstrap/dist/js/bootstrap.min.js')}}"></script>
<script src="{{asset('admin-panel/dist/js/custom.min.js')}}"></script>
<script src="{{asset('admin-panel/assets/libs/moment/min/moment.min.js')}}"></script>
<script src="{{asset('admin-panel/assets/libs/fullcalendar/dist/fullcalendar.min.js')}}"></script>
<script src="{{asset('admin-panel/dist/js/pages/calendar/cal-init.js')}}"></script>
@endsection
EventController.php
public function event()
{
$events=$this->getEventbyMonth(date('m'));
// dd($events);
return view('admin.calendar.event',compact('events'));
}
public function store(Request $request)
{
// dd($request->all);
$request -> validate([
'date' => 'required',
'event' => 'required',
]);
$event = new Event();
$event -> date = $request -> date;
$event -> event = $request -> event;
$event -> description = $request -> description;
$event ->save();
return redirect()->route('event');
}
private function getEventbyMonth($month)
{
return Event::whereMonth('date',$month)->get();
}
и мой маршрут выглядит так:
Route::get('event', ['as'=>'event', 'uses' => 'EventController@event']);
Route::post('event/store, ', ['as'=>'event.store', 'uses' => 'EventController@store']);
Ожидаемые результаты:
Фактические результаты:
База данных:
Форма события после нажатия кнопки добавить новое событие
Комментарии:
1. Добавьте соответствующую часть вашего Javascript, я не вижу, где вы извлекаете данные из своей базы данных и добавляете их в календарь!!!
2. @ZakariaAcharki да, я обновил вопрос. Вы можете проверить один раз. Код будет слишком длинным, поэтому я упомянул только ограниченный код.
3. Вы ожидаете найти 2 события в календаре, но я не вижу, чтобы вы их добавляли, так почему вы этого ожидаете? Если вы не можете показать нам свою попытку, мы не сможем помочь.
4. @ZakariaAcharki я попробовал и обновил раздел контроллера. Но как передать из блейд-файла. Пожалуйста, помогите мне, это испортило весь мой день.
5. Я думаю, что вы на правильном пути прямо сейчас, вы передаете события на блейд, теперь вам нужно проанализировать их в своем календаре, чтобы отобразить события … проверьте это руководство, это может помочь ( quickadminpanel.com/blog /… )