We Keep Coding

Cannot get events in Javascript FullCalendar with Laravel

I have a page in the system that I am developing that needs to have a FullCalendar. The user will view, add, update tasks or events in that calendar.
I don't know what's happening, I can't get to display the events stored in my database.
I'm using Sqlite database running in Laravel 6.3.0
See below for reference code.
Fullcalendar generation
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var calendar = $('#calendar').fullCalendar({
editable: true,
events: "{{url('/home')}}",
displayEventTime: true,
editable: true,
eventRender: function (start, end,event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
select: function (start, end, allDay) {
var start_date = moment(start, 'DD.MM.YYYY').format('YYYY-MM-DD');
var end_date = moment(end, 'DD.MM.YYYY').format('YYYY-MM-DD');
$('#createTask').modal('show');
$('#saveTaskBtn').click(function () {
title = $('#taskTitle').val();
description = $('#taskDescription').val();
var post_data = "name="+title+"&description="+description+"&start_date="+start_date+"&end_date="+end_date;
// var post_data = {
// name:title,
// description: description,
// start_date: start_date,
// end_date: end_date
// };
$.ajax({
url: "{{url('home/create')}}",
data: post_data,
type: "POST",
success: function (data) {
displayMessage("Added Successfully");
},
error : function (data) {
console.log(data);
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start_date,
end: end_date,
allDay: allDay
},
true
);
calendar.fullCalendar('unselect');
});
}
});
ROUTE
Route::get('/home','TasksController#index')->name('home');
Route::post('home/create','TasksController#create');
Route::post('home/update','TasksController#update');
Route::post('home/delete','TasksController#destroy');
TasksController - $data has values passed in the view
public function index()
{
if (request()->ajax()) {
$start = (!empty($_GET["start_date"])) ? ($_GET["start_date"]) : ('');
$end = (!empty($_GET["end_date"])) ? ($_GET["end_date"]) : ('');
// $data = Task::whereDate('start_date', '>=', $start)->whereDate('end_date', '<=', $end)->get(['id', 'title', 'description', 'start_date', 'end_date']);
$data = Task::all();
dd(Response::json($data));
return Response::json($data);
}
return view('home');
}
$data JSON Response
JsonResponse {#279
#data: "[{"id":1,"name":"TEST","description":"TEST","start_date":"2019-11-02","end_date":"2019-11-03","created_at":null,"updated_at":null},{"id":2,"name":"TEST","description":"TEST","start_date":"2019-12-07","end_date":"2019-12-08","created_at":null,"updated_at":null},{"id":3,"name":"TEST","description":"TEST","start_date":"2019-11-02","end_date":"2019-11-03","created_at":null,"updated_at":null},{"id":4,"name":"TEST","description":"TEST","start_date":"2019-11-08 00:00:00","end_date":"2019-11-09 00:00:00","created_at":null,"updated_at":null}]"
#callback: null
#encodingOptions: 0
+headers: ResponseHeaderBag {#290
#computedCacheControl: array:2 [
"no-cache" => true
"private" => true
]
#cookies: []
#headerNames: array:3 [
"cache-control" => "Cache-Control"
"date" => "Date"
"content-type" => "Content-Type"
]
#headers: array:3 [
"cache-control" => array:1 [
0 => "no-cache, private"
]
"date" => array:1 [
0 => "Mon, 25 Nov 2019 11:50:48 GMT"
]
"content-type" => array:1 [
0 => "application/json"
]
]
#cacheControl: []
}
#content: "[{"id":1,"name":"TEST","description":"TEST","start_date":"2019-11-02","end_date":"2019-11-03","created_at":null,"updated_at":null},{"id":2,"name":"TEST","description":"TEST","start_date":"2019-12-07","end_date":"2019-12-08","created_at":null,"updated_at":null},{"id":3,"name":"TEST","description":"TEST","start_date":"2019-11-02","end_date":"2019-11-03","created_at":null,"updated_at":null},{"id":4,"name":"TEST","description":"TEST","start_date":"2019-11-08 00:00:00","end_date":"2019-11-09 00:00:00","created_at":null,"updated_at":null}]"
#version: "1.0"
#statusCode: 200
#statusText: "OK"
#charset: null
+original: Collection {#292
#items: array:4 [
0 => Task {#293
#fillable: array:4 [
0 => "name"
1 => "description"
2 => "start_date"
3 => "end_date"
]
#table: "tasks"
#connection: "sqlite"
#primaryKey: "id"
#keyType: "int"
+incrementing: true
#with: []
#withCount: []
#perPage: 15
+exists: true
+wasRecentlyCreated: false
#attributes: array:7 [
"id" => "1"
"name" => "TEST"
"description" => "TEST"
"start_date" => "2019-11-02"
"end_date" => "2019-11-03"
"created_at" => null
"updated_at" => null
]
#original: array:7 [
"id" => "1"
"name" => "TEST"
"description" => "TEST"
"start_date" => "2019-11-02"
"end_date" => "2019-11-03"
"created_at" => null
"updated_at" => null
]
#changes: []
#casts: []
#dates: []
#dateFormat: null
#appends: []
#dispatchesEvents: []
#observables: []
#relations: []
#touches: []
+timestamps: true
#hidden: []
#visible: []
#guarded: array:1 [
0 => "*"
]
}
1 => Task {#294
#fillable: array:4 [
0 => "name"
1 => "description"
2 => "start_date"
3 => "end_date"
]
#table: "tasks"
#connection: "sqlite"
#primaryKey: "id"
#keyType: "int"
+incrementing: true
#with: []
#withCount: []
#perPage: 15
+exists: true
+wasRecentlyCreated: false
#attributes: array:7 [
"id" => "2"
"name" => "TEST"
"description" => "TEST"
"start_date" => "2019-12-07"
"end_date" => "2019-12-08"
"created_at" => null
"updated_at" => null
]
#original: array:7 [
"id" => "2"
"name" => "TEST"
"description" => "TEST"
"start_date" => "2019-12-07"
"end_date" => "2019-12-08"
"created_at" => null
"updated_at" => null
]
#changes: []
#casts: []
#dates: []
#dateFormat: null
#appends: []
#dispatchesEvents: []
#observables: []
#relations: []
#touches: []
+timestamps: true
#hidden: []
#visible: []
#guarded: array:1 [
0 => "*"
]
}
2 => Task {#295
#fillable: array:4 [
0 => "name"
1 => "description"
2 => "start_date"
3 => "end_date"
]
#table: "tasks"
#connection: "sqlite"
#primaryKey: "id"
#keyType: "int"
+incrementing: true
#with: []
#withCount: []
#perPage: 15
+exists: true
+wasRecentlyCreated: false
#attributes: array:7 [
"id" => "3"
"name" => "TEST"
"description" => "TEST"
"start_date" => "2019-11-02"
"end_date" => "2019-11-03"
"created_at" => null
"updated_at" => null
]
#original: array:7 [
"id" => "3"
"name" => "TEST"
"description" => "TEST"
"start_date" => "2019-11-02"
"end_date" => "2019-11-03"
"created_at" => null
"updated_at" => null
]
#changes: []
#casts: []
#dates: []
#dateFormat: null
#appends: []
#dispatchesEvents: []
#observables: []
#relations: []
#touches: []
+timestamps: true
#hidden: []
#visible: []
#guarded: array:1 [
0 => "*"
]
}
3 => Task {#296
#fillable: array:4 [
0 => "name"
1 => "description"
2 => "start_date"
3 => "end_date"
]
#table: "tasks"
#connection: "sqlite"
#primaryKey: "id"
#keyType: "int"
+incrementing: true
#with: []
#withCount: []
#perPage: 15
+exists: true
+wasRecentlyCreated: false
#attributes: array:7 [
"id" => "4"
"name" => "TEST"
"description" => "TEST"
"start_date" => "2019-11-08 00:00:00"
"end_date" => "2019-11-09 00:00:00"
"created_at" => null
"updated_at" => null
]
#original: array:7 [
"id" => "4"
"name" => "TEST"
"description" => "TEST"
"start_date" => "2019-11-08 00:00:00"
"end_date" => "2019-11-09 00:00:00"
"created_at" => null
"updated_at" => null
]
#changes: []
#casts: []
#dates: []
#dateFormat: null
#appends: []
#dispatchesEvents: []
#observables: []
#relations: []
#touches: []
+timestamps: true
#hidden: []
#visible: []
#guarded: array:1 [
0 => "*"
]
}
]
}
+exception: null
}

