在 FullCalendar 應用程序上顯示模式對話框
[英]Display a modal dialog box on FullCalendar app
問題描述
我在 Asp.net Core Razor Page 應用程序中使用 FullCalendar.io 版本 5.3.2。
我添加了一個 JavaScript 函數來為應用程序創建一個模式對話框。 我的 Index.cshtml 文件位於目錄路徑：MyDemo > Pages > Calendar > Index.cshtml 如下所示：-
@page
@model MyDemo.Pages.Calendars.IndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href='~/lib/fullcalendar/lib/main.css' rel='stylesheet' />
<script src='~/lib/fullcalendar/lib/main.js'></script>
<link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet" />
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link href='~/lib/fullcalendar/lib/main.min.css' rel='stylesheet' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js'></script>
<script src='~/lib/fullcalendar/lib/main.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js'></script>
<script>
$(document).ready(function() {
$("#calendar").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
initialView: "month",
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true, // allow "more" link when too many events
select: function(start, end) {
// Display the modal.
// You could fill in the start and end fields based on the parameters
$(".modal").modal("show");
$(".modal")
.find("#title")
.val("");
$(".modal")
.find("#starts-at")
.val("");
$(".modal")
.find("#ends-at")
.val("");
$("#save-event").show();
$("input").prop("readonly", false);
},
eventRender: function(event, element) {
//dynamically prepend close button to event
element
.find(".fc-content")
.prepend("<span class='closeon material-icons'></span>");
element.find(".closeon").on("click", function () {
$("#calendar").fullCalendar("removeEvents", event._id);
});
},
eventClick: function(calEvent) {
// Display the modal and set event values.
$(".modal").modal("show");
var title = $(".modal")
.find("#title")
.val(calEvent.title);
var start = $(".modal")
.find("#starts-at")
.val(calEvent.start);
var end = $(".modal")
.find("#ends-at")
.val(calEvent.end);
$("#save-event").show();
$("input").prop("readonly", false);
}
});
// Bind the dates to datetimepicker.
$("#starts-at, #ends-at").datetimepicker();
//click to save event
$("#save-event").on("click", function(event) {
var title = $("#title").val();
if (title) {
var eventData = {
title: title,
start: $("#starts-at").val(),
end: $("#ends-at").val()
};
$("#calendar").fullCalendar("renderEvent", eventData, true); // stick? = true
}
$("#calendar").fullCalendar("unselect");
// Clear modal inputs
$(".modal")
.find("input")
.val("");
// hide modal
$(".modal").modal("hide");
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
}
#calendar {
width: 900px;
margin: 0 auto;
}
#wrap {
width: 1100px;
margin: 0 auto;
}
.closeon {
border-radius: 5px;
}
input {
width: 50%;
}
input[type="text"][readonly] {
border: 2px solid rgba(0, 0, 0, 0);
}
/*info btn*/
.dropbtn {
/*background-color: #4CAF50;*/
background-color: #eee;
margin: 10px;
padding: 8px 16px 8px 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-left: 100px;
margin-top: -300px;
}
.dropdown-content p {
color: black;
padding: 4px 4px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: grey;
}
.dropdown:hover .dropbtn span {
color: white;
}
</style>
</head>
<body>
<div id='calendar'></div>
<div id='datepicker'></div>
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4><input class="modal-title" type="text" name="title" id="title" placeholder="Event Title/Description" /></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<label class="col-xs-4" for="starts-at">Starts at</label>
<input type="text" name="starts_at" id="starts-at" />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<label class="col-xs-4" for="ends-at">Ends at</label>
<input type="text" name="ends_at" id="ends-at" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="save-event">Save</button>
</div>
</div>
</div>
</div>
</body>
</html>
輸出解決方案顯示為空白網頁，控制台窗口顯示以下錯誤消息和警告消息：-
錯誤信息：-
Uncaught TypeError: $(...).fullCalendar is not a function
at HTMLDocument.<anonymous> (index:40)
at e (jquery.min.js:2)
at t (jquery.min.js:2)
警告信息： -
jquery.min.js:2 jQuery.Deferred exception: $(...).fullCalendar is not a function TypeError: $(...).fullCalendar is not a function
at HTMLDocument.<anonymous> (https://localhost:44370/Calendars/index:40:28)
at e (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30005)
at t (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30307) undefined
更新我已經更新了 Index.cshtml 頁面中的代碼，現在可以看到 FullCalendar 網頁。 我添加了一個添加事件按鈕，當我單擊該按鈕時，沒有出現提示。 當我檢查控制台窗口時，沒有錯誤：-
@page
@model MyDemo.Pages.Calendars.IndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href='~/lib/fullcalendar/lib/main.css' rel='stylesheet' />
<script src='~/lib/fullcalendar/lib/main.js'></script>
<link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet" />
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
themeSystem: 'bootstrap',
headerToolbar: {
left: 'title',
center: 'addEventButton',
right: 'prev,next today,dayGridMonth,timeGridWeek,timeGridDay'
},
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectMirror: true,
customButtons: {
addEventButton: {
text: 'add event',
eventClick: function (event) {
var dateStr = prompt("Event ID: " + event.id + " Start Date: " + $.fullCalendar.formatDate(event.start, 'YYYY-MM-DD') + " End Date: " + event.end);
var date = new Date(dateStr + 'T00:00:00'); // will be in local time
if (!isNaN(date.valueOf())) { // valid?
calendar.addEvent({
title: 'dynamic event',
start: date,
end: date,
allDay: true
});
alert('Great. Now, update your database...');
} else {
alert('Invalid date.');
}
}
}
}
});
calendar.render();
});
</script>
</head>
<body>
<div class="p-5">
<h2 class="mb-4">Full Calendar</h2>
<div class="card">
<div class="card-body p-0">
<div id='calendar'></div>
</div>
</div>
</div>
<!-- calendar modal -->
<div id="modal-view-event" class="modal modal-top fade calendar-modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<h4 class="modal-title"><span class="event-icon"></span><span class="event-title"></span></h4>
<div class="event-body"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="modal-view-event-add" class="modal modal-top fade calendar-modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form id="add-event">
<div class="modal-body">
<h4>Add Event Detail</h4>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="v.title">
</div>
<div class="form-group">
<label>Start Date</label>
<input type='text' class="datetimepicker form-control" name="v.startdate">
</div>
<div class="form-group">
<label>End Date</label>
<input type='text' class="datetimepicker form-control" name="v.enddate">
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" name="v.description"></textarea>
</div>
<div class="form-group">
<label>Theme Color</label>
<select class="form-control" name="v.themecolor">
<option value="fc-bg-default">fc-bg-default</option>
<option value="fc-bg-blue">fc-bg-blue</option>
<option value="fc-bg-lightgreen">fc-bg-lightgreen</option>
<option value="fc-bg-pinkred">fc-bg-pinkred</option>
<option value="fc-bg-deepskyblue">fc-bg-deepskyblue</option>
</select>
</div>
<div class="form-group">
<label>Event Icon</label>
<select class="form-control" name="eicon">
<option value="circle">circle</option>
<option value="cog">cog</option>
<option value="group">group</option>
<option value="suitcase">suitcase</option>
<option value="calendar">calendar</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
FullCalendar 網頁圖片：-
1 個解決方案
解決方案1
1 已采納 2020-11-12 07:50:21
我添加了一個添加事件按鈕，當我單擊該按鈕時，沒有出現提示。
該演示展示了如何通過自定義按鈕向日歷添加新事件，在示例代碼中（通過單擊該頁面右上角的“在 CodePen 中編輯”），您會發現使用了click屬性。
正如@ADyson 在評論中分享的那樣，如果您查看有關 "customButtons" 的文檔，您還可以獲得 customButton 條目接受的屬性的詳細說明。
此外，請注意回調函數不接受日歷事件作為參數。
`click` - a callback function that is called when the button is clicked. Accepts two arguments: ( mouseEvent, htmlElement ).
如果您想讓用戶通過自定義按鈕向日歷添加新事件，您可以修改代碼以使用startdate和enddate兩個提示，如下所示。
customButtons: {
addEventButton: {
text: 'add event',
click: function () {
var dateStr = prompt('Enter start date in YYYY-MM-DD format');
var dateEnd = prompt('Enter end date in YYYY-MM-DD format');
var str = new Date(dateStr + 'T00:00:00'); // will be in local time
var end = new Date(dateEnd + 'T00:00:00');
if (!isNaN(str.valueOf()) && !isNaN(end.valueOf())) { // valid?
calendar.addEvent({
title: 'dynamic event',
start: str,
end: end,
allDay: true
});
alert('Great. Now, update your database...');
} else {
alert('Invalid date.');
}
}
}
}
模態對話框
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.