Develop Reference

How to remove allDay from view in fullcalender JS?

I am trying to build an application that creates events within fullcalendar. I don't allow user to create an "allDay" event at all at the client side but they still can see it within the view. Is there any method to remove allDays from views completely?
function initCalendar {
if (!jQuery().fullCalendar) {
return;
}
var date = new Date(),
started,
ended
var header = {};
var calendar = $('#calendar').fullCalendar({
header: header,
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
$('#fc_create').click();
var dateStart = start;
var dateEnd = end;
$(".antosubmit").on("click", function() {
var title = $("#reservation-title").val();
if (title) {
var event = {
editable: true,
title: title,
start: dateStart,
end: dateEnd,
allDay: false
}
calendar.fullCalendar('renderEvent', event, true);
calendar.fullCalendar('unselect');
#('.antoclose').click();
return false;
}
else {
////alert here
}
})
}
})
}

From the docs:
allDaySlot: false
https://fullcalendar.io/docs/agenda/allDaySlot/
** Update for v5:
https://fullcalendar.io/docs/allDaySlot

Backbone Collection is populated with models but cannot pull JSON out of it... simple answer I'm sure

Thank you for all the help this community has given me, I am extremely grateful. If anyone knows what im doing incorrectly I would love to figure this out :)
The Problem:
I just started using backbone. lol But really, I am trying building and app that uses full calendar and backbone to populate the calendar. Everything is going smooth so far and I am able to add new sessions with the correct start and end dates to the calendar.
But on the initial load none of these session models populate on the calender. Here is a screenshot of what I am getting in console.log:
As you can see when I call jus the collection you can see it is full of models. But when I try to convert to JSON it comes up empty. I have found numerous answers on Stack Overflow about this and none of them seems to make this work. I am officially roadblocked. lol
Here is some code im working with to display collection
var Event = Backbone.Model.extend({
methodToURL: {
'create': addDayURL,
'update': addDayURL,
//'delete': '/user/remove'
},
sync: function(method, model, options) {
options = options || {};
options.url = model.methodToURL[method.toLowerCase()];
Backbone.sync(method, model, options);
}
});
var Events = Backbone.Collection.extend({
model: Event,
url: allDaysURL
});
The view is huge so I wil only include the relavent parts:
var EventsView = Backbone.View.extend({
events: {
'click #add_track' : "addTrack"
},
initialize: function(){
_.bindAll(this);
this.collection.bind('reset', this.addAll);
this.collection.bind('add', this.addOne);
this.collection.bind('change', this.change);
this.collection.bind('destroy', this.destroy);
this.eventView = new EventView();
console.log('this.collection: ', this.collection);
console.log('this.collection.toJSON(): ', this.collection.toJSON());
console.log('JSON.stringify(this.collection.toJSON()): ', JSON.stringify(this.collection.toJSON()));
//console.log(this.collection.toJSON())
// your model2 option: this.options.collection2.toJSON();
//console.log(this.options.collection2.toJSON());
},
render: function() {
this.$el.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
},
//defaultView: 'resourceDay',
resources: //this.options.collection2.toJSON()
[
{
/*
* trackID
* name
* backgroundColor
* foregroundColor*/
id: 1,
name: 'Track 1',
color: 'red',
textColor: 'black'
},
{
id: 2,
name: 'Track 2',
color: 'blue'
},
{
id: 3,
name: 'Track 3',
color: 'pink'
},
{
id: 4,
name: 'Track 4',
color: 'green'
},
{
id: 5,
name: 'Track 5',
color: 'yellow',
textColor: 'black'
}
],
droppable: true,
selectable: true,
selectHelper: true,
editable: true,
ignoreTimezone: false,
select: this.select,
eventClick: this.eventClick,
eventDrop: this.eventDropOrResize,
eventResize: this.eventDropOrResize,
drop: function(date, allDay, ev, ui, res) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// dropped event of resource a to a cell belonging to resource b?
copiedEventObject.resourceId = res.id;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
this.addOne;
}
});
this.$el.prepend('<button id="add_track" class="btn large-btn green-btn pull-right">Add Track</button>');
},
addAll: function() {
this.$el.fullCalendar('addEventSource', this.collection.toJSON());
},
addOne: function(event) {
this.$el.fullCalendar('renderEvent', event.toJSON());
}
EDIT:
To initialize collection and populate this code resides at the bottom fo the file:
var events = new Events();
var tracks = new Tracks();
new EventsView({el: $("#calendar"), collection: events, collection2: tracks}).render();
new AddSessionView({ collection: events}).render();
events.fetch();

