Как исправить для полнокалендарного Laravel PHP, что страница видит только белый и панель навигации. Как исправить?

ProgramBox

Как исправить для полнокалендарного Laravel PHP, что страница видит только белый и панель навигации. Как исправить?

Post author:admin
Запись опубликована:10 марта, 2023
Post category:Вопросы по программированию

#php #laravel #fullcalendar

#php #laravel #полнокалендарный

Вопрос:

Я давно не решал эту проблему подобным образом. Может быть, вы можете помочь с этой проблемой?

Я все исправил на контроллере, все хорошо подключается. Но показывает только белый фон и навигацию. Как это исправить?

папка eventos/index.blade.php

  @extends('layouts.main')

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{asset('public/fullcalendar/core/main.css')}}"> 
<link rel="stylesheet" href="{{asset('public/fullcalendar/daygrid/main.css')}}"> 
<link rel="stylesheet" href="{{asset('public/fullcalendar/list/main.css')}}"> 
<link rel="stylesheet" href="{{asset('public/fullcalendar/timegrid/main.css')}}"> 

<script src="{{asset('public/fullcalendar/core/main.js')}}" defer> </script>
<script src="{{asset('public/fullcalendar/interaction/main.js')}}"defer> </script>
<script src="{{asset('public/fullcalendar/daygrid/main.js')}}"defer> </script>
<script src="{{asset('public/fullcalendar/list/main.js')}}"defer> </script>

<script src="{{asset('public/fullcalendar/timegrid/main.js')}}"defer> </script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid', 'interaction' ],

    header:{
        left:'prev,next today',
        center:'title',
        right:'dayGridMonth,dayGridWeek'
    },

    dateClick:function(info){

        limitFormat();

        $('#txtData').val(info.dateStr);

        $('#btnAgree').prop("disabled", false);
        $('#btnEdit').prop("disabled", true);
        $('#btnDelete').prop("disabled", true);

        $('#exampleModal').modal();
        //console.log(info);

       // calendar.addEvent({title:"Bandymas x", date:info.dateStr});
    },

    eventClick:function(info){

        $('#btnAgree').prop("disabled", true);
        $('#btnEdit').prop("disabled", false);
        $('#btnDelete').prop("disabled", false);



        console.log(info);
        console.log(info.event.title);
        console.log(info.event.start);

        console.log(info.event.end);
        console.log(info.event.textColor);
        console.log(info.event.backgroundColor);

        console.log(info.event.extendedProps.descripcion);

       // $('#txtID').val(info.event.id);
        //$('#txtTitle').val(info.event.title);

       // mes = (info.event.start.getMonth() 1);
       // dia = (info.event.start.getDate());
        //anio = (info.event.start.getFullYear());

       // mes=(mes<10)?"0" mes:mes;
       // dia=(dia<10)?"0" dia:dia;

       // hora = (info.event.start.getHours() ":" info.event.start.getMinutes());



       // $('#txtData').val(anio "-" mes "-" dia);
       // $('#txtHour').val(hora);
       // $('#txtColor').val(info.event.backgroundColor);

       // $('#txtDescripcion').val(info.event.extendedProps.descripcion);



        $('#exampleModal').modal();
    },

    /*events:[
        {
            title:"Bandymas 1",
            start:"2020-10-03",
            descripcion:"LKD"
        },{
            title:"Bandymas 2",
            start:"2020-10-07",
            end:"2020-10-13",
            color:"#FFCCAA",
            textColor:"#000000",
            descripcion:"LKD"
        }
    ] */

    events:"{{ url('/eventos/show') }}"
    
  });

  calendar.setOption('locale','Lt');

  calendar.render();

  
  $('#btnAgree').click(function(){

ObjEvento=recolectarDatosGUI("POST");

EnviarInformacion('', ObjEvento);
});

$('#btnDelete').click(function(){

ObjEvento=recolectarDatosGUI("DELETE");

EnviarInformacion('/' $('#txtID').val(), ObjEvento);
});

