I'm trying to set up jQuery FullCalendar by providing data as json feed trough fullcalendar events function. So basically this is my js code:
var calendar = $('#calendar').fullCalendar({
editable: true,
firstDay: 1,
header: {
left: 'prev, next today',
center: 'title',
right: 'month, agendaWeek, agendaDay'
},
events:
{
url: 'events.php',
type: 'POST',
cache: false,
error: function() {
alert('ERROR');
},
color: 'blue'
}
});
And my code from events.php which pulls data from database and makes as JSON feed + converting date to ISO8601 date strings as sayd in documentation.
// Query that retrieves events
$q = "SELECT * FROM evenement ORDER by id";
$r = mysqli_query($dbc, $q);
while ($row = mysqli_fetch_assoc($r))
{
$s = new DateTime($row['start']);
$e = new DateTime($row['end']);
$row['start'] = $s->format(DATE_ISO8601);
$row['end'] = $e->format(DATE_ISO8601);
$json[] = $row;
}
echo json_encode($json);
In IE11 and Chrome it shows all the events in calendar what are made in DB, but in FireFox the calendar is empty.. And returned response JSON string is:
[
{"id":"7","title":"Rino","start":"2014-10-22T11:55:46+0300","end":"2014-10-22T11:55:46+0300","url":"nav","allDay":"false"},
{"id":"8","title":"Rin","start":"2014-10-22T13:01:45+0300","end":"2014-10-22T13:01:45+0300","url":"Hello","allDay":"false"},
{"id":"9","title":"Rino","start":"2014-10-23T10:06:22+0300","end":"2014-10-23T10:06:22+0300","url":"Hello","allDay":"false"},
{"id":"10","title":"a","start":"2014-10-23T09:42:04+0300","end":"2014-10-23T09:42:04+0300","url":"a","allDay":"false"},
{"id":"11","title":"1","start":"2014-10-23T09:41:55+0300","end":"2014-10-23T09:41:55+0300","url":"1","allDay":"false"},
{"id":"12","title":"sdas","start":"2014-10-23T10:06:14+0300","end":"2014-10-23T10:06:14+0300","url":"1","allDay":"false"},
{"id":"13","title":"Prju","start":"2014-10-16T00:00:00+0300","end":"2014-10-17T00:00:00+0300","url":"undefined","allDay":"false"}
]
What am I missing, why in the Firefox it doesn't show any event? I have also tried clearing cache etc.. but without any results..
Related
I have a calendar.php file which looks up "php/get-events" to display calendar events from the database (This currently works as expected). I am trying to use "php/calendarupdate" to then update the database with the new start/end times that have been dragged, but the data posting to this page always comes back as undefined, so it's not finding it for some reason.
"Calendar.php"
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
initialDate: '2021-03-18',
editable: true,
eventDrop: function(event, delta) {
start=moment(event.start).format('Y-MM-DD HH:mm:ss');
end=moment(event.end).format('Y-MM-DD HH:mm:ss');
$.ajax({
url: 'php/calendarupdate.php',
data: 'title=' + event.title + '&start='+ event.start +'&end=' + event.end + '&id=' + event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
},
navLinks: true, // can click day/week names to navigate views
dayMaxEvents: true, // allow "more" link when too many events
events: {
url: '/php/get-events.php',
failure: function() {
document.getElementById('script-warning').style.display = 'block'
}
},
loading: function(bool) {
document.getElementById('loading').style.display =
bool ? 'block' : 'none';
}
});
calendar.render();
});
</script>
The following is where I get the data which successfully displays events on the calendar.
"php/get-events.php"
$stmt = $pdo->prepare("Select id,task_name,start,end,notes,task_type,status from tasks where attendees like ".$attendees);
$stmt->execute();
//$stmt->debugDumpParams();
foreach ($stmt as $row){
$rawdata[] = array('id' => $row['id'], 'title'=> $row['task_name'], 'start'=> $row['start'], 'end'=> $row['end']);
}
$rawdata = json_encode($rawdata);
echo $rawdata;
The following is the update file, which it is getting into ok, but the echo's I try to display are all undefined.
/* Values received via ajax */
echo "id -".$_POST['id'];
echo "start -".$_POST['start'];
echo "end -".$_POST['end'];
// update the records
$stmt = $pdo->prepare('UPDATE tasks SET start=?, end=? WHERE id=?');
$stmt->execute($_POST['start'], $_POST['end'], $_POST['id']);
$stmt->debugDumpParams();
It may be something simple, but from the documentation I've read, I can't seem to figure out why my variables are not posting successfully. Thanks.
You have the wrong syntax for your eventDrop signature. See https://fullcalendar.io/docs/eventDrop
It should be
eventDrop: function(info) {
And then replace
event.start
and
event.end
with
info.event.start
and
info.event.end
This will get the information you need correctly from the data which fullCalendar supplies.
I am building a college timetable with FullCalendar, php and mysql.
Events are created when you click in the calendar field; you assign a name for the event, a professor and a room. The event is saved in an sql databse.
I would like to add a search bar which would search through the timetable; a user could search for either professor, room number, event name. The timetable would update as the user types and it would re-fetch the event with that room number/event name/professor name.
Anyone have any clue how to do this?
This is the code i am using for rendering events from the mysql:
$sql = "SELECT id, title, naem, mentor, start, end, color FROM events ";
$req = $bdd->prepare($sql);
$req->execute();
$events = $req->fetchAll();
...
...
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
height:595,
defaultView: 'agendaWeek',
minTime: "07:00:00",
maxTime: "16:00:00",
editable: true,
eventLimit: true,
selectable: true,
selectHelper: true,
firstDay:"1",
select: function(start, end) {
$('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd').modal('show');
},
eventRender: function(event, element) {
element.bind('dblclick', function() {
$('#ModalEdit #id').val(event.id);
$('#ModalEdit #title').val(event.title);
$('#ModalEdit #naem').val(event.naem);
$('#ModalEdit #mentor').val(event.mentor);
$('#ModalEdit #color').val(event.color);
$('#ModalEdit').modal('show');
});
element.find('.fc-title').append("<br/>" + event.naem + "<br/>" + event.mentor);
},
eventDrop: function(event, delta, revertFunc) {
edit(event);
},
eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
edit(event);
},
events: [
<?php foreach($events as $event):
$start = explode(" ", $event['start']);
$end = explode(" ", $event['end']);
if($start[1] == '00:00:00'){
$start = $start[0];
}else{
$start = $event['start'];
}
if($end[1] == '00:00:00'){
$end = $end[0];
}else{
$end = $event['end'];
}
?>
{
id: '<?php echo $event['id']; ?>',
title: '<?php echo $event['title']; ?>',
naem: '<?php echo $event['naem']; ?>',
mentor: '<?php echo $event['mentor']; ?>',
start: '<?php echo $start; ?>',
end: '<?php echo $end; ?>',
color: '<?php echo $event['color']; ?>',
},
<?php endforeach; ?>
]
});
function edit(event){
start = event.start.format('YYYY-MM-DD HH:mm:ss');
if(event.end){
end = event.end.format('YYYY-MM-DD HH:mm:ss');
}else{
end = start;
}
id = event.id;
Event = [];
Event[0] = id;
Event[1] = start;
Event[2] = end;
$.ajax({
url: 'editEventDate.php',
type: "POST",
data: {Event:Event},
success: function(rep) {
if(rep == 'OK'){
alert('Spremljeno!');
}else{
alert('Nešto zajebaje...');
}
}
});
}
});
</script>
An autocomplete plugin such as this will help with the UI part: https://jqueryui.com/autocomplete/
Using this your user can find the IDs of the people / rooms / event names involved and choose one from the list of possibilities. You will need an ajax call and an associated server endpoint which will search the database based on what the user types into the box and return any matching results.
Then in fullCalendar use this format for your event feed https://fullcalendar.io/docs/event_data/events_function/ so that you can pass the selected ID from the autocomplete to the server as an extra parameter when fetching events.
Next listen to the autocomplete's "select" event (http://api.jqueryui.com/autocomplete/#event-select) and when a value is chosen, call "refetchEvents" (https://fullcalendar.io/docs/event_data/refetchEvents/) on the fullCalendar. This will update your events list, restricting it by the specific person/room/event ID as well as the standard parameters (i.e. those being the current start/end dates of the visible view).
I'm using the jQuery plugin Fullcalendar so far I was able to display the data stored in my MySQL Database but it is not displaying the right way. What I mean is:
e.g.:
}
"id":"1","title":"Test",
"start":"2015-01-28 10:30:00",
"end":"2015-02-04 12:30:00",
"url":"",
"allDay":"false"
}
This is one record in my Database. It is supposed to display on my calendar
2015-01-28 10:30:00 to 2015-02-04 12:30:00.
But it's not. Instead allDay is true(even if in the database it say false) and I need to add an other day too.
e.g.: If I want to display the dates from 16-03 to 17-03, I need to add an other day -> 16-03 to 18-03 (so that it displays 16-03 to 17-03).
What I mean is when I put a record after 9 o'clock the event "box" or div extends to the right date. Other wise it doesn't extend to the right date.
But by default businessHours are false. (I even added : businessHours: false) but no success.
This is my SELECT query:
<?php
$json = array();
// Query that retrieves events
$querySQL = "SELECT * FROM evenement";
// connection to the database
try {
$bdd = new PDO("mysql:host=localhost;dbname=dbcontrol", "root", "");
} catch(Exception $e) {
exit('Unable to connect to database.');
}
// Execute the query
$result = $bdd->query($querySQL) or die(print_r($bdd->errorInfo()));
// sending the encoded result to success page
echo json_encode($result->fetchAll(PDO::FETCH_ASSOC));
?>
And this is my jQuery:
$(document).ready(function() {
var currentTime = new Date();
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: currentTime,
editable: true,
droppable: true,
eventBackgroundColor: '#A80000',
eventBorderColor: '#A80000',
eventLimit: true, // allow "more" link when too many events
events: {
url: './php/select-events.php',
error: function() {
$('#script-warning').show();
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
Problem -> "allDay":"false"
allDay should have a boolean value, not the string "false". Changing it to "allDay":false will make it work.
I'm using http://arshaw.com/fullcalendar/ to display a full calendar to show events from a DB via json. I need to mark a date as booked by changing the color of the calender cell.
So im guessing I need something like
If (date == booked){
$(element).css("backgroundColor", "red");
}
Here is the code for populating the calendar.
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
events: {
url: '{{URL::to('/json')}}',
type: 'GET',
},
'': 'h(:mm)t' ,// uppercase H for 24-hour clock
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
Here is my json object
public function json()
{
$bookings = Booking::all();
//dd($bookings);
foreach ($bookings as $b)
$data[] = ['title'=>$b->status,
'start'=> $b->event_date .' ' .$b->start_time,
'end'=>$b->event_date .' ' .$b->end_time,
'description'=>'',
'color'=>'',
'status'=>$b->status,
'backgroundColor' => ($b->status ==='confirmed'?'#FFC0CB' : '#FFA500'),
'slotMinutes'=>'10',
'allDay'=>false];
//return $bookings;
return $data;
}
Ideally I'd like to send an array of dates I need to mark as booked.
If someone can nudge me in the correct direction I'd really appriciated it.
Thanks
this is how I solved it.
eventRender: function (event, element, monthView) {
if (event.title == "booked") {
var date = $.fullCalendar.formatDate( event.start , 'yyyy-MM-dd' );//event.start;
$('.fc-day[data-date="' + date + '"]').addClass('booked');
}
},
I'm a newbie php/js/mysql programmer.
I'm trying to create a pie chart in highcharts using jquery, where the data is discovered dynamically via ajax from echo json_encode in php (includes a select query from mysql).
Two problems:
1) The pie chart has these trailing "Slice: 0 %" flares everywhere. Don't know where these are coming from, what it means, nor how to fix it.
2) Json is new to me. The json data feed appears to be getting through (firebug sees it), but the format looks like this. I'm trying to boil it down to name and percent number only. Like this ['Pages', 45.0] but not sure how. Is this done in the json/php or should it be done in the sql query itself?
[{"contenttype":"BLOGPOST","count(*)":"2076"},{"contenttype":"COMMENT","count(*)":"2054"},{"contenttype":"MAIL","count(*)":"29448"},{"contenttype":"PAGE","count(*)":"33819"}]
Any help much appreciated
The highcharts js file is here:
//Define the chart variable globally,
var chart;
//Request data from the server, add it to the graph and set a timeout to request again
function requestData() {
$.ajax({
url: 'hc1.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function(){
//Create the test chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'mycontainer2',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
events: {load: requestData}
},
title: {text: 'Content Types in Wiki'},
tooltip: {formatter: function() {return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
//color: Highcharts.theme.textColor || '#000000',
//connectorColor: Highcharts.theme.textColor || '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Content',
data: []
}]
});
The php file is here:
<?php
// Set the JSON header
header("Content-type: text/json");
// Connect to db
include('dbconnect.php');
// Count version 1 of content types of interest
$query = ("select contenttype, count(*)
from CONTENT
where version='1' and contenttype='page' or contenttype='comment' or contenttype='blogpost' or contenttype='mail' or contenttype='drafts'
group by CONTENT.contenttype;");
// execute query
$result = mysql_query($query) or die ("Error in query: $query. ".mysql_error());
// create a php array and echo it as json
//$row = mysql_fetch_assoc($result);
//echo json_encode($row);
$results = array(); while ( $row = mysql_fetch_assoc( $result )) { $results[] = $row; }
echo json_encode($results);
?>
First problem, how do you get your data into a format that highcharts is going to accept (namely arrays of arrays, [[name,percent],[nextname,percent],etc])? I would handle this in your PHP:
<snip>
// execute query
$result = mysql_query($query) or die ("Error in query: $query. ".mysql_error());
$total = 0;
$results = array();
while ( $row = mysql_fetch_assoc( $result )) {
$results[$row["contenttype"] = $row["count()"];
$total += $row["count()"];
}
$forHigh = array();
foreach ($results as $k => $v) {
$forHigh[]=array($k,($v/$total) * 100); // get percent and push onto array
}
echo json_encode($forHigh); // this should be an array of array
Now that our JSON returned structure is ready for HighCharts, we just need to call the plot creation once after our JSON call to create the plot. I would do it in the success callback of the $.ajax call.
$.ajax({
url: 'hc1.php',
success: function(jsonData) {
chart = new Highcharts.Chart({
<snip>
series: [{
type: 'pie',
name: 'Content',
data: jsonData
}]
<snip>
},
cache: false
});