Отправка формы с использованием начальной загрузки без jquery и отображения события в календаре - PullRequest
0 голосов
/ 23 апреля 2019

Я успешно отправил форму с помощью начальной загрузки в laravel. Теперь я хочу отобразить данные в календаре в соответствии с датой. Я пытался, но не смог получить событие в календарных днях.

событие.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 & 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">&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">&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']);

Ожидаемые результаты:

Имгур

Фактические результаты:

Имгур

База данных:

Imgur

Форма события после нажатия Добавить новое событие

Imgur

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...