I am working with Fullcalendar. I create events now by dragging and dropping. I want to do it with a double click on a day. I am trying to use the dayRender function but "event.start.format()" is undefined.
dayRender: function(event, element) {
element.bind('dblclick', function(event,element) {
var title = prompt('Event Title:', event.title, { buttons: { Ok: true, Cancel: false} });
if (title){
console.log(event);
event.title = title;
var start = event.start.format("YYYY-MM-DD[T]HH:MM:SS");
$.ajax({
url: '{!!URL::route("saveCalendarEvent")!!}',
data: 'type=new&title='+title+'&startdate='+start+'&zone='+zone,
type: 'POST',
dataType: 'json',
success: function(response){
event.id = response.eventid;
$('#calendar').fullCalendar('updateEvent',event);
},
error: function(e){
alert('Error processing your request: '+e.responseText);
}
});
}
});
}
The error:
Uncaught TypeError: Cannot read property 'format' of undefined
The dayRender parameters are date and cell, not event and element:
According to the FullCalendar Docs for dayRender :
function( date, cell ) { }
So the problem is, your 'element' variable is actually a date and so 'event.start' doesn't exist thus throwing an error when you call 'event.start.format'
Related
I am using fullcalendar plugin for our users to set their available times. Now everything works fine when reloading the page and when user adds one event, but when they add another event or start selecting, the page almost frozes. I tried all the solutions I found out on Stack but nothing.
I tried calendar.fullCalendar('addEventSource', response.new_events); to add only the new events returned, but lag persist. Tried removing all the eventRender functions, but still the same result. Only thing that seems to work is when I reload the page after each event insert.
IS there any way to decrease the lag while adding new eventSource after select?
These are the parts of my calendar js code
eventSources: [{
url: '/nanny/calendar/availability/all',
type: 'GET',
success: function (response) {
},
error: function (jqXhr, textStatus, errorThrown, data) {
$(".loading-icon").hide();
console.log(jqXhr, textStatus, errorThrown, data);
},
}],
eventRender: function (event, element) {
var delete_icon = '<i style="float: right; cursor: pointer;" class="' + event.icon + '"></i>';
if (event.icon) {
element.find("div.fc-time").append(delete_icon);
}
},
eventAfterRender: function (event, $el, view) {
$(".loading-icon").hide();
var formattedTime = $.fullCalendar.formatRange(event.start, event.end, "HH:mm");
// if event has fc-short class, data-start value will be displayed
// remove fc-short class and update fc-time span text
if ($el.is('.fc-short')) {
$el.find(".fc-time span").text(formattedTime + " - " + event.title);
$el.removeClass('fc-short');
$el.find('.fc-title').remove();
}
},
select: function (start, end) {
//in the past so give error
if (start.isBefore(moment())) {
$('#calendar').fullCalendar('unselect');
return false;
}
//get the event data
eventData = {
start: moment(start).format('YYYY-MM-DD HH:mm:ss'),
end: moment(end).format('YYYY-MM-DD HH:mm:ss')
};
if (eventData) {
if (eventData) {
$.ajax({
type: "POST",
url: "/nanny/calendar/store",
data: eventData,
dataType: "JSON",
success: function (response) {
console.log(response);
swal({
title: "Yay",
text: response.msg,
type: "success",
showCancelButton: false,
confirmButtonColor: "#e36159",
confirmButtonText: "CLose",
closeOnConfirm: false
});
calendar.fullCalendar('addEventSource', response.new_events);
},
error: function (jqXhr, textStatus, errorThrown, data) {
console.log(jqXhr, textStatus, errorThrown, data);
}
});
}
}
},
EDIT
Here's the video.
Lag example
A single event should be added using the renderEvent method. Create the event struct using the appropriate input and pass it to the renderEvent method.
$.ajax({
type: "POST",
url: "/nanny/calendar/store",
data: eventData,
dataType: "JSON",
success: function (response) {
var myEvent =
{
id: response.ID,
title: response.TITLE,
start: eventData.start,
end: eventData.end,
};
$( "#calendar" ).fullCalendar( "renderEvent", myEvent );
}
});
According to the documentation (https://fullcalendar.io/docs/event_data/Event_Object/) the start, end, and title attributes are required. If you are not collecting a title you can hardcode it to something such as "Event".
If you are updating your events in a db and want to allow your users to modify an event (ie. drag and drop, resize, etc.) without refreshing/reloading the calendar you must also provide the id attribute. This can be the unique key assigned to the meeting when stored in the database. You will want to pass this value back in the ajax response. If this functionality is not necessary, then you can ignore the id attribute.
**refetchEvents recall the function CalendarApp.prototype.init and refresh the calendar **
$.ajax({
url: "BASE_URL",
headers: {
Authorization: `Bearer ${token}`,
Accept: "application/json",
"Content-Type": "application/json"
},
type: "POST",
data: JSON.stringify(dataEvent),
dataType: "json",
contentType: "application/json",
success: function(data) {
window.swal({
title: "Checking...",
text: "Please wait",
buttons: false,
timer: 2000
});
$("#calendar").fullCalendar("refetchEvents",dataEvent);
}
});
I am trying to use an ajax call in the events option of fullcalendar with a json feed, but it's not working. I am working in an asp.net mvc4 application. My ajax call works fine, returns json as expected, but as a test I am just trying to create a local array, called events, add some sample data and pass it to the callback. But for some reason this does not get set in the fullcalendar code, and this does not show on the rendered calendar. I am debugging into the fullcalendar source, but haven't yet figured out why it's not getting set. Any ideas?
$('#calendar').fullCalendar({
theme: false,
timeFormat: '',
height: 'auto',
weekends: true,
events: function (start, end, callback) {
$.ajax({
type:'POST',
url: '#Url.Content("~/Home/GetJson")',
dataType: 'json',
data: {
start: start.toLocaleString("yyyy-mm-dd"),
end: end.toLocaleString("yyyy-mm-dd")
},
error: function (xhr, type, exception) { alert("Error: " + exception); },
success: function (response) {
var events = [];
events.push({
title: "new title",
start: "2014-11-05T13:15:30Z"
});
callback(events);
}
});
}
});
I have confirmed fullcalendar works if I pass in a json string in the events option like this
events:
[{ title: 'Event1', start: '2014-11-05T13:15:30Z' },
{ title: 'Event2', start: '2014-11-06T13:15:30Z' }]
Assuming you are using FullCalendar 2.*, the signature for events as a function is:
function( start, end, timezone, callback ) { }
As long as your event object is valid (you need to have a title and a start), your code should work if you change
events: function (start, end, callback) {
to
events: function (start, end, timezone, callback) {
I am using fullcalendar eventSources to pull json event data from server. I have a variable sheet_id that changes and the selected_sheet_id() function will return the corresponding sheet selected. The problem is that when I call $("#calendar").fullCalendar('refetchEvents') to return events, sheet_id (thus all the events) are always the same. That is fullcalendar does not get refreshed with the current sheet_id before fetching events. How do I trigger the eventSources to "recompile" so that it pulls the correct sheet_id from the function before executing ajax call.
eventSources: [{
url: '/event/get_events',
type: 'GET',
data: {
sheet_id: selected_sheet_id()
},
error: function() {
alert('there was an error while fetching events!');
}
}]
First Try this with async:false for sync call :
eventSources: [
{
url: '/event/get_events',
type: 'GET',
async:false,
data:{
sheet_id: selected_sheet_id()
},
error: function() {
alert('there was an error while fetching events!');
},
},
]
Otherwise made one method which fetch event data in using Ajax call For ex :
var ajaxreturnstring="";
$.ajax({
type: "POST",
url: "/EMR-PHR/getPatientScheduleajax.html",
dataType:"html",
data: "",
async:false,
success: function(data){
ajaxreturnstring=$.trim(data);
var obj = eval("("+txt+")");
return obj;
},
error: function(e){
alert('Error: ' + e);
}
});
}
I have Fullcalendar opening in iframe. I have a script from dyn-web.com on parent page that resizes Iframe and this works fine most of the time:
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument ? ifrm.contentDocument : ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight( doc ) + 5+"px";
ifrm.style.visibility = 'visible';
}
When I open the calendar initially it resizes fine, but when I select another month that has a longer page render, it will not resize.
How can I invoke the resize on the parent window?
This is the start of my calendar but I cannot figure out the syntax to dynamically call resize. I have played with the height parameter, but it needs to be dynamic:
$('#calendar').fullCalendar({
month: <%=monthStart%>,
year: <%=yearStart%>,
eventSources:
[
{ url: <%=esource%>,
type: 'GET',
error: function() {
alert('there was an error while fetching events!');
}
},
You need to do something like this:
$('#calendar').fullCalendar({
month: <%=monthStart%>,
year: <%=yearStart%>,
eventSources:
[
{ url: <%=esource%>,
type: 'GET',
error: function() {
alert('there was an error while fetching events! ');
}
},
viewDisplay: function(view) {
parent.setIframeHeight(iframeId) ;
},
The viewDisplay handler is called every time the month/week/day view is changed. You can also use the windowResize handler to capture an event fired after the resize has actually taken place.
Is there a good way to have the fullCalendar jquery plugin auto-refresh its events?
I am able to simply call 'refetchEvents' using a timer, but that presents issues if the user is currently dragging an event (throwing javascript errors during the refresh while the event is dragged). Is there a better way?
Good solution... but is not enough:
var calE = {
url: 'calendarEvents.do',
type: 'POST',
data: {
siteId: $("#siteId").val()
},
error: function() {
alert('there was an error while fetching events!');
}
};
function loadCal(){
$('#calendar').fullCalendar({
theme: true,
events: calE,
editable: false,
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
},
viewDisplay: function(viewObj) {}
});
}
function reloadCalendar(){
$('#calendar').fullCalendar('removeEventSource', calEvent );
var source = {
url: 'calendarEvents.do',
type: 'POST',
data: {
siteId: $("#siteId").val()
},
error: function() {
alert('there was an error while fetching events!');
}
};
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', source );
$('#calendar').fullCalendar('rerenderEvents');
calE = source;
}
By using this you'll keep the original algorithm to fetch the data.
you'd just need to keep track of a flag, whether auto-refreshing should happen. it should be true by default, but set to false when dragging or resizing. you can set it based on the eventDragStart, eventDragStop, eventResizeStart, and eventResizeStop.
see http://arshaw.com/fullcalendar/docs/event_ui/ for a list of mouse-related triggers.