Yii2 - Update data by switch toogle using Ajax/Pjax in GridView

I want to update my data in GridView using Switch Toogle without refresh the current page.
Here is the image:
So I want to update the attribute status using the toogle switch like the image above.
Here is my code:
index.php
<?= GridView::widget([
'dataProvider' => $dataProvider,
//'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//'alumni_id',
'tahun_lulus',
'file_excel',
[
'attribute' => 'status',
'format' => 'raw',
'value' => function($data){
if($data->status==0){
return SwitchInput::widget([
'name' => 'status_11',
'pluginOptions' => [
'size' => 'mini',
'onColor' => 'success',
'offColor' => 'danger',
'onText' => 'Active',
'offText' => 'Inactive',
],
'value' => true,
]);
}
else if($data->status==1){
return SwitchInput::widget([
'name' => 'status_11',
'pluginOptions' => [
'size' => 'mini',
'onColor' => 'success',
'offColor' => 'danger',
'onText' => 'Active',
'offText' => 'Inactive',
],
'value' => false,
]);;
}
}
],
//'deleted',
'created_at',
'updated_at',
[ 'class' => 'yii\grid\ActionColumn'],
],
]); ?>
How can I do that with Ajax/Pjax?

Before I suggest you the solution there is something you need to fix as you have redundant code inside the GridView that is below.
[
'attribute' => 'status',
'format' => 'raw',
'value' => function($data){
if($data->status==0){
return SwitchInput::widget([
'name' => 'status_11',
'pluginOptions' => [
'size' => 'mini',
'onColor' => 'success',
'offColor' => 'danger',
'onText' => 'Active',
'offText' => 'Inactive',
],
'value' => true,
]);
}
else if($data->status==1){
return SwitchInput::widget([
'name' => 'status_11',
'pluginOptions' => [
'size' => 'mini',
'onColor' => 'success',
'offColor' => 'danger',
'onText' => 'Active',
'offText' => 'Inactive',
],
'value' => false,
]);;
}
}
],
You can just pass the value of the $data->status to the value attribute of the SwitchInput rather than using if(){}else{}.
Then to implement what you are looking for you have to use the pluginEvent option of the SwitchInput and bind the switchChange.bootstrapSwitch event to send an ajax call whenever the status of the SwitchInput is changed so your code for the Griview should look like below
<?php
use kartik\switchinput\SwitchInput;
$js = <<< JS
function sendRequest(status, id){
$.ajax({
url:'/controller/action',
method:'post',
data:{status:status,id:id},
success:function(data){
alert(data);
},
error:function(jqXhr,status,error){
alert(error);
}
});
}
JS;
$this->registerJs($js, \yii\web\View::POS_READY);
echo GridView::widget(
[
'dataProvider' => $dataProvider,
//'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//'alumni_id',
'tahun_lulus',
'file_excel',
[
'attribute' => 'status',
'format' => 'raw',
'value' => function ($data) {
return SwitchInput::widget(
[
'name' => 'status_11',
'pluginEvents' => [
'switchChange.bootstrapSwitch' => "function(e){sendRequest(e.currentTarget.checked, $data->id);}"
],
'pluginOptions' => [
'size' => 'mini',
'onColor' => 'success',
'offColor' => 'danger',
'onText' => 'Active',
'offText' => 'Inactive'
],
'value' => $data->status
]
);
}
],
//'deleted',
'created_at',
'updated_at',
[ 'class' => 'yii\grid\ActionColumn'],
],
]
);
Note: just make sure you change the url:'/controller/action', to the actual URL and action. If you are not using prettyUrl then you must change it to index.php?r=controller/action.
Edit
I have updated the code above to pass the id of the row along with the status to your action in the controller, the action will get the variables like below.
public function actionUpdate(){
$status = Yii::$app->request->post('status');
$id = Yii::$app->request->post('id');
}