I'm also new to Backbone but maybe this helps. Have you tried to convert the models property of your Collection object to JSON, like:
JSON.stringify(collection.models)
This approach worked for me.
JSFiddle: http://jsfiddle.net/YcFmB/

try this :
var events = new Events();
var tracks = new Tracks();
events.fetch();
new EventsView({el: $("#calendar"), collection: events, collection2: tracks}).render();
new AddSessionView({ collection: events}).render();

I read that fetch() was an asynchronous operation, therefore when you fetch a collection, the ajax call will be sent and then your code will continue being run just like nothing happened.
I ended up creating my creating my first view inside the fetch() success handler:
events.fetch({success: function (models) {
tracks.fetch({success: function (models) {
new EventsView({el: $("#calendar"), collection: events, collection2: tracks}).render();
}});
}});

Could be an async issue in that events.fetch(); is returning after your views have been called. I use deferreds to deal with this.
var events = new Events();
var tracks = new Tracks();
$.when( events.fetch() )
.done( function(data) {
console.dir(data)
new EventsView({el: $("#calendar"), collection: events, collection2: tracks}).render();
new AddSessionView({ collection: events}).render();
});
Although, your bind on reset, should take care of that...
EDIT:
I would be curious to know what your console readout above was?

Backbone routing

I am creating an app that will list the days of an event as buttons, then let you add dates and click each date to get a new "daily calendar".
This is my first real world app using backbone and underscore, so I keep running into road blocks. I would really appreciate anyone helping me out.
I am now at the point where my collection is full of dates, and I can add to those dates. Now what I am trying to figure out it routing the links to switch out the calendar, depending on the selected date.
Heres what I have relating to this part of the app so far:
Collections
var Days = Backbone.Collection.extend({
url: daysURL
});
var Calendar = Backbone.Collection.extend({
url: URL
});
Models
var Header = Backbone.Model.extend();
var header = new Header();
var ConferenceDay = Backbone.Model.extend();
var conferenceDay = new ConferenceDay();
View
var HeaderView = Backbone.View.extend({
el: $(".conf_days"),
template: _.template($('#days').html()),
events: {
'click a.day-link': 'changeDay',
'click #add_day' : 'addDay',
'click #previous_day' : 'prevDay',
'click #next_day' : 'nextDay',
'click #delete_day' : 'deleteDay'
},
initialize: function(){
_.bindAll(this, "render");
this.collection = new Days();
this.collection.fetch();
this.collection.bind("reset", this.render, this);
},
render: function(){
var JSONdata = this.collection.toJSON();
this.$el.html(this.template({days: JSONdata}));
console.log(JSON.stringify(JSONdata))
return this;
},
changeDay: function(e){
AppRouter.history.navigate($(this).attr('href'));
return false;
},
addDay: function() {
newDate = Date.parse($('.day-link:first-child').text()).add(1).day();
var newDay = new ConferenceDay();
newDay.set({date_formatted: newDate});
this.collection.add(newDay)
newDay.save({
success: function(){
alert('yes')
},
error: function(){
alert('no')
}
});
},
deleteDay: function(event){
var id = $('.day-link:last-child').data("id");
$('.day-link:last-child').remove();
},
prevDay: function() {
},
nextDay: function() {
},
loadTimes: function(){
var html = time.get('times');
$('.time_td').append(html);
}
});
var headerView = new HeaderView({ model: header });
ConferenceView = Backbone.View.extend({
el: $(".calendar"),
template: _.template($('#calendar').html()),
events: {
},
initialize: function(){
//this.listTracks();
this.collection = new Calendar();
this.collection.fetch();
this.collection.bind("reset", this.render, this);
},
render: function(){
var JSONdata = this.collection.toJSON();
this.$el.html(this.template({days: JSONdata}));
},
listTracks: function() {
}
});
var conferenceView = new ConferenceView({model:conferenceDay});
My current routing
var AppRouter = Backbone.Router.extend({
routes: {
'' : 'index',
'day/:id' : 'changeDay'
},
initialize: function() {
},
index: function() {
},
changeDay: function(id){
alert("changed");
this.calender.changeDay(id);
this.dayView = new ConferenceView({model:conferenceDay});
$('#calender').html(this.dayView.render().el).text('test');
},
});
var app = {
init: function() {
var routes = new AppRouter();
Backbone.history.start({pushState: true});
}
}
app.init();
Ideally, I would like the user to click the day-link button and have the url update via push state to the day/:id and then the #calender template would update with the correct model info received from the day update.

