Creato evento con data e ora (start-end) per google-calendar

app/Http/Controllers/FullCalenderController.php

@@ -5,6 +5,7 @@ namespace App\Http\Controllers;
 use App\Models\Event;
 use Illuminate\Http\Request;
 use Spatie\GoogleCalendar\Event as Events;
+use Carbon\Carbon;
 
 class FullCalenderController extends Controller
 {
@@ -80,13 +81,15 @@ class FullCalenderController extends Controller
       return view('calendario.fullcalendar');
     }
 
-    public function testCalendar()
+    public function saveEventToGoogle(Request $request){
-    {
+      $event = new Events;
-      $event = Events::get();
+      $event->name = $request['title'];
-      //return json_encode($event);
+      $event->description=$request['descrizione'];
-      foreach ($events as $evento)
+      $tzStart = $request['DateStart'].'T'.$request['HourStart'].' +02:00';
-      {
+      $tzEnd = $request['DateEnd'].'T'.$request['HourEnd'].' +02:00';
-        
+      $event->startDateTime = Carbon::parse($tzStart);
-      }
+      $event->endDateTime = Carbon::parse($tzEnd);
+      $event->save();
+      return view('calendario.fullcalendar');
     }
 }

composer.json

@@ -21,6 +21,7 @@
 		"laravel/tinker": "^2.5",
 		"laravel/ui": "^3.4",
 		"laraveldaily/laravel-charts": "^0.1.29",
+		"nesbot/carbon": "^2.71",
 		"pcloud/pcloud-php-sdk": "^3.0",
 		"rap2hpoutre/fast-excel": "^3.2",
 		"secondtruth/startmin": "^1.1",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "d70c281bd37ad4883769ad206aee020c",
+    "content-hash": "fee26f6948b0082f65e8b7afbce9c24b",
     "packages": [
         {
             "name": "almasaeed2010/adminlte",

config/adminlte.php

@@ -434,7 +434,13 @@ return [
             'text' => 'Appuntamenti',
             'route'  => 'calendario',
             'icon' => 'fas fa-fw fa-calendar',
-            // 'can' => 'appuntamenti',
+            'can' => ['appuntamenti'],
+        ], 
+        [
+            'text' => 'Meeting Room',
+            'route'  => 'meeting',
+            'icon' => 'fas fa-fw fa-file-video',
+            'can' => ['meetingroom']
         ],
         ['header' => 'CONSUMI'],
         [
@@ -450,13 +456,8 @@ return [
             'icon' => 'fas fa-fw fa-user',
             'can' => ['amministrazione']
         ],
-        ['header' => 'UTILI'],
+       
-        [
+       
-            'text' => 'Meeting Room',
-            'route'  => 'meeting',
-            'icon' => 'fas fa-fw fa-file-video',
-            'can' => ['meetingroom']
-        ],
 
     ],
 
@@ -525,6 +526,37 @@ return [
                 ],
             ],
         ],
+        'DateRangePicker' => [
+            'active' => false,
+            'files' => [
+                [
+                    'type' => 'js',
+                    'asset' => false,
+                    'location' => '//cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js',
+                ],
+                [
+                    'type' => 'css',
+                    'asset' => false,
+                    'location' => '//cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css',
+                ],
+            ],
+        ],
+        'JqueryUi' =>[
+            'active' => false,
+            'files' =>[
+                [
+                    'type' => 'js',
+                    'asset' => false,
+                    'location' => '//code.jquery.com/ui/1.13.1/jquery-ui.js',
+                    /// https://code.jquery.com/ui/1.13.1/jquery-ui.js
+                ],
+                [
+                    'type' => 'css',
+                    'asset' => false,
+                    'location' => '//code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css',
+                ],
+            ],
+        ],
         'Select2' => [
             'active' => true,
             'files' => [
@@ -606,6 +638,16 @@ return [
                 ],
             ],
         ],
+        'MomentJs' =>[
+            'active' => false,
+            'files' =>[
+                [
+                    'type' => 'js',
+                    'asset' => false,
+                    'location' => '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js',
+                ],
+            ],
+        ],
 
     ],
 