How to connect bootstrap year calendar with mysql base

I got problem with connecting bootstrap year calendar from bootstrap-year-calendar.com with my mysql base.
I make getEvents.php file, which is connecting with base and taking data of events. When I printing result from this file then all is ok and i see my events, but when I trying to include this result to DataSource in calendar script then I dont see any events.
Someone could send some examples how to do it?
My codes:
getEvents.php
<?php
require "bdd.php";
$result = $bdd->prepare("SELECT `id`, `title`, `start`, `end`, `color`, `dsc`, `zlec`, `stanowisko` FROM `events`");
$result->execute();
$event_array = array();
$result->setFetchMode(PDO::FETCH_ASSOC);
while ($record = $result->fetch()) {
$event_array[] = array(
'id' => $record['event_id'],
'title' => $record['event_name'],
'start' => $record['start_event'],
'end' => $record['end_event'],
);
}
echo json_encode($event_array);
?>
calendar script I change to
dataSource: ['getEvents.php']
ACTUALIZATION
#JeffHuijsmans Im not sure how to fix it.
Please tell me how to fetch into dataSource function result from my getEvents.php file ?
echo from getEvents file return
[{"event_id":"1","event_title":"XXX","event_start":"2017-10-04","event_end":"2017-10-06"}]
Default data in dataSource is looking like this:
dataSource: [
{
id: 0,
name: 'Google I/O',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 4, 28),
endDate: new Date(currentYear, 4, 29)
}]

