We Keep Coding

Fullcalendar filtrering events with select

I want to filter events by changing a select option, but I'm not sure how. Some help please(I want to clarify that this is the first time I use Json and FullCalendar)
Example:
Controller cCalendar
public function geteventos(){
$rut_usu = $this->input->post('rut_usu');
$r = $this->mCalendar->geteventos($rut_usu);
echo json_encode($r);
}
Model mCalendar
public function geteventos($rut_usu){
$this->db->select('CONCAT(estudiantes.pnombre," ", estudiantes.apellido_pa," ", estudiantes.apellido_ma,", ",motivos_citas.descripcion_mot) As title ,citas.id_ci id, citas.fecha_ini start, citas.fecha_ter end');
$this->db->from('citas');
$this->db->join('estudiantes', 'citas.rut_estu = estudiantes.rut_estu');
$this->db->join('motivos_citas','citas.id_mot = motivos_citas.id_mot');
$this->db->join('usuarios','citas.rut_usu = usuarios.rut_usu');
$this->db->where('usuarios.rut_usu',$rut_usu);
return $this->db->get()->result();
}
Javascript
$("#rut_usu").change(function(){
rut_usu = $('#rut_usu').val();
$.post('<?php echo base_url();?>cCalendar/geteventos',
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
defaultDate: new Date(),
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: true,
events: $.parseJSON(data)
});
}));

Your controller and modal is not any changes.
Only changes in js:
Create new javascript function:
function getEvents(rut_usu)
{
$('#calendar').fullCalendar( 'removeEvents');
$.ajax({
type:"GET",
url: "<?=base_url();?>cCalendar/geteventos",
dataType: 'json',
data: {rut_usu:rut_usu },
success: function(data){
$.each(data, function(index, event){
$('#calendar').fullCalendar('renderEvent', event);
});
}
});
}
Call this function into on change dropdown event:
<select id="rut_usu" OnChange="getEvents(this.value);">
-----
</select>
Render Event when change select option.

How to pass a dynamic route to AJAX POST request in Rails

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) %>"

Full Calendar Event Sources Data passing null values in parameter

I am using jQuery Full calendar. A Button is placed when clicked the full calendar will send post request.
On button click the calendar needs to get the values from textbox and refetch events from the site.
The error is when the button is clicked the null values from text box is sent and default select item value is being sent rather then new values that are entered by the user.
How to solve this. Following is the code
$('#search').click(function() {
$('#calendar').fullCalendar('refetchEvents');
});
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay'
},
cache: false,
eventSources: [
{
url: "http://" + window.location.host + "/Appointment/Appointments/",
type: 'POST',
data: {
doctor: $("input[name=Doctor]").val(), **//NULL VALUE IS SENT**
room: $('select[name=Room]').val() **//DEFAULT SELECT LIST ITEM VALUE SENT**
},
error: function() {
alert('there was an error while fetching events!');
},
success: function (dataQ) {
for (var i = 0; i < dataQ.length; i++) {
dataQ[i].start = moment(dataQ[i].start);
dataQ[i].end = moment(dataQ[i].end);
}
},
color: 'grey',
textColor: 'white'
}
]
});

$("input[name=Doctor]").val() is evaluated once here, at the load of your page. That is why whatever you entered in your input afterwards is not sent.
You should probably load your events using a function: http://fullcalendar.io/docs/event_data/events_function/

fullCalendar custom events function throws not a function error

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.

fullcalendar js: fetching more events with ajax

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
});
});