public/js/app/calendario.js

@@ -6,29 +6,32 @@ document.addEventListener('DOMContentLoaded', function() {
     var calendarEl = document.getElementById('calendar');
 
     var calendar = new FullCalendar.Calendar(calendarEl, {
-      timeZone: 'UTC',
+      //timeZone: 'UTC',
+      timeZone: 'Europe/Rome',
       initialView: 'timeGridWeek',
-     // plugins: [ googleCalendarPlugin ],
       googleCalendarApiKey: 'AIzaSyClqRqDMqD4grSx5HeLq1lXMxan1-UjK_E',
       events: {
         googleCalendarId: 'brebar.family@gmail.com'
       },
-     // events: 'admin/test/calendar/google',
       editable: true,
       selectable: true,
-      // plugins: [dayGridPlugin],
-      // initialView: 'dayGridWeek',
       headerToolbar: {
           left: 'prev,next',
           center: 'title',
           right: 'dayGridMonth,timeGridWeek,timeGridDay' // user can switch between the two
       },
+     
       dateClick: function(info) {
-        // alert('Clicked on: ' + info.dateStr);
+        var starttime =moment(info.dateStr);
-        $('#start').val(info.dateStr);
+        var endtime = moment(info.dateStr).add(30,'m');
+        $('#startDay').val(moment(starttime).format("Y-M-D")) ;
+        $('#startHour').val(moment(starttime).format("HH:mm")) ;
+        
+        $('#endDay').val(moment(endtime).format("Y-M-D")) ;
+        $('#endHour').val(moment(endtime).format("HH:mm")) ;
         $('#event').modal('show');
         console.log(info.dateStr); 
-        //inserire qui richiamo a pagina modale di inserimento appuntamento.
+        console.log(endtime.dateStr); 
       }
     });
     calendar.setOption('locale', 'it');
@@ -46,99 +49,4 @@ $(document).ready(function () {
     });
 });
 
-/*    
-   var calendar = $('#calendar').fullCalendar({
       
-                        editable: true,
-                        events: SITEURL + "/fullcalendar",
-                        displayEventTime: true,
-                        editable: true,
-
-                        eventRender: function (event, element, view) {
-                            if (event.allDay === 'true') {
-                                    event.allDay = true;
-                            } else {
-                                    event.allDay = false;
-                            }
-                        },
-                        selectable: true,
-                        selectHelper: true,
-
-                        select: function (start, end, allDay) {
-                            var title = prompt('Titolo evento:');
-                            if (title) {
-                                var start = $.fullCalendar.formatDate(start, "Y-MM-DD");
-                                var end = $.fullCalendar.formatDate(end, "Y-MM-DD");
-    
-                                $.ajax({
-                                    url: SITEURL + "/fullcalendar",
-                                    data: {
-                                        title: title,
-                                        start: start,
-                                        end: end,
-                                        type: 'add'
-                                    },
-                                    type: "POST",
-                                    success: function (data) {
-                                        displayMessage("Evento creato con successo");
-                                        calendar.fullCalendar('renderEvent',
-                                            {
-                                                id: data.id,
-                                                title: title,
-                                                start: start,
-                                                end: end,
-                                                allDay: allDay
-                                            },true);
-                                        calendar.fullCalendar('unselect');
-                                    }
-                                });
-                            }
-                        },
-    
-                        eventDrop: function (event, delta) {
-                            var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD");
-                            var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD");
-    
-                            $.ajax({
-                                url: SITEURL + '/fullcalendar',
-                                data: {
-                                    title: event.title,
-                                    start: start,
-                                    end: end,
-                                    id: event.id,
-                                    type: 'update'
-                                },
-                                type: "POST",
-                                success: function (response) {
-                                    displayMessage("Event Updated Successfully");
-                                }
-                            });
-                        },
-    
-                        eventClick: function (event) {
-                            var deleteMsg = confirm("vuoi veramente cancellare?");
-                            if (deleteMsg) {
-                                $.ajax({
-                                    type: "POST",
-                                    url: SITEURL + '/fullcalendar',
-                                    data: {
-                                            id: event.id,
-                                            type: 'delete'
-                                    },
-                                    success: function (response) {
-                                        calendar.fullCalendar('removeEvents', event.id);
-                                        displayMessage("Event Deleted Successfully");
-                                    }
-                                });
-                            }
-                        }
-    
-                    });
-
-    
-    });
-   
-    function displayMessage(message) {
-        toastr.success(message, 'Event');
-    } 
-    /**/

