jquery - Insert,Update,Delete Events Operations on Fullcalendar POPUP and show Events which is inserted -

hello friends need make web application in have appointment schedule between 2 persons m using fullcalendar open popup have fields description,starttime , endtime. want set each event same fullcalendar selectable demo start:start(variable mycode) end: end not know m in right direction or not please me out if changes of events autoupdate on database need show in calendar

updated code :

javascript:

     $(document).ready(function() {     var count=0;     var livedate=new date();     var dat = new date();     var d = dat.getdate();     var m = dat.getmonth();     var y = dat.getfullyear();     $.getjson("<?php echo base_url(); ?>names",function(data){         var select = $('#agentname'); //combo/select/dropdown list         if (select.prop) {             var options = select.prop('options');         }         else {             var options = select.attr('options');         }         var calendar = $('#calendar').fullcalendar({              header: {                 left: 'prev,next today',                 center: 'title',                 right: 'month,agendaweek,agendaday'             },             selectable: true,             selecthelper: true,             select: function(start, end, allday) {                 $("#popup").show();                 $("#eventname").focus();                 $("#submit").click(function(){                     var title=$("#eventname").val();                     if (title) {                         calendar.fullcalendar('renderevent',{                             title: title,                             start: start,                             end: end,                             allday: allday                         },                         true // make event "stick"                     );                         var datastring={};                         datastring['eventname']=title;                         datastring['starttime']=$.fullcalendar.formatdate(start, "yyyy-mm-dd h:mm:ss");                         datastring['endtime']=$.fullcalendar.formatdate(end, "yyyy-mm-dd h:mm:ss");                         $.ajax({                             type : 'post',                             datatype : 'json',                             url : '<?php echo base_url(); ?>data/insert',                             data: datastring,                             success: function(data) {                                 alert("data insert successfully");                                 if(data.success)                                     alert("data insert successfully");                             }                         });                     }                     calendar.fullcalendar('unselect');                     calendar.fullcalendar('refetchevents');                     $("#popup").hide();                 });             },             editable: true,             viewdisplay: function(view) {                 if(view.name=="month" && count==0){                     var a=$(".fc-day-number").prepend("<img src='/assets/images/add.jpg' width='20' height='20'style='margin-right:80px;' name='date'>");                                                         count++;                 }             },             eventsources: [                 {                     url: '<?php echo base_url(); ?>data/read', // use `url` property                     color: '#65a9d7',    // option!                     textcolor: '#3c3d3d'  // option!                 }                                 ]         });     }); 

---

css:

<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{         width: 70%;         height: auto;         position: absolute;         background-color: rgba(255,255,255,0.8);         border-color: #0033ff;         border-style: solid;         display:block;         left: 400px;         top: 300px;         display: none;         cursor: pointer;     }     #detail{         background-color: #000;     }     #popup input{         width:480px;         border-radius: 5px;     }      #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:

<div class="wrapper"> <div id='calendar'></div> <div id="detail"></div> <div id="popup">      <form name="adddata" id="adddata" action="" method="post">     <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"name="starttime"/></td>         </tr>         <tr>             <td><lable for="endtime">end: </td>             <td><input type="text" id="endtime"name="endtime"/></td>         </tr>         <tr>             <td align="left"colspan="2">                 <button type="submit"class="k-button" name="submit" id="submit">submit</button>                 <button type="reset" name="reset" class="k-button" id="reset">reset</button>                 <button type="submit"class="k-button" name="cancel" id="cancel">cancel</button>             </td>         </tr>     </table>     </form>     <p><tt id="results"></tt></p> </div> </div> 

you can show dialog on dayclick event:

dayclick: function(date, allday, jsevent, view) {     $('#dialog').dialog('open'); } 

then format start , end date , pass form