fullcalendar is not working on internet explorer 11 - fullcalendar

i have json that containes two events.
On ie 11 the events renders on the same day,
one is on the 26/5/2014 and the other is in 27/5/2007
var myevents =[{"id":99,"title":"","start":"2014-05-26T07:30:00Z","end":"2014-05-26T13:00:00Z","color":"#fff","textColor":"#000","borderColor":"#000","allDay":false},{"id":101,"title":"","start":"2014-05-27T13:00:00Z","end":"2014-05-27T17:00:00Z","color":"#fff","textColor":"#000","borderColor":"#000","allDay":false}]
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
year: 2014,
month: 4,
events: function (start, end, callback) {
//console.log(myevents);
var obj = myevents//jQuery.parseJSON(myevents);
var events = new Array();
$.each(obj, function (index, value) {
console.log(value)
event = new Object();
event.id = value['id']
event.title = value['start'];//value['id'];
event.start = value['start'];
event.end = value['end'];
event.color = value['color'];
event.textColor = value['textColor'];
event.borderColor = value['borderColor'];
event.allDay = false;
console.log(event);
events.push(event);
});
callback(events);
}
});
http://jsfiddle.net/hLw3W/2/

The problem waw with the array.push
i changed the each loop to
$.each(obj, function (index, value) {
events.push({
id: value['id'],
start: value['start'],
end: value['end'],
title: "",
color: value['color'],
textColor: value['textColor'],
borderColor: value['borderColor'],
allDay: false,
canSubscribe: value['canSubscribe']
});
});
and it's work fine

Related

FullCalendar input is undefined in eventDataTransform

I have this app with fullcalendar and everything but the eventDataTransform works fine. The code is really large, so i will publish the relevant parts
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,basicDay',
},
allDaySlot: false,
nextDayThreshold: '00:00:00',
slotLabelFormat: 'h(:mm)a',
views: {
month: {
//para que no se pueda arrastrar en la vista month
droppable: false,
timeFormat: 'h(:mm)a',
showNonCurrentDates:true,
},
week: {
timeFormat: 'h:mm:ss a'
},
day: {
timeFormat: 'h:mm:ss a'
},
basicDay:{
droppable: false,
}
},
locale: getVarLocale(),
editable: true,
droppable: true,
slotDuration: '00:15:00',
eventDurationEditable:false,
eventDragStart:function( event, jsEvent, ui, view ) {
isDragging=true;
},
eventDragStop:function( event, jsEvent, ui, view ) {
isDragging=false;
},
dayClick: function (date, jsEvent, view) {
if(isValidDate(date)==false)
return false;
if (view.name === "month") {
$('#calendar').fullCalendar('gotoDate', date);
$('#calendar').fullCalendar('changeView', 'agendaDay');
}
},
eventOverlap: function (stillEvent, movingEvent) {
if(stillEvent.start.isSame(movingEvent.end)||stillEvent.end.isSame(movingEvent.start)){
return false;
}
if (movingEvent.type == tiposEventos.bloque){
if(isDragging==false)
performAlert(translationCal.noNestedBlock,'event');
return false;
}
if(movingEvent.overlaped==false){
if (stillEvent.type!=tiposEventos.bloque){
if(isDragging==false)
performAlert(translationCal.noOverlapAllowed,'block');
return false;}
}
if(movingEvent.start.isBefore(stillEvent.start)){
if(isDragging==false)
return false;
}
updateEvent(stillEvent, movingEvent,true);
return true;
function performAlert(msg,type){
var alerted = localStorage.getItem(type) || '';
if(alerted=='alerted')
return false;
localStorage.setItem(type,'alerted');
var e=Array();
e.push(msg);
addModalError('pm-modal-error',$translation.error, e);
}
},
eventDataTransform:function(eventData){
console.log(eventData);
},
eventSources:[
{
events: function (start, end, timezone, callback) {
var events = [];
var options = {};
options.data = {};
options.data.start=start.format('YYYY-MM-DD');
options.data.end=end.format('YYYY-MM-DD');
options.type = 'text/json'
options.method = 'POST';
options.url = Routing.generate('publication_all');
options.errorcallback = function (error) {
console.log(error);
}
options.successcallback = function (data) {
var parseData = JSON.parse(data);
$(parseData).each(function () {
var startTime = this.startTime;
startTime = (((startTime.date).split(' ')[1]).split('.'))[0];
var startObj = moment(startTime, 'HH:mm:ss');
var startDate = (this.startDate.date).split(' ')[0];
var startDate = moment(startDate, 'YYYY-MM-DD HH:mm:ss').utcOffset(+0000);
startDate.set({
'hour': startObj.get('hour'),
'minute': startObj.get('minute'),
'second': startObj.get('second')
});
var endTime = this.endTime;
endTime = (((endTime.date).split(' ')[1]).split('.'))[0];
var endObj = moment(endTime, 'HH:mm:ss');
var endDate = (this.endDate.date).split(' ')[0];
endDate = moment(endDate, 'YYYY-MM-DD HH:mm:ss').utcOffset(+0000);
endDate.set({
'hour': endObj.get('hour'),
'minute': endObj.get('minute'),
'second': endObj.get('second')
});
if(isValidDate(startDate)==true){
events.push(
{
title: this.title, // use the element's text as the event title
idRef: this.idRef,
type: this.type,
publicationId: this.idPub,
color: setColors(this.type,this.idRef),
overlaped: false,
overlaps: false,
parentBlock: this.parent,
start: startDate,
end: (startDate.diff(endDate)==0)?endDate.set({'second':endDate.get('second')+1}):endDate,
stick: true,
idRef: this.ref,
direct:-1,
allDay:false,
durationEditable:(this.type==tiposEventos.bloque||this.type==tiposEventos.patron||this.type==tiposEventos.sennal)?true:false
}
);
}
});
callback(events);
};
ajaxAccess(options);
}
}
],
});
});
The thing is, everything works fine, but the eventDataTransform always throws TypeError: input is undefined
out._id = input._id || (input.id === undefined ? '_fc' + eventGUID++ : input.id ...
I checked the docs and I am calling the event in the proper way. I dont know if the problem is related to the fact that my eventSource is an ajax function.
your function doesn't return anything.
the eventDataTransform function has to. At least you could test:
console.log(eventData);
return eventData;

How can I change fullcalendar event start/end time when create on select

I'm using fullcalendar with this select callback function in settings object:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
timeFormat: 'HH:mm',
slotLabelFormat:"HH:mm",
// slotDuration: '00:10:00',
allDayDefault: false,
editable: true
selectable: true,
select: function(start, end, jsEvent, view) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: moment(start).hour(12),
end: moment(end).hour(18),
editable: true
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
// $('div#event-editor').modal({ show: true });
});
The problem is that moment(end).hour(18) ads 18 hours to the end moment, causing an increased time until the event is finished. I need a function to effectively set the moment hour to '18' instead of '00'.

