是否有可能与evo日历限制点显示的日期为两个或安排他们，所以他们，所以他们不包括日期.（div.type-bullet）并随时批评我的代码，并帮助我改进.感谢您的帮助-西蒙-I mean this:
P.S.大部分时间我每天有15点左右
<?php
// Include your database connection code here
include('db_connect.php');
// Retrieve events from your database
$sql = "SELECT id, name, start_date, end_date FROM booking";
$result = mysqli_query($conn, $sql);
$events = mysqli_fetch_all($result, MYSQLI_ASSOC);
// Close the database connection
mysqli_close($conn);
?>
<!DOCTYPE html>
<html>
<head>
<title>My Evo Calendar</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/evo-calendar/css/evo-calendar.min.css">
<style>
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #f2f2f2;
}
.header-link {
text-decoration: none;
color: #333;
font-weight: bold;
margin-right: 10px;
}
.add-button {
background-color: #4caf50;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="header">
<a href="/" class="header-link">Home</a>
<button class="add-button" onclick="redirectToAddPage()">Add Event</button>
</div>
<div id="calendar"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/evo-calendar/js/evo-calendar.min.js"></script>
<script>
// Function to redirect to the add page
function redirectToAddPage() {
window.location.href = "../dateSelect.php";
}
$(document).ready(function() {
// Convert PHP events array to JavaScript events array
var events = <?php echo json_encode($events); ?>;
console.log(events); // Add this line to check if events array is populated correctly
// Create an empty array to store the expanded events
var expandedEvents = [];
// Iterate through the events array
events.forEach(function(event) {
var startDate = new Date(event.start_date);
var endDate = new Date(event.end_date);
// Iterate through each day between the start_date and end_date
for (var date = startDate; date <= endDate; date.setDate(date.getDate() + 1)) {
// Create a new event object for each day
var expandedEvent = {
id: event.id,
name: event.name,
date: date.toISOString().split('T')[0], // Format the date as YYYY-MM-DD
description: '', // Add an empty description for now
color: '#ffcc80'
};
// Push the expanded event to the expandedEvents array
expandedEvents.push(expandedEvent);
}
});
// Initialize the calendar with the expanded events
$('#calendar').evoCalendar({
calendarEvents: expandedEvents
});
});
</script>
</body>
</html>字符串
1条答案
按热度按时间l7wslrjt1#
每个页面上的点是父span标记内的多个div元素
字符串
在脚本中，创建一个函数，
1.获取日历的有效日期
1.循环所有可见的日子
1.计算每天的事件数，并将它们分配给
.event-indicator类（这将用整数替换所有div元素1.你可以用css对修改后的样式进行任何你想要的设置
(document).ready下包含更新视图的新函数。fetch在每次POST/PATCH/重新启动事件时更新视图一个示例函数是
型
Evo-calendar view with daily event count