javascript - 用于单个事件的 Bootstrap Fullcalendar 模态

Question

我正在尝试自定义 Bootstrap 全日历。

下面的例子中，每个点击事件的模态弹出窗口工作正常。但是我想在点击时实现一两个特定事件的模式。

评论以进一步澄清问题。

$(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

例如，您要显示 session 、生日聚会和 session 的模型。添加数组中的值。之后检查数组中是否存在点击事件，为此启用模型。

喜欢。

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