bootstrap3 pretty-fullcalendar meteor not reactive in blaze

I'm using a bootstrap3 pretty-fullcalendar in a project and pre blaze, when I changed some properties of an event (such as color) it was immediately reflected in the display on the calendar. Now, when I change the attribute, I have to reload the calendar manually to have the change show up.
I'm instantiating the calendar in the template render function as
Template.packLayout.rendered = function(){
$('#calendar').fullCalendar({
//dayClick:function( date, allDay, jsEvent, view ) {
// Requests.insert({title:'Request',start:date,end:date,color:'red',className:'todo'});
// Session.set('lastMod',new Date());
//},
eventClick:function(reqEvent,jsEvent,view){
Session.set('editingReqEvent',reqEvent.id);
Session.set('showEditEvent',true);
},
eventDrop:function(reqEvent){
Requests.update(reqEvent.id, {$set: {start:reqEvent.start,end:reqEvent.end}});
Session.set('lastMod',new Date());
},
events: function(start, end, callback) {
var events = [];
reqEvents = Requests.find();
reqEvents.forEach(function(evt){
event = {id:evt._id,title:evt.title,start:evt.start,end:evt.end,color:evt.color};
events.push(event);
})
callback(events);
},
editable:true,
weekMode: 'liquid'
});
}
Has something changed that would make this happen?
Here is how i managed to get it working:
1) keep your calendar code as per "rendered"
Template.calendar.rendered = function () {
console.log('Calendar - running redered');
Session.set('calendarTemplateRendered', true);
var entries = Calendar.find().fetch(),
$calendar = $('#calendar');
$calendar.html('').fullCalendar({
header: {
left: '',
center: '',
right: ''
},
contentHeight: 1100,
defaultDate: '2014-01-12',
defaultView: 'agendaWeek',
editable: true,
selectable: true,
selectHelper: true,
select: function (start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
events: entries
});
Add a autorun:
Deps.autorun(function () {
if (Session.equals('calendarTemplateRendered', false) ||
!calendarSubs.ready() ||
typeof Calendar === 'undefined') {
console.log('exiting because there is no objects to process');
return;
}
console.log('trying to autorun');
var entries = Calendar.find().fetch(),
$calendar = $('#calendar');
$calendar.fullCalendar('removeEvents');
$calendar.fullCalendar('addEventSource', entries);
$calendar.fullCalendar('rerenderEvents');
}
Blaze will do the rest for you - (redraw the UI properly). Now you can just modify your Calendar subscription as you like and it will work perfectly.

Fetching all GoogleCalendar Events before FullCalendar has loaded

I currently am using Adam Shaw's jQuery Calendar 'FullCalendar' and am experiencing significant delays in the calendar rendering. In short, the page appears, 1 second passes, the Calendar pops in, another second passes, and then the events populate the page, here. Is there a way to only fetch a certain number of events behind and before today's date? Or even loading the calendar immediately would be an improvement. I am also using Craig Thompson's qTip2.
Javascript
<script type=text/javascript>
// Setup FullCalendar
jQuery(document).ready
(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var tooltip = $('<div/>').qtip({
id: 'fullcalendar',
prerender: true,
content: {
text: ' ',
title: {
},
},
events: {
render: function(event, api) {
var elem = api.elements.bgiframe;
}
},
position: {
my: 'bottom center',
at: 'top center',
target: 'event',
viewport: $(window),
adjust: {
mouse: false,
scroll: true,
method: 'shift',
resize: true
}
},
show: {
modal: {
on: false,
blur: true,
stealfocus: false
}
},
hide: false,
style: 'qtip-bootstrap'
}).qtip('api');
$('#fullcalendar').fullCalendar({
eventSources: ["https://www.google.com/calendar/feeds/emailaddresshere/public/basic",
"http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic"],
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
selectable: true,
eventClick: function(data, event, view) {
var content = '<h3>'+data.title+'</h3>' +
'<p><b>Start:</b> '+data.start+'<br />' +
(data.end && '<p><b>End:</b> '+data.end+'</p>' || '');
tooltip.set({
'content.text': content
})
.reposition(event).show(event);
},
dayClick: function() { tooltip.hide() },
eventResizeStart: true,
eventDragStart: false,
viewDisplay: function() { tooltip.hide() }
});
}());
</script>

dayClick and eventClick function not working

I have inserted some new functions in my js but dayClick and eventClick don't work. The calendar is able to load properly though.
Any idea why the dayclick and eventclick in the following code is not working?
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: '',
right: 'agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
allDayDefault: false,
allDaySlot: false,
firstHour: 9,
defaultView: 'agendaWeek',
dayClick: function(date, allDay, jsEvent, view) {
calendar.fullCalendar('gotoDate', date);
},
eventClick: function(calEvent, jsEvent, view) {
window.location = "http://www.domain.com?start=" + calEvent.start;
},
select: function(start, end) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end
},
false // make the event "stick"
);
var startDateString = $.fullCalendar.formatDate(start, 'yyyy-MM-dd hh:mm');
var endDateString = $.fullCalendar.formatDate(end, 'yyyy-MM-dd hh:mm');
$.ajax({
type: 'POST',
url: '{url}ajaxpost/add',
data: {
startDate: startDateString,
endDate: endDateString,
eventTitle: title
},
dateType: 'json',
success: function (resp) {
calendar.fullCalendar('refetchEvents');
}
});
}
calendar.fullCalendar('unselect');
},
editable: true,
events: "{url}ajaxget/data",
});
});
You cannot use the "select" callback and the "dayClick" callback together as there is a conflict between the two. You can use datepicker to accomplish the gotoDate function to accomplish the same thing.
http://weblogs.asp.net/gunnarpeipman/archive/2010/02/02/linking-jqueryui-datepicker-and-fullcalendar.aspx
As for the eventClick Im not sure why it is not working, but it is easier to place the url in the database the call it in the events and just set it as the property "url: www.somesite.com/sdfjkiwe"
As a side note, It would probably wor better if you didn't use renderEvent to display your event. Try using the event function found here to use your ajax call within it.
http://arshaw.com/fullcalendar/docs/event_data/events_function/

Resources