全日历的问题。我无法选择日历的日期，我不明白我做错了什么？
它应该让我选择预订日期，例如从第 10 天到第 15 天。
我也尝试查看各种指南，但没有任何效果（我正在使用 WordPress）。你能帮我吗？？
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prenotazione</title>
<!-- Includi le librerie di jQuery UI per il datepicker -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- Includi jQuery e jQuery UI -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Includi FullCalendar 6.1.9 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.9/main.min.css" rel="stylesheet">
<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
<!-- Aggiungi il percorso corretto al file chosen.min.css -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/chosen.min.css">
<script>
var stripePublicKey = 'pk_test_*************************************************';
</script>
<script src='fullcalendar/dist/index.global.js'></script>
<style>
/* Stili personalizzati */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.calendar-container {
max-width: 600px;
margin: 20px auto;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.calendar {
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<div class="calendar-container">
<h2>Prenotazione</h2>
<!-- Calendario FullCalendar -->
<div id="calendar" class="calendar"></div>
<!-- Altri input per i dati -->
<label for="num-people">Numero di Persone (4 massimo):</label>
<input type="number" id="num-people" min="1" max="4">
<label for="name">Nome:</label>
<input type="text" id="name">
<label for="email">Email:</label>
<input type="email" id="email">
<label for="phone">Telefono:</label>
<input type="tel" id="phone">
<p>Prezzo Totale: <span id="total-price"></span>€</p>
<div id="price-display"></div> <!-- Puoi aggiungerlo qui -->
<!-- Aggiungi un pulsante per la prenotazione -->
<button id="prenota-button">Prenota e scopri il prezzo</button>
<label for="card-element">
Stripe Carta di Credito o Debito
</label>
<div id="card-element">
<!-- Un elemento per l'inserimento dei dati della carta di credito -->
</div>
<div id="card-errors" role="alert"></div>
<button id="submit">Paga ora</button>
<div id="confirmation-message" style="display: none;">
<h2>Grazie per la tua prenotazione!</h2>
<p>Riceverai un'email di conferma a breve.</p>
<!-- Altri dettagli di conferma qui -->
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
selectable: true
});
calendar.render();
});
</script>
</body>
</html>
它应该让我选择预订日期，例如从第 10 天到第 15 天。
要在 HTML 文档中选择 FullCalendar 的日期，您可以使用 FullCalendar 库提供的“可选择”功能。在现有代码中，您已经启用了“可选择”功能，但您可能需要添加一些额外的代码来处理选定的日期。
具体操作方法如下：
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
selectable: true
});
calendar.render();
calendar.on('select', function(info) {
var selectedStartDate = info.startStr; // Start date in ISO format
var selectedEndDate = info.endStr; // End date in ISO format
// You can now use selectedStartDate and selectedEndDate as needed.
console.log('Selected Start Date: ', selectedStartDate);
console.log('Selected End Date: ', selectedEndDate);
// You can perform actions like displaying the selected dates or handling the booking process here.
});
当用户在日历中选择日期范围时，此代码将记录所选的开始和结束日期。您可以自定义此逻辑来执行您需要的任何操作，例如预约或更新 UI 以显示所选日期。
确保将此代码包含在您的
document.addEventListener('DOMContentLoaded', function() {...}