javascript - Bootstrap Fullcalendar Modal 用于单个事件
问题描述
我正在尝试自定义引导程序完整日历。
下面的示例中,每个点击事件的模式弹出窗口都可以正常工作。但我想在点击时实现一两个特定事件的模式。
评论以进一步澄清该问题。
$(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">×</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>
解决方案
例如,您要显示会议、生日聚会和会议的模型。将值添加到数组中。之后检查数组中是否存在单击事件,为此启用模型。
像。
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();
}
},
推荐阅读
- c# - 使用 CSPROJ 和 AppVeyor {build} 的部分版本获取 2.0.x 样式的内部版本号的语法是什么?
- wso2 - 如何在 WSO2 Developer Studio 中使用 REST Web 服务?
- python-3.x - 如何在使用 python 进行网络抓取时为 request_url 提供规范
- java - Android - 释放位图的内存
- git - 如何在远程存储库中找到用户特定的分支?
- javascript - 我需要 HERE 地图中的多条路线?
- c# - Datagridview 允许用户使用组合框列添加或删除行
- android - 如何从共享点站点获取数据..通过使用基于 NTML 的身份验证凭据
- php - 内联类型注释的状态
- python - Tensorflow:加载一个 .pb 文件,然后将其保存为冻结图问题