Ayuda con fullcalendar

  • Autor Autor Angel Javier
  • Fecha de inicio Fecha de inicio
Angel Javier

Angel Javier

Ómicron
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
¡Usuario popular!
Holas colegas de Forobeta, estoy solicitando una ayuda con la librería JS de FullCalendar.

Tengo un calendario,, le he realizado varias modificaciones (que todas mis eventos, siempre se repiran hasta la fecha final, colores, ect).

JavaScript: 
<script>
$(document).ready(function() {
    // Inicializa el calendario
    $('#calendar').fullCalendar({
        defaultView: 'month', // Mostrar la vista mensual por defecto
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay' // Permitir cambiar entre las vistas de mes, semana y día
        },
        locale: 'es', // Establece la localización a español

        events: function(start, end, timezone, callback) {
            var events = [];
            @foreach($events as $event)
                @if($event->due_date && $event->dias)
                    @php
                        $start = \Carbon\Carbon::createFromFormat(config('panel.date_format'), $event->due_date);
                        $end = \Carbon\Carbon::createFromFormat(config('panel.date_format'), $event->final_date);
                        $currentDate = clone $start;
                        $dias = explode(',', $event->dias); // Convierte la cadena en un array
                    @endphp
                    @while($currentDate <= $end)
                        @php
                            $dayOfWeek = $currentDate->dayOfWeek;
                        @endphp
                        @if(in_array($dayOfWeek, $dias)) // Usa el array
                            events.push({
                                title: '{{ $event->name }} - {{ $event->grupo }}',
                                start: '{{$currentDate->format('Y-m-d')}}T{{ $event->start }}',
                                end: '{{$currentDate->format('Y-m-d')}}T{{ $event->end }}',
                                url: '{{ url('admin/tasks').'/'.$event->id.'/' }}',
                                color: '{{ $event->grupo == "infantil" ? "blue" : ($event->grupo == "adulto" ? "green" : "") }}'
                            });
                        @endif
                        @php
                            $currentDate->addDay();
                        @endphp
                    @endwhile
                @endif
            @endforeach
            callback(events);
        }
    });
});
</script>


El código superior, me funciona un 99% a lo que tengo, ya que si tengo evento para un día domingo, el mismo no lo muestra.
1699315407812.webp

Vengo de Bing y ChatGPT y ambos se ponen a dar vueltas en círculo.

Los valores de mi base de datos son

due_date = fecha inicio
final_date = fecha final.
start = hora de inicio
end = hora final
dias = días que se repetirá la tarea (donde domingo es igual a 0 y así sucecivamente).

Si alguien puede darme que estoy haciendo mal, sería de gran ayuda
 
Insertar CODE, HTML o PHP: 
<script>
$(document).ready(function() {
    // Inicializa el calendario
    $('#calendar').fullCalendar({
        defaultView: 'month', // Mostrar la vista mensual por defecto
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay' // Permitir cambiar entre las vistas de mes, semana y día
        },
        locale: 'es', // Establece la localización a español

        events: function(start, end, timezone, callback) {
            var events = [];
            @foreach($events as $event)
                @if($event->due_date && $event->dias)
                    @php
                        $start = \Carbon\Carbon::createFromFormat(config('panel.date_format'), $event->due_date);
                        $end = \Carbon\Carbon::createFromFormat(config('panel.date_format'), $event->final_date);
                        $currentDate = clone $start;
                        $dias = explode(',', $event->dias); // Convierte la cadena en un array
                    @endphp
                    @while($currentDate <= $end)
                        @php
                            $dayOfWeek = $currentDate->dayOfWeek;
                        @endphp
                        // Verifica si el día actual es domingo (0) o si está incluido en el array de días repetidos
                        @if($dayOfWeek == 0 || in_array($dayOfWeek, $dias))
                            events.push({
                                title: '{{ $event->name }} - {{ $event->grupo }}',
                                start: '{{$currentDate->format('Y-m-d')}}T{{ $event->start }}',
                                end: '{{$currentDate->format('Y-m-d')}}T{{ $event->end }}',
                                url: '{{ url('admin/tasks').'/'.$event->id.'/' }}',
                                color: '{{ $event->grupo == "infantil" ? "blue" : ($event->grupo == "adulto" ? "green" : "") }}'
                            });
                        @endif
                        @php
                            $currentDate->addDay();
                        @endphp
                    @endwhile
                @endif
            @endforeach
            callback(events);
        }
    });
});
</script>