There's a lot of code in your post, so I'm not 100% sure the below will cover everything you need to do, but it's a start
This event handler might be causing some problems:
changeDay: function(e){
AppRouter.history.navigate($(this).attr('href'));
return false;
}
On a detail level, couple of things are off here:
You don't need to reference history. I'm not sure that the router even has such property. You should call AppRouter.navigate instead.
If you want the router to trigger your changeDay route method, you need to pass an option trigger:true, like so:
AppRouter.navigate($(this).attr('href'), {trigger:true}).
However, the actual solution is still simpler than that. You can remove the HeaderView.changeDay event handler, and the click a.day-link event binding from the events hash entirely. Backbone Router will detect the changed URL, and call the router method which matches the new URL automatically.

Loading fullcalendar events from a backbone collection breaks the next & previous functions

noob coder here.
I'm having trouble linking fullcalendar to backbone.js. My problem arises when I use the 'previous' and 'next' buttons on fullcalendar to navigate.
Here is the bug: I make a new event. The event shows up on the calendar. I press 'next'. I press 'previous'. The new event has disappeared.
It looks like fullcalendar expects an 'events' option on loading to specify a function or JSON feed to load events from. According to the docs, "FullCalendar will visit the URL whenever it needs new event data. This happens when the user clicks prev/next or changes views."
I'm having a surprising amount of difficulty getting fullcalendar to ask Backbone for a JSON object of the events collection(that stores all the events).
I've tried using
events: function() {events.toJSON();}
and
events: function() {events.fetch();}
with no luck. Help is very much appreciated.
Here is my backbone code:
$(function(){
var Event = Backbone.Model.extend();
var Events = Backbone.Collection.extend({
model: Event,
url: 'events'
});
var EventsView = Backbone.View.extend({
initialize: function(){
_.bindAll(this);
this.collection.bind('reset', this.addAll);
this.collection.bind('add', this.addOne);
this.collection.bind('change', this.change);
this.collection.bind('destroy', this.destroy);
this.eventView = new EventView();
},
render: function() {
this.el.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
selectable: true,
selectHelper: true,
editable: true,
ignoreTimezone: false,
select: this.select,
defaultView: 'agendaWeek',
// events: function() {events.toJSON();},
eventClick: this.eventClick,
eventDrop: this.eventDropOrResize,
eventResize: this.eventDropOrResize
});
},
addAll: function() {
this.el.fullCalendar('addEventSource', this.collection.toJSON());
},
addOne: function(event) {
this.el.fullCalendar('renderEvent', event.toJSON());
},
select: function(startDate, endDate) {
this.eventView.collection = this.collection;
this.eventView.model = new Event({start: startDate, end: endDate});
this.eventView.render();
},
eventClick: function(fcEvent) {
this.eventView.model = this.collection.get(fcEvent.id);
this.eventView.render();
},
change: function(event) {
// Look up the underlying event in the calendar and update its details from the model
var fcEvent = this.el.fullCalendar('clientEvents', event.get('id'))[0];
fcEvent.title = event.get('title');
fcEvent.color = event.get('color');
this.el.fullCalendar('updateEvent', fcEvent);
},
eventDropOrResize: function(fcEvent) {
// Lookup the model that has the ID of the event and update its attributes
this.collection.get(fcEvent.id).save({start: fcEvent.start, end: fcEvent.end});
},
destroy: function(event) {
this.el.fullCalendar('removeEvents', event.id);
}
});
var EventView = Backbone.View.extend({
el: $('#eventDialog'),
initialize: function() {
_.bindAll(this);
},
render: function() {
var buttons = {'Ok': this.save};
if (!this.model.isNew()) {
_.extend(buttons, {'Delete': this.destroy});
}
_.extend(buttons, {'Cancel': this.close});
this.el.dialog({
modal: true,
title: (this.model.isNew() ? 'New' : 'Edit') + ' Event',
buttons: buttons,
open: this.open
});
return this;
},
open: function() {
this.$('#title').val(this.model.get('title'));
this.$('#color').val(this.model.get('color'));
},
save: function() {
this.model.set({'title': this.$('#title').val(), 'color': this.$('#color').val()});
if (this.model.isNew()) {
this.collection.create(this.model, {success: this.close});
} else {
this.model.save({}, {success: this.close});
}
},
close: function() {
this.el.dialog('close');
},
destroy: function() {
this.model.destroy({success: this.close});
}
});
var events = new Events();
new EventsView({el: $("#calendar"), collection: events}).render();
events.fetch();
});

