We Keep Coding

fullcalendar Moment _ordinalParse is undefined

everyone, please help me with the code. I am trying to send an ajax after creating a new record in the calendar. Here is my code:
$(document).ready(function()
{
var events = <?php echo json_encode($data)?>;
for(var i in events)
{
if(events[i].allDay === "false")
{
events[i].allDay = false;
}
if(events[i].allDay === "true")
{
events[i].allDay = true;
}
}
var calendar = $('#calendar');
var aId = calendar.attr('aId');
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: events,
selectable: true,
selectHelper: true,
select: function(start, end, allDay, jsEvent, view) {
var title = prompt('Заглавие:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end,
allDay: allDay
};
//var newDate = new Date(formatDate(eventData.start));
$.post(
"/panel/agentTasks/addEvent"
, {
type: 'add',
title: title,
start: start,
end: end,
aId: aId,
allDay: allDay
}, function( data ) {
if(data === 'success');
//location.reload();
}, "json");
calendar.fullCalendar('renderEvent', eventData, true); // stick? = true
}
calendar.fullCalendar('unselect');
},
editable: true,
eventLimit: true,
axisFormat: 'HH:mm',
timeFormat: {
agenda: 'H:mm{ - h:mm}'
},
slotMinutes: 15,
allDayText: 'за целия ден',
eventResize: function(event, delta, revertFunc) {
$.post(
"/panel/agentTasks/addEvent"
, {
type: 'resize',
end: moment(event.end).format('YYYY-MM-DDTHH:mm:ssZ'),
id: event.id
});
},
eventClick: function(event, jsEvent, view) {
var title = prompt('Заглавие:', event.title);
if (title && event.id){
event.title = title;
$.ajax({
url: '/panel/agentTasks/addEvent',
data: 'type=changeTitle&title='+title+'&eventId='+event.id,
type: 'POST',
dataType: 'json',
success: function(response){
if(response.status == 'success')
calendar.fullCalendar('updateEvent',event);
//странно, но не работи, може би защото е стара версия на плъгина, за това ще презаредя страницата; криво решение, но поне докато се открие друго решение;
location.reload();
},
error: function(e){
alert('Error processing your request: '+e.responseText);
}
});
}
},
eventDrop: function(event) {
$.post(
"/panel/agentTasks/addEvent"
, {
type: 'resetDate',
title: event.title,
start: moment(event.start).format('YYYY-MM-DDTHH:mm:ssZ'),
end: moment(event.end).format('YYYY-MM-DDTHH:mm:ssZ'),
id: event.id,
allDay: event.allDay
}
);
},
eventDragStop: function(event,jsEvent) {
var trashEl = $('#calendarTrash');
var ofs = trashEl.offset();
var x1 = ofs.left;
var x2 = ofs.left + trashEl.outerWidth(true);
var y1 = ofs.top;
var y2 = ofs.top + trashEl.outerHeight(true);
if (jsEvent.pageX >= x1 && jsEvent.pageX<= x2 &&
jsEvent.pageY>= y1 && jsEvent.pageY <= y2) {
var r = confirm('Сигурен ли сте, че искате да изтриете?');
if(r === true){
$.post(
"/panel/agentTasks/addEvent"
, {
type: 'deleteDate',
id: event.id
}
);
calendar.fullCalendar('removeEvents', event.id);
}
}
}
});
});
</script>
Everything else is working fine. I am using the latest fullcalendar version. The error i get - "TypeError: this._ordinalParse is undefined". Any suggestions?

Fullcalendar v2 store dragged event into localstorage

How can I store my dragged events into localstorage ? I have figured out in old fullcalendar version but this solution is not working any more.
var EventsView = Backbone.View.extend({
el: document.getElementById("content"),
render: function() {
var self = this;
var events = JSON.parse(localStorage.getItem('events'));
var events = new Events(events);
var jsevents = events.toJSON();
this.el.innerHTML = _.template( calendarTemplate,{data : jsevents} );
$('#calendar').fullCalendar({
agenda: 'h:mm{ - h:mm}',
'': 'h(:mm)t',
aspectRatio: 1.5,
droppable: true,
weekend: true,
editable: true,
eventDrop: function(event) {
// ???????????????????????????????
},
defaultView: 'month',
firstDay: 1,
handleWindowResize: true,
allDayDefault: false,
firstHour: 7,
columnFormat: {
month: 'dddd',
week: 'ddd, dS',
day: 'dddd, MMM dS'
},
header: {
right: 'prev,next',
center: 'title',
left: 'month,agendaWeek,agendaDay'
},
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);
events.push(eventData);
localStorage.setItem('events',JSON.stringify(events));
}
$('#calendar').fullCalendar('unselect');
},
events: function(start, end, timezone, callback) {
callback(jsevents);
}
});
},
You can see my select function fully working. I mean selected events are stored into database.

i was able to replicate your example, and it worked just fine, the only thing i added is the definition of Events, i made it as backbone collection
var Events = Backbone.Collection.extend({});
I think you need to debug while setting the value in local storage, try to log the value of
JSON.stringify(events)
just before setting in local storage
EDIT:
jsfiddle: http://jsfiddle.net/mfarouk/vcsr45q8/25/

Backbonejs fullcalendar v2 load events from localstorage

How can I load data from local-storage to new version of fullcalendar through backbone collection?
My localstorage data:
if(localStorage.getItem('events') == null){
var events = [
{"title":"Event 1","start":"2014-09-13T04:00:00.000Z","end":"0000-00-00 00:00:00","creator":432,"backgroundColor":"rgb(190, 219, 5","allDay":"true"},
{"title":"Event 2","start":"2014-09-28T11:30:00.000Z","end":"2014-09-28T19:30:00.000Z","creator":432,"backgroundColor":"rgb(190, 219, 5","allDay":""},
{"title":"Event 3","start":"2014-09-09T04:00:00.000Z","end":"2014-09-11T04:00:00.000Z","creator":432,"backgroundColor":"rgb(31, 138, 11","allDay":"true"}
];
localStorage.setItem('events',JSON.stringify(events));
}
Here is my view :
define([
'underscore',
'backbone',
'models/event/Event',
'collections/events/Events',
'text!templates/calendar/calendarTemplate.html',
'momentjs',
'fullcalendar',
], function(_, Backbone, Event, Events, calendarTemplate, fullcalendar
){
var EventsView = Backbone.View.extend({
el: document.getElementById("content"),
render: function() {
var self = this;
var events = JSON.parse(localStorage.getItem('events'));
var events = new Events(events);
var jsevents = events.toJSON();
this.el.innerHTML = _.template( calendarTemplate,{data : jsevents} );
$('#calendar').fullCalendar({
agenda: 'h:mm{ - h:mm}',
'': 'h(:mm)t',
aspectRatio: 1.5,
droppable: true,
weekend: true,
editable: true,
defaultView: 'month',
firstDay: 1,
handleWindowResize: true,
allDayDefault: false,
firstHour: 7,
columnFormat: {
month: 'dddd',
week: 'ddd, dS',
day: 'dddd, MMM dS'
},
header: {
right: 'prev,next',
center: 'title',
left: 'month,agendaWeek,agendaDay'
},
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);
}
$('#calendar').fullCalendar('unselect');
},
events: []
});
$('#calendar').fullCalendar( 'addEventSource', jsevents );
},
});
return EventsView;
});
You can see my data for calendar are jsevents. So how can I load it into my fullcalendar? App on GIT Thanks for any help
UPDATED:
define([
'underscore',
'backbone',
'models/event/Event',
'collections/events/Events',
'text!templates/calendar/calendarTemplate.html',
'momentjs',
'fullcalendar',
], function(_, Backbone, Event, Events, calendarTemplate, fullcalendar
){
var EventsView = Backbone.View.extend({
el: document.getElementById("content"),
render: function() {
var self = this;
var events = JSON.parse(localStorage.getItem('events'));
var events = new Events(events);
var jsevents = events.toJSON();
this.el.innerHTML = _.template( calendarTemplate,{data : jsevents} );
$('#calendar').fullCalendar({
agenda: 'h:mm{ - h:mm}',
'': 'h(:mm)t',
aspectRatio: 1.5,
droppable: true,
weekend: true,
editable: true,
defaultView: 'month',
firstDay: 1,
handleWindowResize: true,
allDayDefault: false,
firstHour: 7,
columnFormat: {
month: 'dddd',
week: 'ddd, dS',
day: 'dddd, MMM dS'
},
header: {
right: 'prev,next',
center: 'title',
left: 'month,agendaWeek,agendaDay'
},
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);
events.push(eventData);
localStorage.setItem('events',JSON.stringify(events));
}
$('#calendar').fullCalendar('unselect');
},
events: function(start, end, timezone, callback) {
callback(jsevents);
}
});
$('#calendar').fullCalendar( 'addEventSource', jsevents );
},
});
return EventsView;
});

