We Keep Coding

How can I refresh fullcalendar after insert a row in mysql without refresh the page?

my problem is that I do an ajax petition to insert a event to mysql, so if everything is ok I wanted to refresh (refetch events) fullcalendar to see the new insert without refresh page. Besides, I am using TimeGrid View and version 4 of the plugin.
I tested:
calendar.refetch();
calendar.refetchEvents();
$('calendar').fullcalendar('rerenderEvents');
$('calendar').fullcalendar('refetchEvents');
but that does not work, at least in v4.
Calendar Code:
var calendar;
/* Calendario JS */
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'bootstrap' ],
defaultView: 'timeGridWeek',
themeSystem: 'bootstrap',
locale: 'es',
minTime: "07:00:00",
maxTime: "23:00:00",
header: {
left: 'title', //today, prev, next
center: 'BtnAñadirReserva',
right: 'today, prev,next' //month, basicWeek, basicDay, gendaWeek, agendaDay
},
customButtons: {
BtnAñadirReserva: {
text: "Añadir Reserva",
bootstrapFontAwesome: "fa-calendar-plus Añadir Reserva",
click: function(){
showNoti();
}
}
},
events: {
url: url_controller,
method: 'post',
extraParams: {
accio: "getReservas"
},
failure: function() {
alert('Hubo un error recorriendo las reservas!');
},
color: 'blue', // a non-ajax option
textColor: 'white' // a non-ajax option
},
eventClick: function(calEvent, jsEvent, view) {
getInfoByID(calEvent.event.id);
}
});
calendar.render();
});
$.ajax({
url: url_controller,
type: 'post',
data: {
accio: "insertReserva",
params: json
},
beforeSend: function () {},
success: function(result){
result = JSON.parse(result);
console.log(result);
if(status == true){
$('#calendar').fullCalendar('rerenderEvents');
//calendar.refetch();
//calendar.refetchEvents();
//$('calendar').fullcalendar('rerenderEvents');
//$('calendar').fullcalendar('refetchEvents');
} else {
/* Error sql php */
}
},
error:function (xhr, ajaxOptions, thrownError) {
/* Error ajax petition */
}
});
No errors showed in console/network if I use .fullcalendar but with .refetch it says that it does not a function.
Is not a php problem because I can insert properly and if I refresh page I can see the new event that I added.

fullCalendar: Getting data from controller JSON

I am using the fullCalendar library in Visual Studio 2015. I am having trouble populating events from an AJAX command. No events are populating on the calendar. If I pass only one datetime and set allDay = true, it will populate the event. I need it to work with time as well and ave multiple events per day.
JS Code:
$(document).ready(function () {
$(".calendar").fullCalendar
({
header: {
left: 'month,basicWeek,basicDay,today',
center: 'title',
right: 'prev,next'
},
weekends: false,
eventLimit: true,
theme: true,
editable: false,
fixedWeekCount: false,
events: function(start, end, timezone, callback)
{$.ajax
({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Calendar/GetCalendarEvents",
dataType: 'json',
success: function (data)
{
var events = [];
$.each(data, function (index, value) {
events.push({
id: value['id'],
title: value['title'],
date: value['date']
//all data
});
console.log(value)
});
callback(events);
},
error: function (xhr, err) {
alert("ERROR! - readyState: " + xhr.readyState + "<br/>status: " + xhr.status + "<br/>responseText: " + xhr.responseText);
}
});
} });})
Note: The above code was one of may attempts to get it working. I have tried coding it differently before.
Controller Code:
public ActionResult GetCalendarEvents()
{
var events = new List<VMCalendarEvents>();
var db_events = db.PatientVisits.ToList();
foreach(var e in db_events)
{
DateTime visit_start = Convert.ToDateTime(e.VisitStart);
DateTime visit_end = Convert.ToDateTime(e.VisitEnd);
var calEvent = new VMCalendarEvents
{
id = e.PatientVisitID.ToString(),
title = "Placeholder Title" + e.PatientVisitID.ToString(),
date = visit_start.ToShortDateString(),
start = visit_start.ToString(),
end = visit_end.ToString(),
editable = true,
allDay = false
};
events.Add(calEvent);
}
var rows = events.ToArray();
return Json(rows, JsonRequestBehavior.AllowGet);}
Controller Code Output
JS Objects from Controller
EDIT: Problem Solved
So after some investigating I decided to use Razor in MVC to solve the problem. Instead of writing it into a seperate JS file, I put it into a header in the html file. By implementing the code below I was able to get the objects in the date formats of (yyyy-MM-ddTHH:dd & MM/dd/yyyy hh:mm tt):
$(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2017-06-12',
editable: true,
events: '#Url.Action("GetCalendarEvents", "Calendar")',
});
});
I called the Controller using the URL Action command and return the JSON data as a ActionResult.

