How Can I merge event in Full Calendar using the same time, and I have a problem with timegridview it’s just saving in alldayslot even I have a time

Here is my code for my FullCalendar. The allDaySlot is false but when I turn it into true all my saved time goes there even I have time. I hope you can help me with my situation. Thank You in Advance :D

                     <!DOCTYPE html>
              <html lang='en'>
                <head>
                  <meta charset='utf-8' />
                  <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.6.0/main.css' rel='stylesheet' />
                  <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.6.0/main.js'></script>
                  
                  <script>

                    document.addEventListener('DOMContentLoaded', function($) {
                      var calendarEl = document.getElementById('calendar');
                      var calendar = new FullCalendar.Calendar(calendarEl, {
                        initialView: 'timeGridWeek',
                        editable: true,  
                        dayMaxEvents: true,
                        allDaySlot: false,
                        headerToolbar: {
                          left: 'prev,next today',
                          center: 'title', 
                          },
                          timeZone: 'UTC',
                          events: [
                            @foreach($workingHours as $workinghour)
                              {   
                                  title : '‎‎‎‎ Time: '+'{{ $workinghour->start_time }}'+'-'+'{{ $workinghour->finish_time }}',
                                  start : '{{ $workinghour->date }}',
                                  url:    "{{ route('admin.working-hours.edit', [$workinghour]) }}",
                              },
                              @endforeach 
                              
                          ],  
                      });
                      calendar.render();
                    });

                  </script>
                </head>
                <body>
                  <div id='calendar'></div>
                  <style>
                  #calendar {
                      width: 100%;
                      margin:20px auto;
                  }
                  </style>
                </body>
              </html>


Read more here: https://stackoverflow.com/questions/67376876/how-can-i-merge-event-in-full-calendar-using-the-same-time-and-i-have-a-problem

Content Attribution

This content was originally published by Markski Kun at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: