I am trying to make a one page CRUD application using FullCalendar. Actually, I did. I'm just getting errors when I create events and then delete them. When my application is clicked on an existing event, it has to be deleted. But I get the error shown below.
Error
and it is my event object.
Event object
Would you help me figure out what the problem is?
The javascript code is like below:
var teacher_id = 2;
function addEventToDB(teacher_name,teacher_id,title,start,end,color){
axios.post('events', {
teacher_name: teacher_name,
user_id: teacher_id,
title: title,
start: start,
end: end,
color: color
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
function deleteEventFromDB (event_id,teacher_name) {
axios.delete('/events/'+ event_id)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
var eventType = 'Individual';
var eventTitle = 'Available for Individual';
var eventColor = 'orange';
$(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
themeSystem: 'bootstrap4',
defaultView: 'agendaWeek',
allDaySlot: false,
slotEventOverlap: false,
slotDuration: '00:30:00',
slotLabelInterval: "01:00",
scrollTime: '08:00:00',
events: 'events',
//defaultTimedEventDuration: '00:30:00',
footer: {
center: 'eventTypeButton'
},
customButtons: {
eventTypeButton: {
text: 'Event type Toggle Button (Group/Individual)',
click: function() {
if(eventType=='Individual') {
eventType = 'Group';
eventTitle = 'Available for Group';
eventColor = 'blue';
} else {
eventType = 'Individiual';
eventTitle = 'Available for Individual';
eventColor = 'orange';
}
}
}
},
dayClick: function (date, jsEvent, view) {
end = date.clone();
end = end.add(30,'minutes');
$('#calendar').fullCalendar('renderEvent', {
title: eventTitle,
teacher : teacher_id,
teacher_name: teacher_name,
start: date.format(),
end: end.format(),
allDay: false,
color: eventColor
});
var title = eventTitle;
var start = date.format();
var end = end.format();
var color = eventColor;
var teacher_name = "{{ Auth::user()->name }}";
addEventToDB(teacher_name,teacher_id,title, start, end, color);
},
eventClick: function(event, jsEvent, view) {
$('#calendar').fullCalendar( 'rerenderEvents' );
console.log(event.id);
deleteEventFromDB(event.id,event.teacher_name);
$('#calendar').fullCalendar('removeEvents',event.id);
$('#calendar').fullCalendar( 'rerenderEvents' );
},
})
});
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">My calendar</div>
<div class="card-body">
<div id='calendar'></div>
</div>
</div>
</div>
</div>
</div>
I am adding server code (I am using Laravel 5.6):
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\AvailableTime;
use Illuminate\Contracts\Auth\Authenticatable;
class AvailableTimeController extends Controller
{
public function index(Authenticatable $user)
{
if($user->hasRole('admin') || $user->hasRole('superadmin')){
return AvailableTime::all();
} else if( $user->hasRole('teacher')) {
return AvailableTime::where('user_id',$user->id)->get();
}
}
public function show($id)
{
return AvailableTime::findOrFail($id);
}
public function update(Request $request, $id)
{
$AvailableTime = AvailableTime::findOrFail($id);
$AvailableTime->update($request->all());
return $AvailableTime;
}
public function store(Request $request)
{
$AvailableTime = AvailableTime::create($request->all());
return $AvailableTime;
}
public function destroy($id)
{
try {
$availableTime = AvailableTime::find($id);
$availableTime->delete();
return 'Deleted Successfully';
}
catch ( \Exception $e) {
return redirect()->route('show_calendar')->withErrors
'JSONError' => "Event can not be deleted"
]);
}
}
}
The problem is because your process for adding events is flawed - you're adding an event to the calendar without waiting for the server to send you a valid ID for it. So that event can never be deleted or updated in the server by clicking on it in the calendar. It has no relationship to the event recorded in the database.
You have to send the event data to the server first, get back the auto-generated ID in the response, and then record that as part of the event object you pass into the fullCalendar "renderEvent". If you don't do that, then if you try to update or delete that event, it has no ID which the server would recognise.
Thank you for your advice and I could develop a solution. In fact, the problem is a synchronization problem, and every time I click to create a new event and I click to delete it, all events are refetched and the problem is solved. I share the codes for solving below.
function addEventToDB(teacher_name,teacher_id,title,start,end,color){
axios.post('events', {
teacher_name: teacher_name,
user_id: teacher_id,
title: title,
start: start,
end: end,
color: color
})
.then(function (response) {
$('#calendar').fullCalendar( 'refetchEvents' );
console.log(response);
})
.catch(function (error) {
$('#calendar').fullCalendar( 'refetchEvents' );
console.log(error);
});
}
function deleteEventFromDB (event_id,teacher_name) {
axios.delete('/events/'+ event_id)
.then(function (response) {
$('#calendar').fullCalendar( 'refetchEvents' );
console.log(response);
})
.catch(function (error) {
$('#calendar').fullCalendar( 'refetchEvents' );
console.log(error);
});
}
var eventType = 'Individual';
var eventTitle = 'Available for Individual';
var eventColor = 'orange';
$(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
themeSystem: 'bootstrap4',
defaultView: 'agendaWeek',
allDaySlot: false,
slotEventOverlap: false,
slotDuration: '00:30:00',
slotLabelInterval: "01:00",
scrollTime: '08:00:00',
events: 'events',
//defaultTimedEventDuration: '00:30:00',
footer: {
center: 'eventTypeButton'
},
customButtons: {
eventTypeButton: {
text: 'Event type Toggle Button (Group/Individual)',
click: function() {
if(eventType=='Individual') {
eventType = 'Group';
eventTitle = 'Available for Group';
eventColor = 'blue';
} else {
eventType = 'Individiual';
eventTitle = 'Available for Individual';
eventColor = 'orange';
}
}
}
},
dayClick: function (date, jsEvent, view) {
var end = date.clone();
end = end.add(30,'minutes');
var title = eventTitle;
var start = date.format();
var endformat = end.format();
console.log(endformat);
var color = eventColor;
var teacher_name = "{{ Auth::user()->name }}";
addEventToDB(teacher_name,teacher_id,title, start, endformat, color);
$('#calendar').fullCalendar('renderEvent', {
title: eventTitle,
teacher : teacher_id,
teacher_name: teacher_name,
start: date.format(),
end: end.format(),
allDay: false,
color: eventColor
});
},
eventClick: function(event, jsEvent, view) {
$('#calendar').fullCalendar( 'rerenderEvents' );
console.log(event.id);
deleteEventFromDB(event.id,event.teacher_name);
$('#calendar').fullCalendar('removeEvents',event.id);
$('#calendar').fullCalendar( 'rerenderEvents' );
},
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Thank you again for anyone who is response
event object in eventClick() doesn't have id property, Change id as _id
eventClick: function(event, jsEvent, view) {
$('#calendar').fullCalendar( 'rerenderEvents' );
deleteEventFromDB(event._id,event.teacher_name);
$('#calendar').fullCalendar('removeEvents',event._id);
$('#calendar').fullCalendar( 'rerenderEvents' );
},
Related
I'm developing an event Scheduler using fullCalendar resource library with draggable events. I was able to get the events being dragged get saved in the database.
For now, the database has only one table with three columns - id(autoincrement), title,start, end.
I've just added the resource column to the calendar which also has an add rooms button on it that lets the user add the rooms himself. Here's what I've referred to built it.
For the draggable events: https://fullcalendar.io/docs/external-dragging-demo
For the resources : https://fullcalendar.io/docs/addResource-demo
Here's my code:
main.js
document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
var checkbox = document.getElementById('drop-remove');
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});
var calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'resourceTimeline' ],
header: {
left: 'promptResource today prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek'
},
customButtons: {
promptResource: {
text: '+ room',
click: function() {
var title = prompt('Room name');
console.log(title);
if (title) {
calendar.addResource({
title: title
});
fetch('add_resources.php', {
method: 'POST',
headers: {
'Accept': 'application/json'
},
body: encodeFormData(title)
})
.then(response => console.log(response))
.catch(error => console.log(error));
}
}
}
},
editable: true,
aspectRatio: 1.5,
defaultView: 'resourceTimelineDay',
resourceLabelText: 'Rooms',
resources: '',
events: '',
droppable: true,
drop: function(info) {
if (checkbox.checked) {
info.draggedEl.parentNode.removeChild(info.draggedEl);
}
},
eventLimit: true,
events: "all_events.php",
displayEventTime: false,
eventRender: function (event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
eventReceive: function(info) {
var eventData = {
title: info.event.title,
start: moment(info.event.start).format("YYYY-MM-DD HH:mm"),
end: moment(info.event.start).format("YYYY-MM-DD HH:mm")
};
console.log(eventData);
//send the data via an AJAX POST request, and log any response which comes from the server
fetch('add_event.php', {
method: 'POST',
headers: {
'Accept': 'application/json'
},
body: encodeFormData(eventData)
})
.then(response => console.log(response))
.catch(error => console.log(error));
}
});
calendar.render();
});
const encodeFormData = (data) => {
var form_data = new FormData();
for ( var key in data ) {
form_data.append(key, data[key]);
}
return form_data;
}
index.php
<link href='https://unpkg.com/#fullcalendar/core#4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/daygrid#4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/timegrid#4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/#fullcalendar/core#4.4.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/interaction#4.4.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/daygrid#4.4.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/timegrid#4.4.0/main.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link href='https://unpkg.com/#fullcalendar/timeline#4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/resource-timeline#4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/#fullcalendar/timeline#4.4.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/resource-common#4.4.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/resource-timeline#4.4.0/main.min.js'></script>
<link href="main.css" rel="stylesheet">
<script src='main.js'></script>
<div id='external-events'>
<p>
<strong>Draggable Events</strong>
</p>
<div class='fc-event'>My Event 1</div>
<div class='fc-event'>My Event 2</div>
<div class='fc-event'>My Event 3</div>
<div class='fc-event'>My Event 4</div>
<div class='fc-event'>My Event 5</div>
<p>
<input type='checkbox' id='drop-remove' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
add_resouces.php
<?php
require 'connection.php';
$title = $_POST['title'];
$conn = DB::databaseConnection();
$conn->beginTransaction();
$sqlInsert = "INSERT INTO Resources ( resourceTitle ) VALUES ( :title )";
$stmt = $conn->prepare($sqlInsert);
$stmt->bindParam(':title', $title);
if ($stmt->execute()) {
$conn->commit();
return true;
} else {
$conn->rollback();
return false;
}
?>
So I'm making another table for the resources with two columns in it - roomId and roomTitle. My question is how do I save the roomTitle into the database using the '+ room' button.
For now, the frontend for the resource column is working - i.e the room is visible on the page after I add it through that button. The event drag and drop is working too - it is getting saved to the database after being dropped on the calendar.
You need to add an AJAX request after your command to add the resource to the calendar, so that you send the title data to add_resources.php.
customButtons: {
promptResource: {
text: "+ room",
click: function() {
var title = prompt("Room name");
if (title) {
calendar.addResource({
title: title
});
fetch("add_resources.php", {
method: "POST",
headers: {
Accept: "application/json"
},
body: encodeFormData({ "title": title})
})
.then(response => console.log(response))
.catch(error => console.log(error));
}
}
}
},
Demo: https://codepen.io/ADyson82/pen/WNNeLNV?&editable=true&editors=001
Before questioning, I reveal that I am a beginner.
I'm using fullCalendar for the first time.
When I clicked on the date, I made the event registration.
var calendar = $('#calendar').fullCalendar
({
dayClick: function (date, allDay, jsEvent, view)
{
$('#calendar').fullCalendar('renderEvent',
{
title : '휴진',
allDay : true,
start: date, //specify start date
stick : true,
backgroundColor: '#fe4978'
});
}
});
This code allows duplication in event registration.
Once an event is registered for a specific date, I would like to prevent the event from being registered thereafter.
I have seen docs related to removeEvent, but I do not know how to write the code.
I would really appreciate it if you could give me a guide.
This could help you #won.
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
$('#calendar').fullCalendar('clientEvents', function(event) {
if(event.start <= date && event.end >= date) {
return true;
}
return false;
});
}
});
Updated:
Add a function before you store the selected event into the object.
function IsDateHasEvent(date) {
var allEvents = [];
// add your calendar events into the array.
allEvents = $('#calendar').fullCalendar('clientEvents');
var event = $.grep(allEvents, function (v) {
return +v.start === +date;
});
return event.length > 0;
}
and change your code as follows.
dayClick: function (date, allDay, jsEvent, view) {
if (!IsDateHasEvent(date)) {
// No previous event on this date.
selectedDate = date;
eventData = {
title: title,
start: start,
stick : true,
backgroundColor: '#fe4978',
overlap: false,
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
// add new appointment code.
//$("#divAddNewAppointment").dialog("open");
}
else {
//$('<%= "#" + lblMessage.ClientID%>').html(" your error msg");
$('#calendar').fullCalendar('unselect');
$("#divMessage").dialog("open");
}
}
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
Thanks to another post here on StackOverflow, I added some code to my select: method that prevents users from adding an event on a date prior to NOW.
The downside is that when they click on the empty time slot, and the system then complains (an alert message), the attempted event remains. How do I get rid of it? Thanks!
Update: Here's my code:
select: function(start, end, jsEvent) {
var check = start._d.toJSON().slice(0,10),
today = new Date().toJSON().slice(0,10),
m = moment(),
url = "[redacted]",
result = {};
title = "Class",
eventData = {
title: title,
start: start,
end: start.clone().add(2, 'hour'),
durationEditable: false,
instructorid: 123,
locationid: 234
};
if(check < today) {
alert("Cannot create an event before today.");
$("#calendar").fullCalendar('removeEvents', function(eventObject) {
return true;
});
} else {
$.ajax({ type: "post", url: url, data: JSON.stringify(eventData), dataType: 'JSON', contentType: "application/json", success: function(result) {
if ( result.SUCCESS == true ) {
$('#calendar').fullCalendar('renderEvent', eventData, true);
$('#calendar').fullCalendar('unselect');
} else {
alert(result.MESSAGE);
}
}});
}
}
If you're using FullCalendar V2, you need to use the removeEvents method.
You can use it to delete events with a certain ID by calling it in this way:
$("#calendar").fullCalendar('removeEvents', 123); //replace 123 with reference to a real ID
If you want to use your own function that decides whether or not an event get's removed, you can call it this way:
$("#calendar").fullCalendar('removeEvents', function(eventObject) {
//return true if the event 'eventObject' needs to be removed, return false if it doesn't
});
FullCalendar has a removeEvent method that uses an id when you create the event.
Example Full Calendar v1:
var calendar = $('#calendar').fullCalendar({ ... stuff ... });
calendar.fullCalendar( 'addEventSource', {id:123, stuff:'stuff'});
// ... other calendar things here...
calendar.fullCalendar( 'removeEvent', 123);
Reference API v1
Example FullCalendar v2:
var calendar = $('#calendar').fullCalendar({ ... stuff ... });
calendar.fullCalendar( 'addEventSource', {id:123, stuff:'stuff'});
// ... other calendar things here...
calendar.fullCalendar( 'removeEvents', [123]);
Reference API v2
Version 4.3
calendar = new Calendar(calendarEl, {
plugins : [ 'interaction', 'dayGrid', 'list' ],
header : {
left : 'prev,next today',
center : 'title',
right : 'dayGridMonth,timeGridWeek,timeGridDay,list'
},
editable : true,
droppable : true,
eventReceive : function(info) {
alert(info.event.title);
},
eventDrop : function(info) {
alert(info.event.title + " was dropped on "
+ info.event.start.toISOString());
if (!confirm("Are you sure about this change?")) {
info.revert();
}
},
eventClick : function(info) {
//delete event from calender
info.event.remove();
}
});
calendar.render();
});
Full calendar version 4
How to remove event from calendar:
<div id="calendar"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
events: [
{
id: '505',
title: 'My Event',
start: '2010-01-01',
url: 'http://google.com/'
}
// other events here
],
eventClick: function(info) {
info.jsEvent.preventDefault(); // don't let the browser navigate
if (info.event.id) {
var event = calendar.getEventById(info.event.id);
event.remove();
}
}
});
});
</script>
This worked for me. I hope, this will also help you. Thanks for asking this question.
A quick explanation:
I am working on a backbone app that integrated with Fullcalendar JS. When creating or editing an event, you can click on the calendar and a modal will popup asking for the info. The problem is when the modal pops up I need to use "this.model" to .get() info about the current event or .set() info about a new event. I keep getting the error:
Uncaught TypeError: Cannot call method 'get' of undefined
Uncaught TypeError: Cannot call method 'set' of undefined
My question:
What is the proper method to set the current model of a clicked view?
Here is some relevant code:
Model & 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
});
Main View
var EventsView = Backbone.View.extend({
events: {
'click #add_track' : "addTrack",
'click th.fc-widget-header:not(.fc-first)' : 'updateTrack',
'click .fc-button-next' : 'switchTracks',
'click .fc-button-prev' : 'switchTracks'
},
initialize: function(){
_.bindAll(this);
this.collection.on('reset', this.addAll);
this.collection.bind('add', this.addOne);
this.collection.bind('change', this.change);
this.collection.bind('destroy', this.destroy);
console.log(this.collection.toJSON());
console.log(JSON.stringify(this.options.collection2.toJSON()))
this.trackCollection = JSON.stringify(this.options.collection2.toJSON());
this.trackObject = jQuery.parseJSON(this.trackCollection);
this.eventView = new EventView();
this.trackView = new TrackView();
},
render: function() {
this.$el.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay',
},
defaultView: 'resourceDay',
resources: this.trackObject,
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;
//get title of event
var eventTitle = copiedEventObject.title;
// 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();
}
var event = new Event();
event.set({"title": eventTitle, "start_at": copiedEventObject.start, "color": null, "allday":copiedEventObject.allDay, "conference_id": conferenceID, "session_type_id": 1, "resource_Id": res.id});
events.create(event);
}
});
//Goto first event day on initialize
var start_at = Date.parse(startDate);
var year = $.fullCalendar.formatDate(start_at, 'yyyy');
var month = $.fullCalendar.formatDate(start_at, 'M');
var day = $.fullCalendar.formatDate(start_at, 'dd');
this.$el.fullCalendar( 'gotoDate', year , month, day)
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());
},
addTrack: function() {
//get current day & format date
date = this.$el.fullCalendar( 'getDate' );
var formatDate = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
//create new track
var newTrack = new Track;
newTrack.set({'name': 'Track 1', 'day_date': formatDate, 'conference_id': conferenceID, "session_type_id": 1});
//save track to DB
this.options.collection2.create(newTrack);
},
updateTrack: function(track) {
//var fcRes = this.$el.fullCalendar('clientEvents', event.get('id'))[0];
//this.trackView.model = track.get('id');
console.log(this.trackView.model)
this.trackView.render();
},
switchTracks: function(){
//alert(this.$el.fullCalendar( 'getDate' ))
},
select: function(startDate, endDate, res) {
this.eventView.collection = this.collection;
this.eventView.model = new Event({start_at: startDate, end_at: 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];
console.log(fcEvent);
fcEvent.title = event.get('title');
fcEvent.color = event.get('color');
this.$el.fullCalendar('updateEvent', fcEvent);
},
eventDropOrResize: function(fcEvent) {
alert(fcEvent.id)
// 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);
}
});
Event Popup Modal View
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(startDate, endDate, res) {
//copiedEventObject.resourceId = res.id;
this.model.set({'title': this.$('#title').val(), 'color': this.$('#color').val(), 'conference_id': conferenceID, "session_type_id": 1, 'track_id': 1, /*'resourceId': res.id*/});
if (this.model.isNew()) {
this.collection.create(this.model, {success: this.close, wait: true});
} else {
this.model.save({}, {success: this.close});
}
},
close: function() {
this.$el.dialog('close');
},
destroy: function() {
this.model.destroy({success: this.close});
}
});
It looks like your calendar view does not have a model associated with it. You will need to pass the model into the calendar view when instantiating it. When you call this.eventView = new EventView(); you are not providing it with a reference to your underlying model in your main view.