Bootstrap Fullcalendar Modal for single event

Question

I am trying to customize the bootstrap fullcalendar.

The below example the modal popup for every event on click working fine. But I want to achieve the modal for one or two specific event on click.

Comment for further clarification about the 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

For example, you want to display the model for Conference, Birthday Party and Meeting. Add the value in the array. After that check if the click event exists in array enable the model for that.

like.

   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();
         }
        },