Prueba este
 
juniorav dijo:
Insertar CODE, HTML o PHP: 
<script>
$(document).ready(function() {
    // Inicializa el calendario
    $('#calendar').fullCalendar({
        defaultView: 'month', // Mostrar la vista mensual por defecto
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay' // Permitir cambiar entre las vistas de mes, semana y día
        },
        locale: 'es', // Establece la localización a español

        events: function(start, end, timezone, callback) {
            var events = [];
            @foreach($events as $event)
                @if($event->due_date && $event->dias)
                    @php
                        $start = \Carbon\Carbon::createFromFormat(config('panel.date_format'), $event->due_date);
                        $end = \Carbon\Carbon::createFromFormat(config('panel.date_format'), $event->final_date);
                        $currentDate = clone $start;
                        $dias = explode(',', $event->dias); // Convierte la cadena en un array
                    @endphp
                    @while($currentDate <= $end)
                        @php
                            $dayOfWeek = $currentDate->dayOfWeek;
                        @endphp
                        // Verifica si el día actual es domingo (0) o si está incluido en el array de días repetidos
                        @if($dayOfWeek == 0 || in_array($dayOfWeek, $dias))
                            events.push({
                                title: '{{ $event->name }} - {{ $event->grupo }}',
                                start: '{{$currentDate->format('Y-m-d')}}T{{ $event->start }}',
                                end: '{{$currentDate->format('Y-m-d')}}T{{ $event->end }}',
                                url: '{{ url('admin/tasks').'/'.$event->id.'/' }}',
                                color: '{{ $event->grupo == "infantil" ? "blue" : ($event->grupo == "adulto" ? "green" : "") }}'
                            });
                        @endif
                        @php
                            $currentDate->addDay();
                        @endphp
                    @endwhile
                @endif
            @endforeach
            callback(events);
        }
    });
});
</script>

Prueba este
Hacer clic para expandir...
Hola colega, gracias por responder.

utilizando tu código, me duplica los eventos de otros días en el día domingo (en el calendario)
1699317830508.webp


Estos son mis eventos

Y al mostrar el calendario, me los muestra los de Martes y Miercoles en el domingo, pero no el que tengo asignado en domingo (Piano Adulto)
1699317900995.webp
 
JavaScript: 
<script>
$(document).ready(function() {
    // Inicializa el calendario
    $('#calendar').fullCalendar({
        defaultView: 'month', // Mostrar la vista mensual por defecto
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay' // Permitir cambiar entre las vistas de mes, semana y día
        },
        locale: 'es', // Establece la localización a español

        events: [
            @foreach($events as $event)
                @if($event->due_date && $event->dias)
                    @php
                        $start = \Carbon\Carbon::createFromFormat(config('panel.date_format'), $event->due_date);
                        $end = \Carbon\Carbon::createFromFormat(config('panel.date_format'), $event->final_date);
                        $dias = explode(',', $event->dias); // Convierte la cadena en un array
                    @endphp
                    @foreach($dias as $dia)
                        {
                            title: '{{ $event->name }} - {{ $event->grupo }}',
                            start: '{{ $start->copy()->next($dia)->format('Y-m-d').' '.$event->start }}',
                            end: '{{ $start->copy()->next($dia)->format('Y-m-d').' '.$event->end }}',
                            url: '{{ url('admin/tasks').'/'.$event->id.'/' }}',
                            color: '{{ $event->grupo == "infantil" ? "blue" : ($event->grupo == "adulto" ? "green" : "") }}'
                        },
                    @endforeach
                @endif
            @endforeach
        ]
    });
});
</script>
 