Don't know if this is the only problem but:
.start and .end need to be strings formatted like this: "2010-01-09T12:30:00"
See here http://fullcalendar.io/docs/event_data/events_array/
You can use moments for this (included in fullcalendar anyway)
moment.unix(Number)
moment.toISOString() // 2013-02-04T22:44:30.652Z
or using format if timezone isn't accepted
http://momentjs.com/docs/#/displaying/format/
Note that you can also use a function as source (which allows for lazy fetching)

Full calender - Remove Events on day click and remove Bg-color of particular cell

I need to limit the events to one in a particular date, and on click of date if any events are present, it has to be removed.
While adding an event to a date, the color of the cell should be turned orange, and while deleting the event, it has to be turned back to white.
$(function () {
// Full calendar
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: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
backgroundColor: 'orange',
allDay: allDay,
},
true
);
}
calendar.fullCalendar('unselect');
},
eventClick: function(event){
var r=confirm(\"Are you sure?\");
if (r==true)
{
$('#calendar').fullCalendar('removeEvents',event._id);
}
},
dayClick: function(date, allDay, jsEvent, view) {
if($( this ).hasClass('bg-orange')){
$(this).removeClass('bg-orange');
}
else
{
$(this).addClass('bg-orange');
}
},
editable: true,
events: [
]
});
});

FullCalendar jQuery plug-in fires ajax events for every event (hover, mouseover, resize, ect...) when lazyFetching is set to false

I'm using FullCalendar to display events, which I'm getting through a javascript function that makes an AJAX call. This is done to send a limiter on how many events to pass back for a given day, with a ViewMore option included.
By turning off lazyFetching, the result seems to be that FullCalendar does a re-render for every event that's fired on the page. This results in it doing a new AJAX call each time.
How can I prevent FullCalendar from making these unnecessary AJAX calls?
below is the code for initializing my fullCalendar. Thanks!
$('#calendar').fullCalendar({
defaultView: 'basicWeek',
theme: true,
isRTL: isRightToLeft,
contentHeight: 800,
weekends: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
lazyFetching: false,
columnFormat: {
month: 'ddd',
week: 'ddd ' + shortMonthDayPattern,
day: 'dddd ' + shortMonthDayPattern
},
titleFormat: {
month: yearMonthPattern, // September 2009
week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}", // Sep 7 - 13 2009
day: longDatePattern // Tuesday, Sep 8, 2009
},
dayClick: function (date, allDay, jsEvent, view) {
if (view.name != 'basicDay') {
$('#calendar').fullCalendar('changeView', 'basicDay');
$('#calendar').fullCalendar('gotoDate', date);
}
},
eventClick: function (event, jsEvent, view) {
if (event.id === "viewMore") {
$('#calendar').fullCalendar('changeView', 'basicDay');
$('#calendar').fullCalendar('gotoDate', event.start);
}
else {
navigateBackboneCal(event.id);
}
},
editable: false,
loading: function (isLoading) {
if (isLoading) {
$('.fc-content').block({
message: null,
css: { top: '10' }
});
}
else {
$('.fc-content').unblock();
}
},
viewDisplay: function (view) {
},
events: function (startDt, endDt, callback) {
var maxEvents = 0;
var view = $('#calendar').fullCalendar('getView');
if (view.name === 'month')
maxEvents = 5;
else if (view.name === 'basicWeek')
maxEvents = 30;
var events = [];
$.ajax({
url: '/GetCalendarEvents',
type: 'POST',
data: { start: Math.round(startDt.getTime() / 1000), end: Math.round(endDt.getTime() / 1000), maxEvents: maxEvents },
error: function (error) {
alert('There was an error while fetching events!');
$('.fc-content').unblock();
},
success: function (result) {
if (result.viewMoreEvents)
events = $.merge(result.events, result.viewMoreEvents);
callback(events);
}
});
}
});