$('#btnEdit').click(function(){

ObjEvento=recolectarDatosGUI("PATCH");

EnviarInformacion('/' $('#txtID').val(),ObjEvento);
});

  

});




  function recolectarDatosGUI(method){

    dataEvent={
        id: $('#txtID').val(),
        title:$('#txtTitle').val(),
        descripcion:$('#txtDescripcion').val(),
        color:$('#txtColor').val(),
        textcolor:$('#txtForColor').val(),
        start:$('#txtData').val() " " $('#txtHour').val(),
        end:$('#txtData').val() " " $('#txtHour').val(),
        _token: '{!! csrf_token() !!}',
        '_method':method
    }
    return(dataEvent);
  }

    

    function EnviarInformacion(accion,objEvento){
        $.ajax(
            {
            type:"POST",
            url:"{{ url('/eventos') }}" accion,
            data:objEvento,
            success:function(msg){ 

                console.log(msg);
                $('#exampleModal').modal('toggle');
                calendar.refetchEvents();
                
                
                ;},
           // error:function(){
                //alert("Error...");
           // }
            }
        );
    }

    function limitFormat(){
        $('#txtID').val("");
        $('#txtTitle').val("");


        $('#txtData').val("");
        $('#txtHour').val("");
        $('#txtColor').val("");

        $('#txtDescripcion').val("");
    }   


</script>

@if(Session::has('success'))
    <div class="alter alter-danger">
        <p>{{Session::get('success')}}</p>
    </div>
@endif

<div class="container">
<div id="calendar"></div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Informacion</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">amp;times;</span>
          </button>
        </div>

        <form method="POST" action="{{action ('EventosController@store')}}">
            {{ csrf_field() }}

        <div class="modal-body">

        <div class="d-none">
            ID:
          <input type="text" name="txtID" id="txtID">
          <br>

          </div>
            <div class="form-row"> 
            <div class="form-group col-md-8">
           <label> Data:</label>
          <input type="text" name="txtData" id="txtData">
            </div>
            
          

                <div class="form-group col-md-8">
                <label>Pavadinimas:</label>
          <input type="text" class="form-control" name="txtTitle" id="txtTitle">
                </div>

                <div class="form-group col-md-8">
                <label>Valanda:</label>
          <input type="text" class="form-control" name="txtHour" id="txtHour">
                </div>
          
                <div class="form-group col-md-12">
               <label> Aprašymas:</label>
          <textarea name="txtDescripcion" class="form-control" id="txtDescripcion" cols="30" rows="3"></textarea>
                </div>
        
                <div class="form-group col-md-6">
                <label>Teksto spalva:</label>
          <input type="color" class="form-control" name="txtForColor" id="txtForColor">
                </div>
          
                <div class="form-group col-md-6">
                <label>Kategorija:</label>
          <input type="color" class="form-control" name="txtColor" id="txtColor">
                </div>
            
          
            </div>

           
        </div>
        <div class="modal-footer">
            <button id="btnAgree" class="btn btn-success" >Pridėti</button>
            <button id="btnEdit" class="btn btn-warning">Taisyti</button>
            <button id="btnDelete" class="btn btn-danger">Ištrinti</button>
            <button id="btnCancel" data-dismiss="modal" class="btn btn-default">Atšaukti</button>
        </div>
        </form>
      </div>
    </div>
  </div>
@endsection

EventosController.php

 <?php

namespace AppHttpControllers;
use Appevento;
use IlluminateHttpRequest;

