im feeding the calendar with the following function:
$('#calendar').fullCalendar( {
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay' },
editable: true,
eventLimit: true,
events: function(callback) {
$.ajax({
url: '/appointments.json',
dataType: 'json',
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
But i keep getting this error:
object is not a function //callback(events) line
On the js console of the browser. Any idea what the problem might be?
Assuming you are using FullCalendar 2.*, as stated in the documentation, the signature for events is
function( start, end, timezone, callback ) { }
The parameter with the name callback is, in fact, start which is a momentjs object. To resolve your issue you must add the parameters to your function, so your code would be:
events: function( start, end, timezone, callback ) {
This will work as long as your events (passed to the callback) have the correct format and parameters defined in the documentation.
Edit:
If you want to set background color of each event according to a value on its json attributes, you should use eventRender.
Check this jsfiddle where the background of each event is set when the event is rendering.
As is demonstrated in the jsfiddle, you can change the background, conditionally, based on a value provided by the json.
Related
I want to add the ability to schedule in fullcalendar, Laravel. The method is working as expected however, I do not understand what to do with the response data.
$('#calendar').fullCalendar({
header: {
left : 'today, prev,next',
center: 'title',
right : '',
},
locale:'ko',
height:'parent',
events : function(start, end, timezone, callback){
var month = $('#calendar').fullCalendar('getDate').format('YYYY-MM');
var url = '{{route('reservation.get_schedule',[request()->id])}}';
alert(url)
$.ajax({
type : 'get',
data : {'date' : month},
url : url,
datatype : 'json',
success : function(data){
console.log(data); // How do I use the data
}
});
}
});
The documentation for events-as-a-function says:
[The function]... will also be given callback, a function that must be called when
the custom event function has generated its events. It is the event
function’s responsibility to make sure callback is being called with
an array of Event Objects.
There's also an example on that page where the callback function is employed to pass the event data returned from the AJAX call into fullCalendar.
So in your case (assuming that your event data is already in the format required by fullCalendar and doesn't need any transformation) you would simply add a call to this function inside your "success" callback:
events : function(start, end, timezone, callback){
var month = $('#calendar').fullCalendar('getDate').format('YYYY-MM');
var url = '{{route('reservation.get_schedule',[request()->id])}}';
alert(url)
$.ajax({
type : 'get',
data : {'date' : month},
url : url,
datatype : 'json',
success : function(data){
console.log(data);
callback(data); //pass the event data to fullCalendar via the provided callback function
}
});
}
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: 'myxmlfeed.php',
dataType: 'xml',
data: {
// our hypothetical feed requires UNIX timestamps
start: start.unix(),
end: end.unix()
},
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
}
});
DOC
Hi I am trying to implement FullCalendar.js with Asp.Net MVC. I am abl to show empty calendar but my events are not getting loaded in the Calendar.
$.ajax({
type: 'Get',
url: "/Matter/GetMatterEventsSummary",
data: data,
datatype: "Json",
contentType: "application/json",
success: function (doc) {
debugger;
$('#calendar').fullCalendar();
var events = [];
$(doc).find('[object Object],[object Object]').each(function () {
debugger;
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
// });
$('#calendar').fullCalendar('refetchEvents');
// callback(events);
}
});
it comes to success method and it has two events in it . but dont know why theseevents are not loaded into FullCalendar and also after this Calendar is not comingg automatically.
I guess it is not going in events.push. When I do hover on doc it shows "[object Object],[object Object]" and in this it has two records on [0] and [1].
Please help me in this.
Try using
$('#calendar').fullCalendar( 'rerenderEvents' )
after your events have been pulled.
Also, make sure to use the code from the official documentation properly. Try the following (untested):
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
type: 'Get',
url: "/Matter/GetMatterEventsSummary",
data: data,
datatype: "Json",
contentType: "application/json",,
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
}
});
If you now want to refetch your events, call :
$('#calendar').fullCalendar('refetchEvents');
where necessary.
EDIT:
Since your are actually pulling data from a JSON feed, the following code may even be enough:
$('#calendar').fullCalendar({
events: '/Matter/GetMatterEventsSummary'
});
Check the documentation here:
EDIT2:
To dynamically modify the request you send to the backend (depending on a dropdown or something else), may be achieved as follows:
var myValue = 10;
$('#calendar').fullCalendar({
events: '/Matter/GetMatterEventsSummary',
data: function() { // a function that returns an object
return {
dynamic_value: myValue
};
}
});
In my Rails app I am using the FullCalendar Rails gem and attempting to create user "bookings" with jQuery/AJAX. I currently am handling the fullcalendar javascript in a script tag on my profile show page as I wasn't sure how to access a dynamic route outside an erb file. Unfortunately my AJAX doesn't seem to be working at all. The select function still behaves as it should but nothing seems to be happening with the AJAX as I don't get a success or failure message and nothing is showing up in my network tab. I'm guessing I don't have the url route set up correctly and I also assume my general set up of the AJAX may be incorrect. UPDATE: I actually am getting a console error now when I submit an event showing up in the fullcalendar javascript file itself: 'Uncaught TypeError: Cannot read property '_calendar' of undefined’. I'm not really sure where that is coming from and there is still nothing showing up in my network tab from the ajax request.
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-01-12',
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = "Unavailable";
var eventData;
eventData = {
title: title,
start: start,
end: end,
color: 'grey'
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
$('#calendar').fullCalendar('unselect');
$.ajax({
method: "POST",
data: {start_time: start, end_time: end, first_name: title, color: 'grey'},
url: "<%= profile_bookings_url(#profile) %>",
success: function(data){
console.log(data);
},
error: function(data){
alert("something went wrong, refersh and try again")
}
})
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: window.location.href + '.json'
});
});
The select function above adds an event to the calendar with jQuery. What I would like to have happen with my AJAX is to submit that event to my bookings create action in my bookings controller.
def create
#profile = Profile.friendly.find(params[:profile_id])
#booking = #profile.bookings.new(booking_params)
if #booking.save
flash[:notice] = "Sending your booking request now."
#booking.notify_host
redirect_to profile_booking_path(#profile, #booking)
else
flash[:alert] = "See Errors Below"
render "/profiles/show"
end
end
Can anyone help me fix that AJAX call? I haven't really worked with it before so any help would be greatly appreciated! If there's any other info/code I should post, please let me know.
I ended up solving the issue. It had to do with the the format of my data: element of my ajax call. The working code:
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-01-12',
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = "Unavailable";
var eventData;
eventData = {
title: title,
start: start,
end: end,
color: 'grey'
};
$.ajax({
method: "POST",
data: {booking:{start_time: start._d, end_time: end._d, first_name: title}},
url: "<%= profile_bookings_path(#profile, #booking) %>",
success: function(data){
console.log(data);
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
$('#calendar').fullCalendar('unselect');
},
error: function(data){
alert("something went wrong, refersh and try again")
}
});
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: window.location.href + '.json'
});
});
It had to be wrapped with a booking object and my start and end times we moment.js objects so I had to access the actual start and end time from there. I'm still interested in areas to improve the code if need be, but at least it's working.
I can see some errors in your code.
change this:
url: "{<%= profile_bookings_url(#profile) %>}"
by this:
url: "<%= profile_bookings_url(#profile) %>"
I'm using fullcalendar,
how can I fetch more events from same server side, multiple urls?
The initial one works, I just want to add additional events when they arrive(ajax).
You could use Ajax to get the data and then add dynamically the new source
$.ajax({
url: "test.html",
success: function(data){
var source = { events: [
{
title: data.getTitle(),
start: new Date(year, month, day)
}
]};
$('#calendar').fullCalendar( 'addEventSource', source );
}
});
If each and every time you are using a different URL, then you can simply use addEventSource with the new URL.
If you are attempting to use the same URL, you can get all events (old and new) using refetchEvents.
You can also get the JSON and create the event as a client event using renderEvent. The latter is the most "ajax-y" of the options. In this case have your source return the JSON that represents the events, iterate through the array of new events, and call renderEvent on it.
// this call goes in a poll or happens when the something should trigger a
// fetching of new events
$.ajax({
url: "path/to/event/source",
success: function(data){
$.each(data, function(index, event)
$('#calendar').fullCalendar('renderEvent', event);
);
}
});
The ajax call done can also insert in the calendar code
$.ajax({
url: url,
type: 'GET',
data: { },
error: function() {
alert('there was an error while fetching events!');
}
}).done(function (doc) {
var event = Array();
$.each(doc, function(i, entry)
event.push({title: entry.title, start: entry.start});
});
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-06-12',
editable: true,
events: event
});
});
Here is my code
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
dayClick: function() {
alert('nemke');
},
events: function(start, end, callback) {
$.ajax({
url: 'UserCalendarService.asmx/GetEvents',
type: 'POST',
dataType: 'xml',
data: {start: + Math.round(start.getTime() / 1000),end: + Math.round(end.getTime() / 1000)},
success: function(result) {
var events = [];
$(result).find('Event').each(function() {
events.push({
title: $(this).find('Title').text(),
start: $(this).find('Start').text(),
editable: $(this).find('Editable').text()
});
});
callback(events);
}
});
},
disableResizing: true,
editable: false
//disableDragging:true
})
});
This property editable false is not working. I tried to set each event it's behavior from the server, and it didn't work. Then I tried to set the property to false, and it also didn't work. I need to set some events editable and some not. I can only set disableDragging, but that doesn't solve my issue 'cause I need some of the events to be able to drag.
This property only works with event source set as array like this example
Looks like this ajax callback is not working. Has anyone had similar issue?
Fullcalendar link
the .text() method returns a string and editable is supposed to have a boolean value