Fullcalendar might not like your slashes '/' in your date fields. Try hyphens '-' instead.
The documentation (https://fullcalendar.io/docs/utilities/Moment/) is more detailed about what formats for date/time work.
For reference, here is my fullcalendar code using JSON from AJAX (note that my events do not have an end time, but this was by choice):
{
$.ajax({
url: 'example.json',
dataType: 'json',
success: function(doc) {
var events = [];
$.each(doc, function(index, element) {
events.push({
title: element.title,
start: element.time,
url: element.url,
});
});
callback(events);
}
}) //ajax
}
And the JSON file (example.json):
[
{"time": "2017-06-06 09:00:00", "title": "Get It Done in June ", "url": "http://example.org"},
{"time": "2017-06-07 14:00:00", "title": "Fighting Imposter Syndrome for Dissertating Students ", "url": "http://example.com"},
{"time": "2017-06-14 14:00:00", "title": "Entering into the Academic Conversation", "url": "http://example.biz"}
]

FullCalendar Show different information on dayClick

I have a calendar that shows different information on the month view and day view. I'd like to be able to allow the user to click into a day, then have the day show the specifics of each event. This is what I currently have below.
$('#calendar').fullCalendar({
// put your options and callbacks here
height: 750,
header: {
left: 'prev,next today ',
center: 'title',
right: 'month'
},
dayClick: function(date, jsEvent, view) {
},
displayEventTime: false,
events: function(start, end, timezone, callback) {
$.ajax({
type: 'POST',
url: 'WebServices/CalendarAtAGlanceWebService.asmx/GetCalendarSessions',
data: JSON.stringify({ date: $('#calendar').fullCalendar('getDate') }),
async: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (doc) {
var events = [];
$(doc.d).each(function () {
events.push({
title: $(this).attr('EventName'),
start: $(this).attr('StartDate'), // will be parsed
description: $(this).attr("EventDescription")
});
});
callback(events);
}
});
},
eventRender: function (event, element) {
element.find('.fc-title').append("<br/>" + event.description);
}
});
Full Calendar This is what the image looks like on the month view.

Make your dayClick function the following:
dayClick: function(date, jsEvent, view)
{
$('#calendar').fullCalendar('gotoDate', date);
$('#calendar').fullCalendar('changeView', agendaDay);
}
This will change the view to the day view of the clicked date when the user clicks on a day in month view. Then you just need to change your eventRender
logic to only display the description when in day view:
eventRender: function (event, element)
{
if($('#calendar').fullCalendar('getView').name == "agendaDay")
{
element.find('.fc-title').append("<br/>" + event.description);
}
}
This will make the description only appear for the events in day view. This means that you will see titles only in month view, and clicking on a day will show a view of the day's events with more detail.

FullCalendar events JSON feed with slightly different response format

I am using FullCalendar and this is how I initialise it:
$('#calendar').fullCalendar({
events: $('#calendar').data('source')
});
The problem is that the response is not in the format FullCalendar expects it as all the resultset is nested under data, i.e.
{
"data":
[
{
"title": "Event1",
"start": "2011-04-04"
},
{
"title": "Event2",
"start": "2011-04-04"
}
]
}
Is there a way I can provide a custom callback to make it use data element of the result as the event source?
I tried this
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
var url = $('#calendar').data('source');
$.get(url, {start: start, end: end, timezone: timezone})
.done(function( data ) {
callback(data.data);
});
}
});
But all I get is a JS error saying
moment.min.js:22Uncaught TypeError: Cannot read property '_calendar'
of undefined

I solved my problem. The error was coming not really from a FulLCalendar but Moment.js library
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: $('#calendar').data('source'),
dataType: 'json',
data: {
start: start.format("YYYY-MM-DD"),
end: end.format("YYYY-MM-DD")
},
success: function(result) {
var events = [];
result.data.forEach(function(element) {
events.push({
title: element.title,
start: element.start
});
});
callback(events);
}
});
}
});

Fullcalendar: How to create Bootstrap Modal box on click of a custom button?

In FullCalendar, I want to create a bootstrap Modal on click of a custom button.I do not know how to do it.
I have tried and kept a prompt box, but it is not my requirement. Help me how to pop up a modal on click of the button click.
The following is my code:-
<script>
$(document).ready(function() {
$.ajax({
url: "calendar/show_holidays",
type: 'POST', // Send post data
data: 'type=fetch',
async: true,
success: function(s){
holidays =s;
// holidays = '['+s+']';
//alert(holidays);
$('#calendar').fullCalendar('addEventSource', JSON.parse(holidays));
}
});
$('#calendar').fullCalendar({
customButtons: {
EventButton: {
text:'Add Event',
click:function(event, jsEvent, view){
console.log(event.id);
var title = prompt('Event Title:', event.title, { buttons: { Ok: true, Cancel: false} });
if (title){
event.title = title;
console.log('type=changetitle&title='+title+'&eventid='+event.id);
$.ajax({
url: '/calendar/show_holidays',
data: 'type=changetitle&title='+title+'&eventid='+event.id,
type: 'POST',
dataType: 'json',
success: function(response){
if(response.status == 'success')
$('#calendar').fullCalendar('updateEvent',event);
},
error: function(e){
alert('Error processing your request: '+e.responseText);
}
});
}
}
}
},
utc: true,
header: {
left: 'prev,next today EventButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
// change the border color just for fun
$(this).css('border-color', 'red');
},
eventAfterRender: function(event, element, view) {
element.append(event.title);
}
});
//$('#calendar').fullCalendar('addEventSource', jsonEvents);
});
</script>
In my html code i have added this :-
<div id='calendar'></div>