單個事件的Bootstrap Fullcalendar Modal

Question

我正在嘗試自定義引導全日歷。

下面的示例在每次點擊正常工作時，每個事件的模式彈出窗口都可以正常工作。 但我想實現一種或兩種特定點擊事件的模式 。

評論以進一步澄清該問題。

 $(document).ready(function() { 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' }, height: 600, selectable: true, selectHelper: true, select: function(start, end, allDay) { var title = prompt('Event Title:'); if (title) { calendar.fullCalendar('renderEvent', { title: title, start: start, end: end, allDay: allDay, title: 'the title', content: function() { return $("#popoverContent").html(); }, template: popTemplate, placement: 'left', html: 'true', trigger: 'click', animation: 'true', container: 'body' }, true ); } calendar.fullCalendar('unselect'); }, eventRender: function(event, element) { element.popover({ title: element.find('.fc-title, .fc-list-item-title').html() + '<span class="popover-title"><a data-toggle="popover" data-trigger="focus" class="close">&times</a></span>', placement: 'top', html: true, trigger: 'manual', animation: true, container: 'body', content: function() { setTimeout(function() { element.popover('hide'); }, 20000); return $('#popover-content').html(); } }).on("mouseenter", function() { var _this = this; $(this).popover("show"); $(".popover").on("mouseleave", function() { $(_this).popover('hide'); }); $(".close").click(function(e) { e.stopPropagation(); $(this).trigger("click"); }); }).on("mouseleave", function() { var _this = this; setTimeout(function() { if (!$(".popover:hover").length) { $(_this).popover("hide"); } }, 300); $(".close").click(function(e) { e.stopPropagation(); $(this).trigger("click"); }); }); }, eventAfterRender: function(event, element) { $(".popover").remove(); element.popover('hide'); }, eventClick: function(event, element, view) { //element.popover('hide'); $('#modalTitle').html(event.title); $('#modalBody').html(event.description); $('#eventUrl').attr('href', event.url); $('#calendarModal').modal(); }, editable: true, events: [{ title: 'All Day Event', start: new Date(y, m, 1), description: 'This is a cool event' }, { title: 'Long Event', url: 'http://stackoverflow.com', start: new Date(y, m, d - 5), end: new Date(y, m, d - 2) }, { title: "Conference", color: "#F6BB42", start: "2019-06-04", end: "2019-06-05" }, { id: 999, title: 'Repeating Event', start: new Date(y, m, d - 3, 16, 0), allDay: false }, { id: 999, title: 'Repeating Event', color: '#FB6E52', start: new Date(y, m, d + 4, 16, 0), allDay: false }, { title: 'Meeting', color: "#DA4453", start: new Date(y, m, d, 10, 30), allDay: false }, { title: 'Lunch', start: new Date(y, m, d, 12, 0), end: new Date(y, m, d, 14, 0), allDay: false }, { title: 'Birthday Party', color: "#37BC9B", start: new Date(y, m, d + 1, 19, 0), end: new Date(y, m, d + 1, 22, 30), allDay: false }, { title: 'Click for Google1', start: new Date(y, m, 28), end: new Date(y, m, 29), url: 'http://stackoverflow.com', } ] }); var popoverElement; }); 

 .modal .modal-backdrop.in { opacity: 0; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script> <div id="calendar"/> <div id="calendarModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 id="modalTitle" class="modal-title"></h4> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button> </div> <div id="modalBody" class="modal-body"> modal content </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

Answer 1

例如，您要顯示會議，生日聚會和會議的模型。 將值添加到數組中。 之后，檢查數組中是否存在click事件，為此啟用模型。

喜歡。

   eventClick: function(event, element, view) {

          //Add the specific event list in array.
          var event_array = ['Conference', 'Birthday Party', 'Meeting'];
          var  title = event.title;

          //On click of event check clicked event exists in event_array or not. If exists display the model.
          if($.inArray(title, event_array) !== -1){
            //element.popover('hide');
            $('#modalTitle').html(event.title);
            $('#modalBody').html(event.description);
            $('#eventUrl').attr('href', event.url);
            $('#calendarModal').modal();
         }
        },