javascript - Full calender delete an event -
i looking delete event full calender via event confirmation dialog box when clicked. looking use form(with text-boxes) save values calender. have read documentation not know how implement, place , how use functions such as:
.fullcalendar( 'removeeventsource', source ) the calender implemented need these last few functions.
here code, copy , paste notepad run , see.
<!doctype html> <html> <head> <link href='../fullcalendar/fullcalendar.css' rel='stylesheet' /> <link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' /> <script src='../jquery/jquery-1.9.1.min.js'></script> <script src='../jquery/jquery-ui-1.10.2.custom.min.js'></script> <script src='../fullcalendar/fullcalendar.min.js'></script> <script> $(document).ready(function() { var equip = document.getelementbyid('equipment').value; var size = document.getelementbyid('size').value; var surface = document.getelementbyid('surface').value; var ordernumber = document.getelementbyid('ordernumber').value; var responsible = document.getelementbyid('responsible').value; 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 equipment = document.getelementbyid('equipment'); var title = prompt('title'); if (title && surface) { calendar.fullcalendar('renderevent', { title: title, start: start, end: end, allday: allday, description: "ga", backgroundcolor: 'red' }, true // make event "stick" ); } else if(title){ calendar.fullcalendar('renderevent', { title: title, start: start, end: end, allday: allday }, true // make event "stick" ); } calendar.fullcalendar('unselect'); }, eventclick: function(calevent, jsevent, view) { alert("equipment: " + equip + "\nsize: " + size + "\nrequired on surface: " + surface + "\nwork order number: " + ordernumber + "\nresponsible: " + responsible); var r=confirm("press button"); if (r==true) { } else { x="you pressed cancel!"; } // change border color fun $(this).css('border-color', 'red'); }, // eventmouseover: function(calevent, jsevent, view) { // if(surface) // { // // change border color fun // $(this).css('background-color', 'red'); // } // }, editable: true, events: [ { title: 'test event', start: new date(y, m, 28), color: 'yellow', url: 'http://google.com/' } ] }); }); </script> <style> body { margin-top: 40px; text-align: left; font-size: 14px; font-family: "lucida grande",helvetica,arial,verdana,sans-serif; } #calendar { width: 1000px; margin: 0 auto; } </style> </head> <body> <align="right"> <form> equipment: <input type='text' id='equipment' /> <br /> size: <input type='text' id='size' /> <br /> required on surface: <input type='text' id='surface' /> <br /> work order number: <input type='text' id='ordernumber' /> <br /> responsible: <input type='text' id='responsible' /> <br /> <div id='calendar'></div> <form> </body> </html>
var r=confirm("press button"); if (r==true) { deleteevent(eventid,startdatetime,enddatetime)//when r true write function make server call delete event , save in db $('#calendar').fullcalendar('removeevents');// remove events $('#calendar').fullcalendar('addeventsource', pevents);//add events $('#calendar').fullcalendar('rerenderevents');// re render events } thats it, hope work.
Comments
Post a Comment