how to add,update,delete on each date with new data using json in full calendar

[Emonnonge]

Hello Friends I m new in Fullcalendar i want to add,update,delete on each date popup page whenever any event is add also show after adding in month view and agendaDay and agendaWeekI do not know More so Suggestions,answers are acceptable\[code\]Script Code : <script type='text/javascript'> $(document).ready(function() { var count=0; /* initialize the calendar -----------------------------------------------------------------*/ $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, viewDisplay: function(view) { if(view.name=="month" && count==0){ var a=$(".fc-day-number").prepend("<img src='http://stackoverflow.com/assets/images/add.jpg' width='20' height='20'style='margin-right:80px;' name='date'>"); count++; } if(view.name=="agendaDay" || view.name=="agendaWeek"){ $("#popup").hide(); count++; } }, slotMinutes:5, editable: true, droppable: true, // this allows things to be dropped onto the calendar !!! eventClick : function (calEvent, jsEvent, view){ console.log(calEvent); }, dayClick : function (date, allDay, jsEvent, view){ console.log(jsEvent); $('#popup').show(); $('#popup').css({left : jsEvent.clientX, top : jsEvent.clientY}); // function viewDetail(date,allDay,jsEvent,view) // { // // } // if(view.name=="agendaWeek" || view.name=="agendaDay"){ // $('#popup1').show(); // $('#popup1').css({left: jsEvent.clientX, top : jsEvent.clientY}); // } } }); }); </script>----------Css Code: <style> /* */ body { text-align: left; font-size: 14px; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; } #calendar { width: 70%; margin: 0 auto; text-align:left; } #popup{ height: auto; width: 30%; position: absolute; background-color: white; border-color: #0033ff; border-style: solid; } #popup input{ width:90%; } #popup table label{ font-size: 100px; } #startTime{ background-image: url('/assets/images/calendar.png'); background-position:right center; background-repeat:no-repeat; } #endTime{ background-image: url('/assets/images/calendar.png'); background-position:right center; background-repeat:no-repeat; } </style>----------Html Code : <div class="wrapper"> <div id='calendar'></div> <div id="popup" style="display:none"> <table> <tr> <td><lable for="eventName">Description:</lable></td> <td><input name="eventName" id="eventName"></td> </tr> <tr> <td><lable for="startTime">Start: </td> <td><input type="text" id="startTime"/></td> </tr> <tr> <td><lable for="endTime">End: </td> <td><input type="text" id="endTime"/></td> </tr> <tr> <td align="left"colspan="2"><button type="submit"class="k-button" name="submit" id="submit">Submit</button>//THis Not WOrking i do not know why <button type="reset" name="reset" value="http://stackoverflow.com/questions/15739963/Reset" class="k-button" id="reset">Reset</button>//THis Not WOrking i do not know why </td> </tr> </table> <script> $('#startTime').click( function(e) { var a=""; $('#startTime').AnyTime_noPicker().AnyTime_picker().focus(); e.preventDefault(); var a=$('#startTime').val(""); }); $('#endTime').click( function(e) { $('#endTime').AnyTime_noPicker().AnyTime_picker().focus(); e.preventDefault(); }); </script> </div></div>\[/code\]