I'm using FullCalendar in my Symfony project and I want to load events from database and show them in calendar for user.
According to documentation I have create a AJAX request to server on my calendar.html.twig page and store response in localStorage. This is what I done:
$(document).ready(function () {
var events = [];
$.ajax({
url: '{{ path('property.get.reservations') }}',
method: 'post',
data: {
'propertyId': {{ propertyId }}
}, success: function (data) {
console.log('running script within calendar.html.twig')
$.each(data, function (key, value) {
var event = JSON.stringify(value);
events.push(event);
});
localStorage.setItem('events', events);
}
});
});
Next I'm trying to use this storaged data in my calnedarService.js in this way:
$('#calendar').fullCalendar({
selectable: false,
header: {
left: 'prev,next',
center: 'title',
right: ''
},
editable: true,
events: localStorage.getItem('events'),
/* another code */
I get an error in the console:
No route found for "GET /admin/property/edit/1/%7B%22id%22:1,%22start%22:%222016-12-04T00:00:00.000Z%22,%22end%22:%222016-12-07T00:00:00.000Z%22%7D" (from "my_host")
So, for the reasons which I don't know,fullCalendar try to generate route, using parameters, getting from AJAX.
Any help will appreciated
Worked for me, just put this for url :
'admin/property/edit/'
with the id var at the end of the url
Related
i have the following data
then i want to display in full calendar
<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'
},
events: function(start, end, timezone, callback) {
$.ajax({
url: '<?php echo site_url("absentMonthYearController/absentYearController/calendarShow/" . $nik) ?>',
type: 'GET',
dataType: 'JSON',
success: function(data) {
var events = [];
if (data != null) {
$.each(data, function(i, item) {
events.push({
start: item.date,
title: 'Present',
display: 'background'
})
})
}
console.log('events', events);
}
})
}
});
calendar.render();
});
the data doesn't appear in the calendar, but it does appear in console.log
There are two issues here:
events: function(start, end, timezone, callback) { is wrong for fullCalendar 5. That looks like the syntax from an earlier version. https://fullcalendar.io/docs/v5/events-function shows the function's signature in v5, which is
function( fetchInfo, successCallback, failureCallback ) {
You forgot to use the provided callback to return the events to fullCalendar. So your function is downloading the events and logging them, but they never make it to the calendar.
Therefore this:
events: function( fetchInfo, successCallback, failureCallback ) {
$.ajax({
url: '<?php echo site_url("absentMonthYearController/absentYearController/calendarShow/" . $nik) ?>',
type: 'GET',
dataType: 'JSON',
success: function(data) {
var events = [];
if (data != null) {
$.each(data, function(i, item) {
events.push({
start: item.date,
title: 'Present',
display: 'background'
})
})
}
console.log('events', events);
successCallback(events);
}
})
}
should fix it.
P.S. Really you should also be using the start and end dates provided inside the fetchInfo object to send to your server, and the server should be using them to restrict the events it returns to only those which occur (or overlap) within those dates. That way you don't return a large number of events which mostly never get viewed, instead you only return what's relevant to the date range bein displayed.
I am using fullcalendar v4 (https://fullcalendar.io/) and I am trying to delete events when the event is clicked.
When I click on an event, I have this code to delete the event:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'pt',
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
// CUSTOM CODE DATABASE
events: load.php,
eventClick:function(clickedInfo)
{
if(confirm("Are you sure you want to delete this event?"))
{
var id = clickedInfo.event.id;
$.ajax({
url:"delete.php",
type:"POST",
data:{id:id},
success: function() {
alert('Deleted!');
calendar.refetchEvents();
}
})
}
},
});
calendar.render();
});
The event is getting deleted in the database, so the function works fine, but the events don't refresh and the deleted event is still showing in the calendar. It only disappears when I fully refresh the page, which is not ideal.
Any idea why?
It doesn't look like the calendar object is ever being initialized.
I would try changing your event listener as described in the documentation:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ]
});
calendar.render();
});
Ref. https://fullcalendar.io/docs/initialize-globals
I am assuming you are using script tags, but if you're using a build system (i.e. webpack), then you can try this: https://fullcalendar.io/docs/initialize-es6
For removing an event, I would just try this:
eventClick:function(clickedInfo)
{
if(confirm("Are you sure you want to delete this event?"))
{
var id = clickedInfo.event.id;
$.ajax({
url:"delete.php",
type:"POST",
data:{id:id},
success: function() {
alert('Deleted!');
//calendar.refetchEvents(); // remove this
clickedInfo.event.remove(); // try this instead
}
})
}
},
Ref. https://fullcalendar.io/docs/Event-remove
I am trying to add events into my fullcalendar calendar with my json string. here is my code:
viewRender: function(view, element){
$.ajax({
url: 'http://www.example.com/get-events-json.php',
type: 'POST',
success: function (data) {
$('#calendar').fullCalendar('addEventSource', data);
},
fail: function() {
alert('There was an error while fetching events.');
}
});
}
});
in my success, data is:
[{"title":"John Bobby","start":"2017-05-16T15:30:00","end":"2017-05-16T15:30:00"},{title":"Jason Kaple","start":"2017-05-20T17:30:00","end":"2017-05-20T17:30:00"}]
i tried to add it using $('#calendar').fullCalendar('addEventSource', data); as you can see but i get an error message in my console:
http://www.example.com/[json (data)...] 404 (Not Found)
how can i fix this? are there any ways around this? thanks
You can also get the data from an ajax call and after the render add the elements with addEvent
function addEvent(title, date){
calendar.addEvent({
title: title,
start: date,
allDay: true,
color: 'green'
});
}
for(event of events){
addEvent(event.title, event.date)
}
how can i add new events using URL in viewRender?
viewRender: function(view, element){
}
how can i add events using a URL?
i want to do something like this?:
$.ajax({
url: 'http://www.example.com/get-events.php',
type: 'POST', // Send post data
success: function (events) {
console.log(events);
},
fail: function() {
alert('There was an error while fetching events.');
}
});
and i want to add the events in my calendar. how can i do that?
I have working code that marks waypoints on google map. I wanted to change the waypoint marking according to the Ajax response.
Here is my code - http://fiddle.jshell.net/TechmazeSolution/8fgobauz/
Your code doesn't show an attempt to use the response to update the waypoints. But anyway:
in the AJAX request, $(this) is the AJAX object and doesn't refer to $("#calcRoute")
you must call findroute() after you update the waypts array
Updated code:
$("#calcRoute").change(function () {
var self = $(this);
$.ajax({
type: "POST",
url: "ajax-response.php?" + Math.random(),
dataType: "json",
success: function (response) { console.log($(this));
if (self.val() == 1) {
start = new google.maps.LatLng(1.30365, 103.85256);
end = new google.maps.LatLng(1.29411, 103.84631);
waypts = [{
location: new google.maps.LatLng(1.28644, 103.84663),
stopover: true
}, {
location: new google.maps.LatLng(1.28627, 103.85927),
stopover: true
}];
findroute();
}
}
});
});
Updated fiddle:
http://fiddle.jshell.net/8fgobauz/1/
Use your javascript console to debug your code. You could find these errors easily.