A "workaround" is iterate the data array and generate a string with data in calendar format.
Here works fine, hope helps.
Sample:
private function convertYearData(array $yearData) : string
{
if (empty($yearData)) {
return 'null';
}
$data = '';
foreach ($yearData as $event) {
if (empty($data)) {
$data = "[{id:{$event['id']}, name:'{$event['name']}', type:'{$event['type']}', startDate: new Date('{$event['startDate']}'), endDate: new Date('{$event['endDate']}')}";
} else {
$data .= ", {id:{$event['id']}, name:'{$event['name']}', type:'{$event['type']}', startDate: new Date('{$event['startDate']}'), endDate: new Date('{$event['endDate']}')}";
}
}
$data .= ']';
return $data;
}
$yearDataArr = [
[
'id' => '1',
'name' => 'Pesquisa Teste',
'type' => 'Pesquisa',
'color' => '#4da539',
'startDate' => '2017-04-28 02:00:00',
'endDate' => '2017-04-30 12:00:00',
],
[
'id' => '2',
'name' => 'Media Teste',
'type' => 'Media',
'color' => '#00afe8',
'startDate' => '2017-04-25 02:00:00',
'endDate' => '2017-05-12 12:00:00',
],
[
'id' => '3',
'name' => 'Email Marketing Teste',
'type' => 'Email Marketing',
'color' => '#af2828',
'startDate' => '2017-03-25 02:00:00',
'endDate' => '2017-05-17 12:00:00',
],
];
$yearData = $this->convertYearData($yearDataArr);
after, in your html just echo your var $yearDate:
$('#calendar').calendar({
language:'pt',
enableContextMenu: false,
enableRangeSelection: true,
selectRange: function(e) {
editEvent({ startDate: e.startDate, endDate: e.endDate });
},
mouseOnDay: function(e) {
if(e.events.length > 0) {
var content = '';
for(var i in e.events) {
content += '<div class="event-tooltip-content">'
+ '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].type + '</div>'
+ '<div class="event-type">' + e.events[i].name + '</div>'
+ '</div>';
}
$(e.element).popover({
trigger: 'manual',
container: 'body',
html:true,
content: content
});
$(e.element).popover('show');
}
},
mouseOutDay: function(e) {
if(e.events.length > 0) {
$(e.element).popover('hide');
}
},
dayContextMenu: function(e) {
$(e.element).popover('hide');
},
dataSource: <?php echo $this->yearData; ?>
});

insert javascript in yii2 layout file

I want to insert a javascript to this link on my navigation bar, here is my code in layout file.
$userItems = [];
if (Yii::$app->user->isGuest) {
$userItems[] = [
'label' => 'How It Works?',
'items' => [
['label' => 'Video', 'url' => ['/site/howto']], //I want to insert javascript here
['label' => 'Slide', 'url' => ['/site/index']],
],
];
$userItems[] = [
'label' => 'Support',
'items' => [
['label' => 'FAQ', 'url' => ['/site/index']],
['label' => 'Live Chat', 'url' => ['/site/index']],
],
];
$userItems[] = [
'label' => 'App Store', 'url' => ['/site/index']
];
} else {
$userItems = MenuHelper::getAssignedMenu(Yii::$app->user->id);
}
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-left'],
'items' => $userItems,
]);
Where should I put my code? I can't find a place to put it in /site/howto link

Try This:
$userItems[] = [
'label' => 'How It Works?',
'items' => [
['label' => 'Video',
'options' => [
'onclick' => 'Myfunction();', // give javascript function name
],
'url' => ['/site/howto']],
['label' => 'Slide', 'url' => ['/site/index']],
],
];
Implement function in javascript as you want
2nd way :
$userItems[] = [
'label' => 'How It Works?',
'items' => [
['label' => 'Video',
'options' => [
'class' => 'test', // give class name here
],
'url' => ['/site/howto']],
['label' => 'Slide', 'url' => ['/site/index']],
],
];
In javascript :
$('.test').on('click', function(event){
// your code
});

Data Tables: brake with url

