Hi,
I am using fullcalendar extension for rendering the calendar and on top of that to display the events and pop ups I’m using the Backbone.js. I’m able to see the calendar properly and without Backbone.js also i can see the events but for pop ups I’m using the Backbone.js. but some how thats not working… below is my Calendar.php which renders the calendar
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
selectable:true,
selectHelper : true,
editable: true,
select: this.select,
events: 'events'
});
$(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);
},
render: function() {
this.el.dialog({
modal: true,
title: 'New Event',
buttons: {'Cancel': this.close}
});
return this;
},
close: function() {
this.el.dialog('close');
},
addAll: function(){
this.el.fullCalendar('addEventSource', this.collection.toJSON());
},
select: function(startDate, endDate) {
new EventView().render();
}
});
var events = new Events();
new EventsView({el: $("#calendar"), collection: events}).render();
events.fetch();
});
});
</script>
<style type='text/css'>
#calendar {
width: 600px;
margin: 0 auto;
background-repeat:no-repeat;
}
</style>
<?php
$this->layout="//layouts/column2";
?>
<div id='calendar'></div>
<div id='eventDialog' class='dialog ui-helper-hidden'>
<form>
<div>
<?php $this->renderPartial('pages/_events',array('model'=>$model));?> </div>
</form>
</div>
for backbone.js implementation i have referred My link link…
please guide me where m going wrong…
Regards,
Pratik shah