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/
Related
I am trying to fetch events from database using Ajax and then display it on FullCalendar Scheduler v5.6.0, I can see that events are returned from database but not rendering.
Here what i have tried so far.
document.addEventListener("DOMContentLoaded", function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: function (fetchInfo, successCallback, failureCallback) {
jQuery.ajax({
url: "/getrecords",
type: "GET",
success: function (data) {
var events = [];
for (var i = 0; i < data.event.length; i++) {
console.log(data.event[i].title); // It shows all event titles perfectly
events.push({
title: data.event[i].title,
start: data.event[i].from_data,
end: data.event[i].to_date,
});
}
console.log(events) // Here i have list of all events
successCallback(events);
},
});
},
});
calendar.render();
});
If i put static events in events objects it works fine,but not rendering while called from database using Ajax. Any help would be highly appreciated.
Below is the console output.
I achieved this by using this code on my project.
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: {
url: encodeURI('/getrecords'),
type: 'GET',
color: 'red', // a non-ajax option
textColor: 'white' // a non-ajax option
}
}
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.
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) %>"
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.
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