After looking at this problem forever I realized that I was adding the appointment(model) to the collection and calling renderEvent() without the [,stick] flag equal to true. This made my appointments disappear when pressing the next/back button.
http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/
From the documentation: "http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/"
"Normally, the event will disappear once the calendar refetches its event sources (example: when prev/next is clicked). However, specifying stick as true will cause the event to be permanently fixed to the calendar."

backbone view render not creating

Just beginning with backbone and after few hours can't seem to get even a view render working correctly. I've included all appropriate JavaScript files in HTML. Here is my script:
(function($) {
// MODELS
var Paper = Backbone.Model.extend ({
defaults : {
title : null,
author: null,
}
});
// COLLECTIONS
var PaperCollection = Backbone.Collection.extend({
model : Paper,
initialize : function() {
console.log("We've created our collection");
}
});
// VIEWS
var PaperView = Backbone.View.extend({
tagName:'li',
className: 'resultTable',
events: {
'click .ptitle':'handleClick'
},
initialize: function() {
_.bindAll(this, 'render', 'handleClick');
},
render: function() {
$(this.el).html('<td>'+this.model.get('title')+'</td>');
return this; // for chainable calls
},
handleClick: function() {
alert('Been clicked');
}
});
var ListView = Backbone.View.extend({
events: {
//"keypress #new-todo": "createOnEnter",
},
initialize : function() {
console.log('Created my app view');
_.bindAll(this, 'render', 'addOne', 'appendOne');
this.collection = new PaperCollection();
this.collection.bind('add', this.appendOne); // collection event binder
this.counter = 0;
this.render();
},
render : function() {
console.log('Render app view');
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<p>More text</p>");
// $(this.el).append("<ul></ul>");
/*
_(this.collection.models).each(function(item){ // in case collection is not empty
appendOne(item);
}, this); */
},
addOne: function() {
this.counter++;
var p = new Paper();
p.set({
title: "My title: " + this.counter // modify item defaults
});
this.collection.add(p);
},
appendOne: function(p) {
var paperView = new PaperView({
model: p
});
$('ul', this.el).append(paperView.render().el);
}
});
var App = new ListView({el: $('paper_list') });
// App.addOne();
})(jQuery);
Note not getting any errors in console on FF - but still not displaying any of the render outputs in AppView). Appreciate any help. Simple HTML:
<body>
<div class="container_16">
<div class="grid_16">
<div id="paper_list">
Text...
<ul class="thelist"></ul>
</div>
</div>
<div class="clear"></div>
</div>
</body>

This will at least get you rendering the ListView...
// MODELS
var Paper = Backbone.Model.extend ({
defaults : {
title : null,
author: null,
}
});
// COLLECTIONS
var PaperCollection = Backbone.Collection.extend({
model : Paper,
initialize : function() {
console.log("We've created our collection");
}
});
// VIEWS
var PaperView = Backbone.View.extend({
tagName:'li',
className: 'resultTable',
events: {
'click .ptitle':'handleClick'
},
initialize: function() {
_.bindAll(this, 'render', 'handleClick');
},
render: function() {
$(this.el).html('<td>'+this.model.get('title')+'</td>');
return this; // for chainable calls
},
handleClick: function() {
alert('Been clicked');
}
});
var ListView = Backbone.View.extend({
el: '#paper_list',
events: {
"click #add": "createOnEnter",
},
initialize : function() {
console.log('Created my app view');
_.bindAll(this, 'render', 'addOne', 'appendOne');
this.collection = new PaperCollection();
this.collection.bind('add', this.appendOne); // collection event binder
this.counter = 0;
this.render();
},
render : function() {
console.log(this);
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<p>More text</p>");
// $(this.el).append("<ul></ul>");
/*
_(this.collection.models).each(function(item){ // in case collection is not empty
appendOne(item);
}, this); */
},
addOne: function() {
this.counter++;
var p = new Paper();
p.set({
title: "My title: " + this.counter // modify item defaults
});
this.collection.add(p);
},
appendOne: function(p) {
var paperView = new PaperView({
model: p
});
$('ul', this.el).append(paperView.render().el);
}
});
$(function(){
var App = new ListView();
});
A couple of things...First, I initialized your ListView inside of a document.ready to make sure that the DOM was ready to go, second, I made the el in the listview simply #paper_list then you can do $(this.el) later.
I at least got the button and "more text" to show up...Let me know if that helps!