I have a situation with Data Tables that I don't understand:
Problem:
I have this rewriteRule:
Rewriterule ^table/ table.php
So, when I go to www.site.com/table.php all is working good but when I go to www.site.com/table/ I have the next alert message:
DataTables warning: table id={tablet} - Invalid JSON response. For more information about this problem go to: http://datatables.net/tn/1
I went to the suggest url but I can't fix the problem.
Sorry but I can not give the site online because is an intranet.
My php code is this:
$table = 'paciente';
$primaryKey = 'id';
$columns = array(
array(
'db' => 'id',
'dt' => 0),
array(
'db' => 'nombre',
'dt' => 1,
'formatter' => function( $d, $row ) {
$links=''.$row[1].'';
return $links;
}),
array( 'db' => 'apellidos', 'dt' => 2 ),
array( 'db' => 'tel_mov', 'dt' => 3,
'formatter' => function( $d, $row ) {
$tels=$row[3];
return $tels;
}
),
array( 'db' => 'tel_casa', 'dt' => 4,
'formatter' => function( $d, $row ) {
$tels2=$row[4];
return $tels2;
}
),
array( 'db' => 'terapeuta', 'dt' => 5 ),
array(
'db' => 'id',
'dt' => 6,
'formatter' => function( $d, $row ) {
$links2='<img src="ima/edit.png" /> | <img src="ima/close.png" />';
return $links2;
}),
);
require( 'libraries/ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
And the javascript:
<script type="text/javascript" src="<?php echo $base; ?>js/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tablet').DataTable({
"language": {
"url": "js/Spanish.json"},
"scrollY": "500px",
"scrollCollapse": true,
"pageLength": 25,
"processing": true,
"serverSide": true,
"ajax": "table-load.php",
"order": [[ 1, "asc" ]],
"aoColumns": [
{ "sTitle": "id","bVisible": false},
{ "sTitle": "Nombre" },
{ "sTitle": "Apellidos" },
{ "sTitle": "Móbil","bSortable": false },
{ "sTitle": "Fijo","bSortable": false },
{ "sTitle": "Terapeuta","bSortable": false },
{ "sTitle": "Edición","bSortable": false,"bSearchable": false }],
"fnDrawCallback": function() {
tb_init('a.thickbox');
}
});
} );
</script>
Any idea?? Thanks in advance!!

I had a similar issue. The problem is that Datatable.js needs to read data from a "data" array key (extremely hard information to find in their docs honestly).
This mean that you need to adjust your PHP script to get an array which has this structure:
"success" => true|false // useful to display errors
"message" => string // explains the error (if occurred)
"data" => array // contains all your data
EDIT
This is an example of a PHP array which is ready to be encoded and handled by DataTable.js. Note the array key "data": DataTable.js will search for elements to display in that jsonResponse.data.
<?php
// data fetched from database
$fromDatabase = [
'example',
'test',
'foo',
'bar'
];
$response = [
'success' => true,
'message' => '',
'data' => $fromDatabase
];
echo json_encode($response);
?>

I fix it in the javascript DataTable options with the full url in the ajax call:
"ajax": "<?php echo $base; ?>table-load.php"
So the javascript is something like this:
<script type="text/javascript" src="<?php echo $base; ?>js/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tablet').DataTable({
"language": {
"url": "js/Spanish.json"},
"scrollY": "500px",
"scrollCollapse": true,
"pageLength": 25,
"processing": true,
"serverSide": true,
"ajax": "<?php echo $base; ?>table-load.php",
"order": [[ 1, "asc" ]],
"aoColumns": [
{ "sTitle": "id","bVisible": false},
{ "sTitle": "Nombre" },
{ "sTitle": "Apellidos" },
{ "sTitle": "Móbil","bSortable": false },
{ "sTitle": "Fijo","bSortable": false },
{ "sTitle": "Terapeuta","bSortable": false },
{ "sTitle": "Edición","bSortable": false,"bSearchable": false }],
"fnDrawCallback": function() {
tb_init('a.thickbox');
}
});
} );
</script>
And the php:
$table = 'paciente';
$primaryKey = 'id';
$columns = array(
array(
'db' => 'id',
'dt' => 0),
array(
'db' => 'nombre',
'dt' => 1,
'formatter' => function( $d, $row ) {
$links=''.$row[1].'';
return $links;
}),
array( 'db' => 'apellidos', 'dt' => 2 ),
array( 'db' => 'tel_mov', 'dt' => 3,
'formatter' => function( $d, $row ) {
$tels=$row[3];
return $tels;
}
),
array( 'db' => 'tel_casa', 'dt' => 4,
'formatter' => function( $d, $row ) {
$tels2=$row[4];
return $tels2;
}
),
array( 'db' => 'terapeuta', 'dt' => 5 ),
array(
'db' => 'id',
'dt' => 6,
'formatter' => function( $d, $row ) {
$links2='<img src="ima/edit.png" /> | <img src="ima/close.png" />';
return $links2;
}),
);
require( 'libraries/ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
Note that I put ../ behind the urls
This worked for me...