class EventosController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return IlluminateHttpResponse
     */
    public function index()
    {
        //
        return view("eventos.index");
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return IlluminateHttpResponse
     */
    public function create()
    {
        //
        return view("eventos.index");
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @return IlluminateHttpResponse
     */
    public function store(Request $request)
    {
        //
        $datosEvento=request()->except(['_token','_method']);

        $this->validate($request,[
            'txtID' => 'required',
            'txtData' => 'required',
            'txtTitle' => 'required',
            'txtHour' => 'required',
            'txtDescripcion' => 'required',
            'txtColor' => 'required',
            'txtForColor' => 'required'
        ]);

        $emps = new evento;

        $emps->id = $request->input('txtID');
        $emps->start = $request->input('txtData');
        $emps->end = $request->input('txtData');
        $emps->title = $request->input('txtTitle');
        $emps->descripcion = $request->input('txtDescripcion');
        $emps->color = $request->input('txtColor');
        $emps->textColor = $request->input('txtForColor');
        
        $emps->save();

        return redirect()->route('eventos.index')->with('success', 'Data Inserted');
        
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function show($id)
    {
        //
        $data['eventos']=evento::all();
        return response()->json($data['eventos']);
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function update(Request $request, $id)
    {
        //
        $datosEvento=request()->except(['_token','_method']);
        $resquesto=evento::where('id','=',$id)->update($datosEvento);
        return response()->json($resquesto);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function destroy($id)
    {
        //
        $eventos=evento::FindOrFail($id);
        evento::destroy($id);
        return response()->json($id);
    }
}

web.php

 <?php

use AppHttpControllersEventosController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/


Auth::routes();

    Route::get('/', 'EventosController@index') ;

    Route::resource('eventos', 'EventosController');


Route::get('login/{lang?}', 'AuthLoginController@showLoginForm')->name('login')->middleware(['XSS']);
Route::get('register/{lang?}', 'AuthRegisterController@showRegistrationForm')->name('register')->middleware(['XSS']);
Route::get('password/reset/lang/{lang?}', 'AuthForgotPasswordController@showLinkRequestForm')->name('password.request2')->middleware(['XSS']);



Route::prefix('client')->as('client.')->group(function() {
    Route::get('login/{lang?}', 'AuthLoginController@showClientLoginForm')->name('login')->middleware(['XSS']);
    Route::post('login', 'AuthLoginController@clientLogin')->name('login')->middleware(['XSS']);
    Route::post('logout', 'ClientController@clientLogout')->name('logout')->middleware(['auth:client','XSS']);

    Route::get('/my-account',['as' => 'users.my.account','uses' =>'UserController@account'])->middleware(['auth:client','XSS']);
    Route::post('/my-account',['as' => 'update.account','uses' =>'UserController@update'])->middleware(['auth:client','XSS']);
    Route::post('/my-account/password',['as' => 'update.password','uses' =>'UserController@updatePassword'])->middleware(['auth:client','XSS']);
    Route::post('/my-account/billing',['as' => 'update.billing','uses' =>'ClientController@updateBilling'])->middleware(['auth:client','XSS']);
    Route::delete('/my-account',['as' => 'delete.avatar','uses' =>'UserController@deleteAvatar'])->middleware(['auth:client','XSS']);

    // project
    Route::get('/{slug}/projects',['as' => 'projects.index','uses' =>'ProjectController@index'])->middleware(['auth:client','XSS']);
    Route::get('/{slug}/projects/{id}',['as' => 'projects.show','uses' =>'ProjectController@show'])->middleware(['auth:client','XSS']);
    Route::get('/{slug}/projects/milestone/{id}',['as' => 'projects.milestone','uses' =>'ProjectController@milestone'])->middleware(['auth:client','XSS']);
    Route::post('/{slug}/projects/milestone/{id}',['as' => 'projects.milestone.store','uses' =>'ProjectController@milestoneStore'])->middleware(['auth:client','XSS']);
    Route::get('/{slug}/projects/milestone/{id}/show',['as' => 'projects.milestone.show','uses' =>'ProjectController@milestoneShow'])->middleware(['auth:client','XSS']);
    Route::get('/{slug}/projects/milestone/{id}/edit',['as' => 'projects.milestone.edit','uses' =>'ProjectController@milestoneEdit'])->middleware(['auth:client','XSS']);
    Route::put('/{slug}/projects/milestone/{id}',['as' => 'projects.milestone.update','uses' =>'ProjectController@milestoneUpdate'])->middleware(['auth:client','XSS']);
    Route::delete('/{slug}/projects/milestone/{id}',['as' => 'projects.milestone.destroy','uses' =>'ProjectController@milestoneDestroy'])->middleware(['auth:client','XSS']);
    Route::get('/{slug}/projects/{id}/file/{fid}',['as' => 'projects.file.download','uses' =>'ProjectController@fileDownload'])->middleware(['auth:client','XSS']);

Результат:

введите описание изображения здесь

1. добро пожаловать в so, какая-либо ошибка отображается в консоли?

2. В любом случае очень удивительно, что у вас была бы просто пустая страница, если бы не было какой-то консольной или сетевой ошибки

3. @ADyson Я исправил jQuery, но он по-прежнему показывает белый фон. Но я ввел ссылку eventos / show, там есть данные, которые подключаются к базе данных. Однако во время проектирования отображается только на белом фоне над панелью навигации: (Как это исправить?

4. @ADyson Я проверил, может быть, что-то ошибка консоли, но ничего не ошибка.

5. когда вы проверяете элемент, можете ли вы увидеть сгенерированные атрибуты html или что-то, что является частью вашего календаря и не отображается на странице

Вопрос:

Комментарии:

Вам также может понравиться

Вернуть фоновое изображение панели навигации к значению по умолчанию

В Terraform возможно ли изменить оболочку значений?

Календарь Flex4