0

Hola tengo un problema con full Calendar, al momento de traer la data me pinta la fecha pero no reconoce la hora y por ende no pinta el color asignado.

introducir la descripción de la imagen aquí

  • En esta imagen esta como construyo mi data con laravel.

introducir la descripción de la imagen aquí

  • En esta imagen esta como esta el formato de mi fecha en mi bd.

introducir la descripción de la imagen aquí

  • En esta imagen esta mi codigo de vue.

introducir la descripción de la imagen aquí

  • En esta imagen esta mi vista y como ven no se visualiza el color asigando .

public function index(Request $request)
    {
        if (!$request->ajax())  return redirect('/');

        if (Auth::user()->rol[0]->name == "Administrador" || Auth::user()->rol[0]->name == "Supervisor") {
            $evento = DB::table('servicios as s')
                ->select(
                    's.id',
                    's.tipo_estado',
                    's.fecha_visita',
                    DB::raw("TIME_FORMAT(s.fecha_visita, '%h:%i:%s %p') as hora"),
                    'c.nombre AS cliente',
                )
                ->join('clientes as c', 's.idcliente', '=', 'c.id')
                ->join('users as u', 's.idusuario', '=', 'u.id')
                ->whereIn('s.tipo_estado', ['SIN ATENDER',  'EN PROCESO'])->get();

            foreach ($evento as $key => $v) {

                $data[$key] = array(
                    'color' => ($v->tipo_estado == "EN PROCESO") ? ("#0984e3") :   "#e17055",  //$backgroundColor,
                    'title' => $v->cliente,
                    'date' => $v->fecha_visita,
                    'hora' => $v->hora,
                    'id' => $v->id,
                    'allDay' => false,
                    'estado' => $v->tipo_estado,
                    'textColor' => "#ffffff"
                );
            }
        } else {

            $evento = DB::table('servicios as s')
                ->select(
                    's.id',
                    's.tipo_estado',
                    's.fecha_visita',
                    'c.nombre AS cliente',
                    DB::raw("TIME_FORMAT(s.fecha_visita, '%h:%i:%s %p') as hora"),
                )
                ->join('clientes as c', 's.idcliente', '=', 'c.id')
                ->join('users as u', 's.idusuario', '=', 'u.id')
                ->where('s.idusuario', '=', Auth::user()->id)
                ->whereIn('s.tipo_estado', ['SIN ATENDER',  'EN PROCESO'])->get();

            foreach ($evento as $key => $v) {

                $data[$key] = array(
                    'color' => ($v->tipo_estado == "EN PROCESO") ? ("#0984e3") :   "#e17055",  //$color,
                    'title' => $v->cliente,
                    'start' => $v->fecha_visita,
                    'allDay' => true,
                    'hora' => $v->hora,
                    'id' => $v->id,
                    'estado' => $v->tipo_estado,
                    'textColor' => "#ffffff"
                );
            }
        }

        //return response($data);
        return response()->json(['event' => $data, 'fecha' =>   $request->all()]);
    }

ese es mi codigo del back, en donde transformo la informacion para recibirla en el fullcalendar, pero no me pinta la data como es debido.

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import { Calendar } from "@fullcalendar/core";
import list from "@fullcalendar/list";
import esLocale from "@fullcalendar/core/locales/es";
import bootstrapPlugin from "@fullcalendar/bootstrap";

export default {
  components: {
    FullCalendar, // make the <FullCalendar> tag available
  },
  //Voy a buscar el mic, mas rapido 1 min...
  mounted() {
      this.getEvents()
  },
  data() {
    return {
      calendarOptions: {
        plugins: [
          bootstrapPlugin,
          dayGridPlugin,
          interactionPlugin,
          timeGridPlugin,
          list,
        ],
        events: [],
        initialView: "dayGridMonth",
        themeSystem: "bootstrap",
        headerToolbar: {
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
        },
        selectable: true,
        dateClick: this.handleDateClick, //trae data del too el cuadri

        titleFormat: { year: "numeric", month: "long", day: "numeric" },

        eventClick: this.handleEventClick,
        locale: esLocale,
      },
    };
  },

  methods: {
    handleEventClick(arg) {
      alert("date click! " + arg.event.id + " titulos: " + arg.event.title);
    },
    getEvents() {
      axios
        .get("/eventos")
        .then((res) => {
          //console.log(res.data.event);
          //callback(res.data.event);
          this.calendarOptions.events = res.data.event
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>
<template >
  <div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <div class="card box-margin">
            <div class="card-body">
              <div class="shortcode-html">

                <FullCalendar
                  :options="calendarOptions"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Lo siguiente es mi frond, asi extraigo la data, ahora adjunto la imagen de como la muestra de neuevo, mi otro problema es que quiero hacer la peticion cada vez que presiono algun boton del full calendar, como es siguiente, hoy, etc.

introducir la descripción de la imagen aquí

2
  • 1
    Hola, como ya sabes el código va como texto por favor
    – user128299
    el 24 dic. 2020 a las 2:50
  • Hola lo acabo de subir el 24 dic. 2020 a las 3:58

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.