evo 日历，点覆盖日期修复？

Question

evo 日历是否可以将日期显示的点限制为两个或排列它们，这样它们就不会覆盖日期。（div.type-bullet）并随时批评我的代码并帮助我改进。感谢您的帮助 - 西蒙 -

附注大多数时候我每天大约有 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>

Answer 1

每页上的点是父级span标签内的多个div元素

<span class="event-indicator">
    <div class="type-bullet"><div class="type-holiday">
</span>

在您的脚本中，创建一个可以使用的函数

获取日历的有效日期
循环所有可见的日子
计算每天的事件数量并将其分配给
```
.event-indicator
```
类（这会将所有
```
div
```
元素替换为整数
您可以使用 css 随意设置修改后的样式
在
```
(document).ready
```
下包含更新视图的新函数。
- 您还可以使用
```
fetch
```
  在每次发布/修补/删除事件时更新视图

一个示例函数是

// Function to update daily event count for visible days in calendar
function updateEventsView() {
    // Get the list of active events for the day of interest
    var currentActiveDate = $("#calendar").evoCalendar('getActiveDate');
    
    // Loop over all the visible calendar days that are accessed from a NodeList
    document.querySelectorAll('.calendar-day').forEach(function(dateDiv) {
        // Get the date string of each visible day div
        var dateString = dateDiv.querySelector(".day").getAttribute('data-date-val');
        // Make that day active and count the number of visible events
        $('#calendar').evoCalendar('selectDate', dateString);
        var allActiveEvents = $('#calendar').evoCalendar('getActiveEvents');

        // Syntax to check if the event-indicator span exists in the .calendar-day div
        var eventIndicator = dateDiv.querySelector('.event-indicator');

        // Change the value of the event-indicator span
        if (allActiveEvents.length > 0) {
            dateDiv.querySelector('.event-indicator').textContent = allActiveEvents.length;
        } else if (allActiveEvents.length === 0 && eventIndicator) {
            eventIndicator.remove();
        };
    });

    // After updating the list, change the active date back to what it was 
    $('#calendar').evoCalendar('selectDate', currentActiveDate);
};

evo 日历，点覆盖日期修复？

问题描述投票：0回答：1

1个回答

最新问题

evo 日历，点覆盖日期修复？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1