resources/views/calendario/fullcalendar.blade.php

@@ -1,5 +1,7 @@
 @extends('adminlte::page')
 @section('plugins.Fullcalendar', true)
+@section('plugins.MomentJs', true)
+@section('plugins.JqueryUi', true)
 @section('content_header')
 <h1>Appuntamenti</h1>
 @endsection
@@ -14,12 +16,29 @@
 
 			</div>
 			<div class="modal-body">
-               Start <input type="text" id="start" name="start">
+				<form action="" method="POST">
+					@csrf
+					Giorno Inizio: <input type='date' class="form-control" name="DateStart" id="startDay"/>
+					Ora Inizio: <input type='time' class="form-control" name="HourStart" id="startHour"/>
+					<hr>
+					Giorno Fine:<input type='date' class="form-control" name="DateEnd" id="endDay"/>
+					Ora Fine: <input type='time' class="form-control" name="HourEnd" id="endHour"/>
+					<hr>
+					Titolo:
+					<input type='text' class="form-control" name="title"/>
+					Descrizione:
+					<textarea class="form-control" name="descrizione"></textarea>
+					<hr>
+					<input type="submit" name="Submit">
+				</form>
             </div>
         </div>
     </div>
 </div>
 @endsection
 @section('js')
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
 <script src="/js/app/calendario.js"></script>
+
+
 @endsection

routes/admin.php

@@ -182,25 +182,33 @@ Route::group(['middleware'=>['permission:avvisi']], function(){
 Route::group(['middleware'=>['permission:documenti']], function(){
     Route::get('documenti', [DocumentiController::class, 'listaDocumenti'])->name('folders');
     Route::post('documenti', [DocumentiController::class, 'newFolder']);
+});
 
+// APPUNTAMENTI
+Route::group(['middleware'=>['permission:appuntamenti']], function(){
+    Route::get('test/calendar',[FullCalenderController::class,'showDemo'])->name('calendario');
+    Route::post('test/calendar',[FullCalenderController::class, 'saveEventToGoogle']);
+});
 
+// MEETING ROOM
+Route::group(['middleware'=>['permission:meetingroom']], function(){
+    Route::get('meeting', function() { return view('meetings.meeting'); })->name('meeting');
 });
 
 /// TEST ROUTES
-    Route::get('test/fullcalendar', [FullCalenderController::class, 'index']);
+    /*Route::get('test/fullcalendar', [FullCalenderController::class, 'index']);
     Route::post('test/fullcalendar', [FullCalenderController::class, 'ajax']);
     Route::get('test/calendar/google',[FullCalenderController::class, 'testcalendar']);
    
+    
     Route::get('test/condominio',[CondominioController::class,'testPdf']);
     Route::get('test/err403',[CondominioController::class,'err403'])->name('errore-403');
     Route::get('test/user_role',[CondominioController::class,'user_role']);
     Route::get('test/userclass',[Utenti::class,'userClass']);
-    Route::get('test/calendar',[FullCalenderController::class,'showDemo'])->name('calendario');
+    
+   
     
     Route::get('testmail',function(){
         $name='Flavio';
         Mail::to('flavio.barachino@lavorain.cloud')->send(new myTestEmail($name));
-    });
+    });*/
-Route::group(['middleware'=>['permission:meetingroom']], function(){
-    Route::get('meeting', function() { return view('meetings.meeting'); })->name('meeting');
-});