javascript - Fullcalendar: How to create Bootstrap Modal box on click of a custom button? -


in fullcalendar, want create bootstrap modal on click of custom button.i not know how it. have tried , kept prompt box, not requirement. me how pop modal on click of button click. following code:-

<script>  $(document).ready(function() {   $.ajax({         url: "calendar/show_holidays",         type: 'post', // send post data         data: 'type=fetch',         async: true,                 success: function(s){           holidays =s;          // holidays = '['+s+']';           //alert(holidays);           $('#calendar').fullcalendar('addeventsource', json.parse(holidays));            } });   $('#calendar').fullcalendar({    custombuttons: {     eventbutton: {         text:'add event',          click:function(event, jsevent, view){                 console.log(event.id);                   var title = prompt('event title:', event.title, {     buttons: { ok: true, cancel: false} });                   if (title){                       event.title = title;                           console.log('type=changetitle&title='+title+'&eventid='+event.id);                       $.ajax({                             url: '/calendar/show_holidays',                         data:     'type=changetitle&title='+title+'&eventid='+event.id,                             type: 'post',                             datatype: 'json',                             success: function(response){                                     if(response.status == 'success')                                                                 $('#calendar').fullcalendar('updateevent',event);                             },                             error: function(e){                                 alert('error processing request:    '+e.responsetext);                             }                         });                   }          }      }   },    utc: true,  header: {  left: 'prev,next today eventbutton',  center: 'title',  right: 'month,agendaweek,agendaday'     },      editable: true,      droppable: true,      eventclick: function(calevent, jsevent, view) {         alert('event: ' + calevent.title);         // change border color fun        $(this).css('border-color', 'red');     },      eventafterrender: function(event, element, view) {       element.append(event.title);      }       });   //$('#calendar').fullcalendar('addeventsource', jsonevents);         }); </script> 

in html code have added :-

 <div id='calendar'></div> 


Comments

Popular posts from this blog

PySide and Qt Properties: Connecting signals from Python to QML -

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

scala - 'wrong top statement declaration' when using slick in IntelliJ -