Proper JSON date time syntax for fullcalendar - json

need some help for the proper syntax for display the event times in agenda view. The events only shows up under all day despite having allDay set to false.
My json.html page looks like this:
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventSources: [
{
url: 'json-events.php', // use the `url` property
color: 'yellow', // an option!
textColor: 'black', // an option!
editable: false
},
// Dont forget coma - but not on the last one
{
url: 'other-events.php', // use the `url` property
color: 'red',
textColor: 'black',
editable: 'false',
allDay: 'false'
}
// any other sources...
]
});
});
One of the php pages looks like this:
<?php
echo json_encode(array(
array(
'id' => 112,
'title' => "What is this?",
'start' => "2011-10-11T13:00:00",
'end' => "2011-10-12T15:00:00",
'allDay' => "false"
),
));
?>
How do I get the events to display in the week and day agend view with the proper time (instead of being listed under the "all day" section)?
Thanks,
Extreme Newbie

After tweaking the code, I got it to work by removing the "" around false. The php page should look like this:
'allDay' => false
:)

You need to take the quotation off of "false". "false" is a string, and false is the correct "bool" false.
Also, your json call should have a query such as...
$sql = mysql_query("query") or die(mysql_error());
Followed by a while statement to retrieve the information...
while($arr = mysql_fetch_array($sql)){
$array_content[] = $arr;
}
Then encode...
echo json_encode($array_content);
This will render whatever data you have in the database.
A simple if statement within the while statement will change the string to a bool like so...
if($arr['allDay'] === "true"){
$arr['allDay'] = true;
} else {
$arr['allDay'] = false;
}
}
Hope this helps!

Related

Sweetalert2 is it possible to display the alert only once?

I have a question. Is it possible for sweetalert2 to appear only once per page?
So that it would remember that it had already displayed the alert once.
Swal.fire({
title: 'Do you want to save the changes?',
showDenyButton: true,
showCancelButton: true,
confirmButtonText: `Save`,
denyButtonText: `Don't save`,
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
Swal.fire('Saved!', '', 'success');
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info');
}
});
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
The sweetalert library doesn't have specific functionality for this, so it will need to be written by yourself. Below is an example of how you could make it work to only have the alert open once.
// Add this variable in a place where it will persist (like the component or service)
hasAlertOpened = false;
// Add this in the function where the Swal.fire is executed
if (this.hasAlertOpened) {
// Prevent continueing if the alert has opened before
return;
}
Swal.fire({
title: 'Do you want to save the changes?',
showDenyButton: true, showCancelButton: true,
confirmButtonText: `Save`,
denyButtonText: `Don't save`,
}).then((result) => {
// Once it gets here we set the value to true, so it will not get here again unless you set hasAlertOpened to false somewhere else
this.hasAlertOpened = true;
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
Swal.fire('Saved!', '', 'success')
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info')
}
});

FullCalendar not fetching Events from Feed of DB Query (Laravel)

My event feed does only work when I hardcode the events in my EventController. Once I get them from database query the events are not displayed though the first event is the exact same I used in the hardcoded event.
Works (Calendar shows event):
public function eventFeed(Request $request)
{
$events = array(
[
"id" => 1,
"resourceId" => '1115',
"title" => 'Wartung Steuerung',
"start" => '2020-06-11 00:20:23',
"end" => '2020-06-28 21:21:30',
]
);
return json_encode($events);
}
From the calendar view I have a control Ajax call that fetches the same feed as FullCalendar. The received feed is
[{"id":1,"resourceId":"1115","title":"Wartung Steuerung","start":"2020-06-11 00:20:23","end":"2020-06-28 21:21:30"}]
Does not work (Calendar stays empty):
public function eventFeed(Request $request)
{
$start = Carbon::create($request->input('start'));
$end = Carbon::create($request->input('end'));
$events = DB::table('toolplanview')->select('id','resourceId','title','start','end')
->whereDate('start', '>=', $start)->whereDate('end', '<=', $end)->get();
return json_encode($events);
}
The feed from the DB query is:
[{"id":1,"resourceId":"1115","title":"Wartung Steuerung","start":"2020-06-11 00:20:23","end":"2020-06-28 21:21:30"},{"id":2,"resourceId":"1157","title":"Werkstatt","start":"2020-06-12 09:09:41","end":"2020-06-24 03:45:59"},{"id":3,"resourceId":"1136","title":"Neue Toranlage","start":"2020-06-10 20:29:44","end":"2020-06-23 04:26:38"},{"id":4,"resourceId":"1138","title":"Neue Toranlage","start":"2020-06-10 03:23:12","end":"2020-06-28 11:20:36"}]
I dont see why this feed would not work. My calendar:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
locale: 'de',
plugins: [ 'interaction', 'resourceTimeline' ],
defaultView: 'resourceTimelineWeek',
editable: true,
titleFormat: { year: 'numeric', month: '2-digit', day: '2-digit' },
header: {
right: 'today prev,next'
},
slotLabelFormat: [
{ month: 'long', year: 'numeric' }, // top level of text
{ weekday: 'short', day: '2-digit' } // lower level of text
],
resources: 'http://localhost/matpro/public/resource-feed',
events: 'http://localhost/matpro/public/event-feed',
});
calendar.render();
});
I found the reason for this behaviour, the issue is the where clause of my DB query:
$events = DB::table('events')->select('id','resourceId','title','start','end')->get();
->whereDate('start', '>=', $start)->whereDate('end', '<=', $end)->get();
When calender e.g. displays a week from 01.06. to 08.06 and one of my (generally longer) events starts on 30.05. and ends on 05.06. this event won't be displayed due to the where clauses in my query. The example dates I picked for testing accidentally overlapped with the calender start or end and therefore did not show up.

Why fullCalendar doesn't show event?

I try to show some events from database in my fullCalendar but it doesn't work? My app is on Symfony 3. First I installed the ancarebeca/fullcalendar, I followed the installation step by step and my agenda is here! In my controller, I have a method to return a JSON array like this:
[{"1":{"id":1,"title":"test","start":"2017-08-01
18:00:00","end":"2017-08-01
20:00:00","allDay":true,"editable":true,"startEditable":true,"durationEditable":true,"overlap":true,"url":"","backgroundColor":"","textColor":"","className":"","rendering":"","constraint":1,"source":"","color":""},"2":{"id":2,"title":"test2","start":"2017-08-02
15:00:00","end":"2017-08-02
16:00:00","allDay":true,"editable":true,"startEditable":true,"durationEditable":true,"overlap":true,"url":"","backgroundColor":"","textColor":"","className":"","rendering":"","constraint":1,"source":"","color":""}}]
If you want look my method:
public function loadAction()
{
//dump($calendarService);die();
$em = $this->getDoctrine()->getManager();
$evenements = $em->getRepository('MALrmBundle:CalendarEvent')->findAll();
$calendarService = $this->get('ma_lrm_bundle.service.listener');
$events = array();
foreach ($evenements as $key => $evenement)
{
$events[$evenement->getId()]=$calendarService->loadData($evenement);
}
$response = new JsonResponse($events);
return $response->setData(array($events));
}
At the end, in my js file, i just call the url, like this:
events: 'http://localhost/ligne_rh/web/app_dev.php/admin/accueil/calendar',
...But i have no return in my calendar...
i also post my full Js file:
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev, next',
center: 'title',
right: 'month, agendaWeek, agendaDay'
},
timezone: ('Europe/London'),
businessHours: {
start: '09:00',
end: '17:30',
dow: [1, 2, 3, 4, 5]
},
allDaySlot: false,
defaultView: 'agendaWeek',
lazyFetching: true,
firstDay: 1,
selectable: true,
timeFormat: {
agenda: 'h:mmt',
'': 'h:mmt'
},
/*columnFormat: {
month: 'ddd',
week: 'ddd D/M',
day: 'dddd'
},*/
editable: true,
eventDurationEditable: true,
events: 'http://localhost/ligne_rh/web/app_dev.php/admin/accueil/calendar',
});
});
Please help me.
Your JSON is structured differently than it expects.
[{"1":{"title":"test","start":"2017-08-01 18:00"}}]
should be like
[{"title":"Title","test":"2017-08-01 18:00"}]
To fix, try changing
$events[$evenement->getId()]=$calendarService->loadData($evenement);
to
$events[]=$calendarService->loadData($evenement);
As an aside, I'm not familiar with Symphony but the return may be as easy as return $response;
since you already use $events in the $response = new JsonResponse($events);
or just return new JsonResponse($events);

dojo Grid Json issue

I have this code
dojo.ready(function(){
inventoryStore = new dojo.store.JsonRest({
target: "http://localhost:9080/driver/dojoMVC",
idProperty: "name",
put: function(object, options){
if(object.quantity < 0){
throw new Error("quantity must not be negative");
}
}
});
results = inventoryStore.query("");
var storeData = new dojo.data.ItemFileWriteStore({
data:dojo.fromJson(results)
});
gridLayout = [
{ name: 'Name', field: 'name', editable: true},
{ name: 'Quantity', field: 'quantity'},
{ name: 'Category', field: 'category'}];
var grid = new dojox.grid.DataGrid({
store: storeData,
clientSort: true,
structure: gridLayout
}, dojo.byId("gridElement"));
grid.startup();
When i run it i receive this strange error in FF console
SyntaxError: missing ] after element list
[Break On This Error]
([object Object])
json.js (line 26, col 9)
Can anyone help me with this?
Thanks
maybe you must setup your Layout like this :
var layout = [[
{name:"Id", field: "ident", width:"30%"},
{name:"Name", field: "name", width:"70%"}
]];
In Ev'ry Example i find in dojo the layout is in double brackets.
This would explain why the Error says " missing ]".
Look:
http://dojotoolkit.org/reference-guide/1.9/dojo/data/ItemFileWriteStore.html?highlight=itemfilewritestore#itemfilewritestore-changes-reflected-in-dojox-data-datagrid
Update1
so the Error lies in the store. Have you tried to fill in the data like:
results = inventoryStore.query( name : "*"); // to query all items
Have you checked it there are any results in "results"?
var storeData = new dojo.data.ItemFileWriteStore({
data:results
});
After all i would try to fill in the data without dojo.fromJson.
Give it a try.
Regards, Miriam
The problem is inside the code you posted, which has a syntax error at the very end around line 26. You started with dojo.ready({ but didn't finish it with });
Here, reformatted to make it more obvious:
dojo.ready(function(){
inventoryStore = new dojo.store.JsonRest({
target: "http://localhost:9080/driver/dojoMVC",
idProperty: "name",
put: function(object, options){
if(object.quantity < 0){
throw new Error("quantity must not be negative");
}
}
});
results = inventoryStore.query("");
var storeData = new dojo.data.ItemFileWriteStore({
data:dojo.fromJson(results)
});
gridLayout = [
{ name: 'Name', field: 'name', editable: true},
{ name: 'Quantity', field: 'quantity'},
{ name: 'Category', field: 'category'}
];
var grid = new dojox.grid.DataGrid({
store: storeData,
clientSort: true,
structure: gridLayout
}, dojo.byId("gridElement"));
grid.startup();
Try adding:
});
Also, you're missing some var keywords in there.

How to insert a radio group inside data-grid?

I have a rough model of my application which looks some like as shown in picture below:
I am using jquery easyui data-grid framework to get this but i am not able to insert radio group type as one of my column as shown in Status column of my picture. Can anyone please help me how to insert radio button inside data-grid table? And other thing is, is the datagrid is only way to get these type of functions or any other way through which we can get same thing? If anyone know any other way please help me.
Thank you.
I am using easyui grid and other components too. You can use easyui datagrid's formatter property look here
On formatter property you can add any innerHTML like radiobuttons,buttons,labels etc to datagridcolumns.Look my example below, I am using this sample on my project;
var btnid="";
FILL_TESTGRID: function (_data) {
try {
$('#TestGrid').datagrid({
singleSelect: true,
remoteSort: false,
fitcolumns: true,
nowrap: false,
columns: [[
{ field: 'ID', title: 'ID', sortable: true },
{ field: 'NAME', title: 'NAME', sortable: true },
{ field: 'action', title: 'ColumntTitle3', formatter: function (value, row, index) {
var col;
if (row.ID!= null) {
col = '<input type="button" id="Btn'+row.ID+'" onclick="TestFunc(' + row.ID + ')" value="Add" class="GridButton"/>';
btnid = "Btn"+row.ID; //set to a global for getting out grid
}
return col;
}
}
]]
}
catch (err) {
alert(err)
}
}
}
document.getElemntById(btnid); //getting button, radio or text (value,checked etc)