How to edit the contents of a fullcalendar event

Question

I managed to embed the fullcalendar control in my asp.net mvc application. it works great. But I want to edit an existing event, what should I do?

Edited: OK, I successfully completed editing the event in full calendaring control. but after editing an event, it accepts it as a new event and, instead of replacing another event, shows another event. and if I refresh the page, then it shows correctly. So I think that after I edit the event, I somehow want to render / call / refresh the page again.

Here is the code:

$(document).ready(function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var officerid = document.getElementById('officerid').value; url = "/TasksToOfficer/Calender/" + officerid; var calendar = $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay', border: 0 }, eventClick: function(calEvent, jsEvent, view) { var title = prompt('Event Title:', calEvent.title, { buttons: { Ok: true, Cancel: false} }); if (title) { var st = calEvent.start; var ed = calEvent.end; var aldy = calEvent.allDay; var dt = calEvent.date; var iden = calEvent.id; calendar.fullCalendar('renderEvent', { title: title, start: st, end: ed, allDay: aldy }, true); var date = new Date(st); var NextMonth = date.getMonth() + 1; var dateString = (date.getDate()) + '/' + NextMonth + '/' + date.getFullYear(); if (officerid) { $.ajax( { type: "POST", url: "/TasksToOfficer/Create", data: "officerid=" + officerid + "&description=" + title + "&date=" + dateString + "&IsForUpdate=true&EventId=" + iden, success: function(result) { if (result.success) $("#feedback input").attr("value", ""); // clear all the input fields on success }, error: function(req, status, error) { } }); } } } , selectable: true, selectHelper: true, select: function(start, end, allDay) { var title = prompt('Event Title:', { buttons: { Ok: true, Cancel: false } }); if (title) { calendar.fullCalendar('renderEvent', { title: title, start: start, end: end, allDay: allDay }, false); // This is false , because do not show same event on same date after render from server side. var date = new Date(start); var NextMonth = date.getMonth() + 1; // Reason: it is bacause of month array it starts from 0 var dateString = (date.getDate()) + '/' + NextMonth + '/' + date.getFullYear(); if (officerid) { $.ajax( { type: "POST", url: "/TasksToOfficer/Create", data: "officerid=" + officerid + "&description=" + title + "&date=" + dateString + "&IsForUpdate=false", success: function(result) { if (result.success) $("#feedback input").attr("value", ""); // clear all the input fields on success //$("#feedback_status").slideDown(250).text(result.message); // show status message with animation }, error: function(req, status, error) { } }); } } calendar.fullCalendar('unselect'); }, editable: true, lazyFetching: true, events: url //this will call the action from controller and show the saved events in db, the result of the action should be in proper formate. }); }); 

I tried here with refetchEvent, renderEvents for a callback, but it didn't work. Are there any other problems?

Answer 1

Instead of calling renderEvent you have to call updateEvent when it changes. Also note that you must provide the “real” updateEvent calendar event, not the one you compose. Therefore, your code should look like this:

 eventClick: function(calEvent, jsEvent, view) { var title = prompt('Event Title:', calEvent.title, { buttons: { Ok: true, Cancel: false} }); if (title){ calEvent.title = title; calendar.fullCalendar('updateEvent',calEvent); } } 

Answer 2

This works for me and can update the event in the database.

 eventClick: function (event, jsEvent, view) { var title = prompt('Event Title:', event.title); if (title){ event.title = title; var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss"); var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss"); $.ajax({ url: base_url+"calendar/edit_events", data: 'title=' + title + '&start=' + start + '&end=' + end + '&id=' + event.id, type: "POST", success: function (response) { //alert("hi"); displayMessage("Updated Successfully"); window.location.href = base_url+"calendar/events" } }); calendar.fullCalendar('renderEvent', { title: title, start: start, end: end, }, true ); } calendar.fullCalendar('unselect'); }, 

Answer 3

hi can you help me solve this?

eventClick: function (calEvent, jsEvent, view) {var title = prompt ('Event title:', calEvent.title, {buttons: {Ok: true, Cancel: false}}); var role = prompt ('Event Role:', calEvent.role, {buttons: {Ok: true, Cancel: false}}); var game = prompt ('Event Game:', calEvent.game, {buttons: {Ok: true, Cancel: false}});

  if (title && role && game){ calEvent.title = title; calEvent.role = role; calEvent.game = game; calendar.fullCalendar('updateEvent',calEvent); } }, }) 

This has only updated the name. The role and the game remain the same after I updated.