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.
Related
I am using Laravel Datatables. I am successfully in loading data from a MySQL database through a query.
The problem I have is to be able to query the table by month by sending a month number. I am not able to successfully send a parameter containing the month number to my ajax function on the back end.
I tried many variations but nothing worked.
I get "Undefined index: month"
Here are my code snippets:
Javascript ajax:
<script>
$(function() {
var month = "<?= $brandData['month'] ?>"; // contains a month number
$('#accounts').DataTable({
processing: true,
serverSide: true,
type: "POST",
ajax: '{!! url('brand_ajax') !!}',
data : {'month' : month },
columns: [
{ data: 'brand_name', name: 'brand_name' , className: 'text-xl-left'},
{ data: 'brand_volume', name: 'brand_volume', className: 'text-xl-right' },
{ data: 'brand_margin', name: 'brand_margin' , className: 'text-xl-right'},
{ data: 'brand_commission', name: 'brand_commission', className: 'text-xl-right' },
]
});
});
</script>
Here is my ajax function to return data
public function brand_ajax()
{
$month = $_POST["month"];
$brands = SaleInvoice::select(DB::raw('brands.name as brand_name,
avg(NULLIF(margin,0)) as brand_margin,
sum(commission) as brand_commission,
sum(amt_invoiced) as brand_volume
'))
->join('brands', 'brands.ext_id', '=', 'saleinvoices.brand_id')
->where('brands.is_active', '=', true)
// ->whereRaw('MONTH(saleinvoices.invoice_date) = ?', (11))
->whereRaw('MONTH(saleinvoices.invoice_date) = ?', ($month))
->having('brand_volume', '>', 0)
->groupBy('brands.name')
->get();
return DataTables::of($brands)
->editColumn('brand_commission', function ($brand) {
return number_format($brand->brand_commission, 2);
})
->editColumn('brand_margin', function ($brand) {
return number_format($brand->brand_margin, 2);
})
->editColumn('brand_volume', function ($brand) {
return number_format($brand->brand_volume, 2);
})
->make(true);
}
I resolved it by myself. I just added the parameter to the URL string.
url('brand_ajax/' . $month)
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);
Here is the relevant code:
VIEW PAGE:
<script type="text/javascript">
$(document).on("click", ".calendarview", function () {
var roomid = $(this).data('id');
//alert(roomid);exit;
$('#calendar_view').fullCalendar({
//events: [
// {
// title: 'All Day Event',
// start: roomid
// }
// ]
events: {
url: base_url+'home/calview',
dataType: 'json',
data: {roomid: roomid},
type: 'POST', // Send post data
error: function() {
alert('There was an error while fetching events.');
}
}
});
});
</script>
IN CONTROLLER
function calview()
{
$room_id =$this->input->post('roomid');
$events=$this->Home_model->find_room_availability($room_id);
$data_events = array();
foreach($events as $r) {
$data_events[] = array(
//"title" => $r->available,
"description" => 'available',
"start" => $r->dt);
}
echo json_encode(array("events" => $data_events));
exit();
}
MODEL:
function find_room_availability($room_id){
$result = $this->db->query("SELECT x.dt , r.room_cnt - COALESCE(SUM(`booking_cnt`),0) available FROM calendar_table x LEFT JOIN bookinglist y ON x.dt >= y.`date_from` AND x.dt < y.`date_to` LEFT JOIN rooms r ON r.id=$room_id WHERE x.dt BETWEEN now() - interval 3 month AND now() + interval 5 month GROUP BY dt ");
//echo $this->db->last_query();
//exit;
return $result->result();
}
Ajax response is like
[[{"title":"10","start":"2017-04-26"},{"title":"10","start":"2017-04-27"},
{"title":"10","start":"2017-04-28"},{"title":"10","start":"2017-04-29"},
{"title":"10","start":"2017-04-30"},{"title":"10","start":"2017-05-01"},
{"title":"10","start":"2017-05-02"},{"title":"10","start":"2017-05-03"},
{"title":"10","start":"2017-05-04"},{"title":"10","start":"2017-05-05"},
{"title":"10","start":"2017-05-06"},{"title":"10","start":"2017-05-07"},
{"title":"10","start":"2017-05-08"},{"title":"10","start":"2017-05-09"},
{"title":"10","start":"2017-05-10"},{"title":"10","start":"2017-05-11"},
{"title":"10","start":"2017-05-12"},{"title":"10","start":"2017-05-13"},
{"title":"10","start":"2017-05-14"},{"title":"10","start":"2017-05-15"},
{"title":"10","start":"2017-05-16"},{"title":"10","start":"2017-05-17"},}]]
can anyone please help me to find a solution
Your JSON is an array within an array, which fullCalendar cannot understand. It expects a single array of events.
This is the problem:
echo json_encode(array("events" => $data_events));
Since $data_events is already an array, there's no need to wrap it inside another one.
echo json_encode($data_events);
should be sufficient, and produce the format that fullCalendar is expecting.
N.B. There also appears to be a stray extra bracket at the end of your JSON sample: ,}]] but I'm assuming this is just a typo.
I've got a project in Symfony2 (v. 2.2.11) in which I've got a calendar (fullCalendar) and when a user clicks in a day I open a overlay with a form and my start and end date got the selected day as value (format yyyy-MM-dd). If I inspect the element there's a value with the correct date but is not showing in input box, only shows when I click a date (I'm using jquery date chooser) the value appears in the input box (the new one).
This is my FormType code for start and end date:
->add('startDate','date',array(
'label'=>'ueb_crossfit_class.form.event.labels.startDate',
'widget' => 'single_text',
'format' => "yyyy-MM-dd",
'attr' => array('class' => "input-date datepicker")
))
->add('endDate','date',array(
'required' => false,
'label'=>'ueb_crossfit_class.form.event.labels.endDate',
'widget' => 'single_text',
'format' => "yyyy-MM-dd",
'attr' => array('class' => "input-date datepicker")
))
This is the generated input (for start date):
<input id="ueb_crossfiterz_bundle_classbundle_eventtype_startDate" class="input-date datepicker hasDatepicker" type="date" value="2013-12-27" required="required" name="ueb_crossfiterz_bundle_classbundle_eventtype[startDate]">
I've already tested with Firefox and Chrome and both doesn't show the value but only Firefox show that red line in input (as appear in image).
[UPDATE]
As asked in comments here's my js code for initializing fullCalendar:
$(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar-holder').fullCalendar({
header: {
left: 'prev, next',
center: 'title',
right: 'month,agendaWeek,agendaDay,'
},
lazyFetching:true,
selectable: true,
timeFormat: {
// for agendaWeek and agendaDay
agenda: 'HH:mm{ - HH:mm }', // 5:00 - 6:30
// for all other views
'': 'HH:mm{ - HH:mm }' // 7p
},
eventSources: [
{
url: Routing.generate('ueb_class_getEvents'),
type: 'POST',
error: function() {
//alert('There was an error while fetching Google Calendar!');
}
}
],
eventClick: function(event) {
clickEvent(event);
return false;
},
select: function(start, end, allDay){
selectEvent(start, end, allDay);
}
});
});
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!