juniorav dijo:
JavaScript: 
<script>
$(document).ready(function() {
    // Inicializa el calendario
    $('#calendar').fullCalendar({
        defaultView: 'month', // Mostrar la vista mensual por defecto
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay' // Permitir cambiar entre las vistas de mes, semana y día
        },
        locale: 'es', // Establece la localización a español

        events: [
            @foreach($events as $event)
                @if($event->due_date && $event->dias)
                    @php
                        $start = \Carbon\Carbon::createFromFormat(config('panel.date_format'), $event->due_date);
                        $end = \Carbon\Carbon::createFromFormat(config('panel.date_format'), $event->final_date);
                        $dias = explode(',', $event->dias); // Convierte la cadena en un array
                    @endphp
                    @foreach($dias as $dia)
                        {
                            title: '{{ $event->name }} - {{ $event->grupo }}',
                            start: '{{ $start->copy()->next($dia)->format('Y-m-d').' '.$event->start }}',
                            end: '{{ $start->copy()->next($dia)->format('Y-m-d').' '.$event->end }}',
                            url: '{{ url('admin/tasks').'/'.$event->id.'/' }}',
                            color: '{{ $event->grupo == "infantil" ? "blue" : ($event->grupo == "adulto" ? "green" : "") }}'
                        },
                    @endforeach
                @endif
            @endforeach
        ]
    });
});
</script>
Hacer clic para expandir...
1699318499530.webp
 
JavaScript: 
events: function(start, end, timezone, callback) {
    var events = [];
    @foreach($events as $event)
        @if($event->due_date && $event->dias)
            @php
                $start = \Carbon\Carbon::createFromFormat(config('panel.date_format'), $event->due_date);
                $end = \Carbon\Carbon::createFromFormat(config('panel.date_format'), $event->final_date);
                $dias = explode(',', $event->dias); // Convierte la cadena en un array
            @endphp

            @for ($currentDate = $start; $currentDate <= $end; $currentDate->addDay())
                @php
                    $dayOfWeek = $currentDate->dayOfWeek;
                @endphp
                @if(in_array($dayOfWeek, $dias)) // Usa el array
                    events.push({
                        title: '{{ $event->name }} - {{ $event->grupo }}',
                        start: '{{$currentDate->format('Y-m-d')}}T{{ $event->start }}',
                        end: '{{$currentDate->format('Y-m-d')}}T{{ $event->end }}',
                        url: '{{ url('admin/tasks').'/'.$event->id.'/' }}',
                        color: '{{ $event->grupo == "infantil" ? "blue" : ($event->grupo == "adulto" ? "green" : "") }}'
                    });
                @endif
            @endfor

        @endif
    @endforeach
    callback(events);
}
 
Logré solucionarlo de otra manera.
Reasigné el ID del día domingo de 0 a 7, e hice que coincidieran los numeros de Javascript, con los de PHP y quedó funcionando.
JavaScript: 
<script>
$(document).ready(function() {
    // Inicializa el calendario
    $('#calendar').fullCalendar({
        defaultView: 'month', // Mostrar la vista mensual por defecto
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay' // Permitir cambiar entre las vistas de mes, semana y día
        },
        locale: 'es', // Establece la localización a español

        events: function(start, end, timezone, callback) {
            var events = [];
            @foreach($events as $event)
                @if($event->due_date && $event->dias)
                    @php
                        $start = \Carbon\Carbon::createFromFormat(config('panel.date_format'), $event->due_date);
                        $end = \Carbon\Carbon::createFromFormat(config('panel.date_format'), $event->final_date);
                        $currentDate = clone $start;
                        $dias = explode(',', $event->dias); // Asume que 'dias' es una cadena separada por comas
                        $dias = array_map(function($dia) { return ($dia % 7); }, $dias); // Ajusta los números de los días de la semana para que coincidan con JavaScript
                    @endphp
                
                    @while($currentDate <= $end)
                        @if(in_array($currentDate->dayOfWeek, $dias)) // Asume que 'dias' contiene los números de los días de la semana (0 = domingo, 1 = lunes, ..., 6 = sábado)
                            events.push({
                                title: '{{ $event->name_id }} - {{ $event->grupo }}',
                                start: '{{$currentDate->format('Y-m-d')}}T{{ $event->hora_inicio }}',
                                end: '{{$currentDate->format('Y-m-d')}}T{{ $event->hora_final }}',
                                url: '{{ url('admin/tasks').'/'.$event->id.'/' }}',
                                color: '{{ $event->grupo == "infantil" ? "blue" : ($event->grupo == "adulto" ? "green" : "") }}'
                            });
                        @endif
                        @php
                            $currentDate->addDay();
                        @endphp
                    @endwhile
                @endif
            @endforeach
            callback(events);
        }
    });
});
</script>
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba