色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

帶查看更多按鈕的谷歌日歷樣式

CSS
方一強1年前7瀏覽0評論

如何在谷歌日歷風格下管理日歷中每天的事件？

我創建了一個日歷樣式，每天都可以有事件，現在我想添加一些限制，所以每天最多可以有2個事件，如果有更多的添加查看更多按鈕，用戶點擊后顯示剩余的事件。

這是目前為止的百里香葉:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Doctor Appointments</title>
    <link rel="stylesheet" type="text/css" href="/css/all-doctors-appointments.css">
</head>

<body>
<div class="header-center">
    <h2 th:text="${monthYear}"></h2>
    <div class="button-container">
        <a class="btn btn-previous"
           th:href="@{/doctorAppointments/doctor-appointment-calendar(year=__${previousYear}__, month=__${previousMonth}__)}">Previous
            Month</a>
        <a class="btn btn-next"
           th:href="@{/doctorAppointments/doctor-appointment-calendar(year=__${nextYear}__, month=__${nextMonth}__)}">Next
            Month</a>
    </div>
</div>
<div class="calendar">
    <div class="calendar-header">
        <div th:each="dayName : ${dayNames}">
            <div th:text="${dayName}"></div>
        </div>
        <div th:each="week : ${calendarDays}" th:with="weekDates=${week}">
            <div th:each="day : ${weekDates}" class="calendar-day">
                <div class="day-number" th:text="${day.getDayOfMonth()}"></div>
                <div th:each="entry : ${doctorAppointmentsMap}"
                     th:with="doctor=${entry.key}, appointments=${entry.value}">
                    <div th:each="appointment : ${appointments}" th:block
                         th:if="${appointment.dateTime.toLocalDate() == day}">
                        <div th:text="${doctor.firstName}"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

正如我所說，日歷模板看起來不錯，我從數據庫中得到的事件很好，我只是想添加一些百里香葉條件，再次:如果有一天我有超過2個事件，顯示其中兩個和其他顯示后，用戶點擊查看更多按鈕。

我試過這樣:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Doctor Appointments</title>
    <link rel="stylesheet" type="text/css" href="/css/all-doctors-appointments.css">
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>

<body>
<div class="header-center">
    <h2 th:text="${monthYear}"></h2>
    <div class="button-container">
        <a class="btn btn-previous"
           th:href="@{/doctorAppointments/doctor-appointment-calendar(year=__${previousYear}__, month=__${previousMonth}__)}">Previous
            Month</a>
        <a class="btn btn-next"
           th:href="@{/doctorAppointments/doctor-appointment-calendar(year=__${nextYear}__, month=__${nextMonth}__)}">Next
            Month</a>
    </div>
</div>
<div class="calendar">
    <div class="calendar-header">
        <div th:each="dayName : ${dayNames}">
            <div th:text="${dayName}"></div>
        </div>
        <div th:each="week : ${calendarDays}" th:with="weekDates=${week}">
            <div th:each="day : ${weekDates}" class="calendar-day">
                <div class="day-number" th:text="${day.getDayOfMonth()}"></div>
                <div th:each="entry : ${doctorAppointmentsMap}"
                     th:with="doctor=${entry.key}, appointments=${entry.value}">
                    <div th:each="appointment, status : ${appointments}" th:block
                         th:if="${appointment.dateTime.toLocalDate() == day}">
                        <div class="appointment" th:text="${doctor.firstName}" th:class="${status.index >= 2 ? 'hidden' : ''}"></div>
                    </div>
                </div>
                <div class="see-more-btn" onclick="toggleVisibility(this)">See More</div>
                <div class="hidden-appointments">
                    <div th:each="entry : ${doctorAppointmentsMap}"
                         th:with="doctor=${entry.key}, appointments=${entry.value}">
                        <div th:each="appointment, status : ${appointments}" th:block
                             th:if="${appointment.dateTime.toLocalDate() == day}" th:class="${status.index < 2 ? 'hidden' : ''}">
                            <div class="appointment" th:text="${doctor.firstName}"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function toggleVisibility(button) {
        var hiddenAppointments = button.nextElementSibling;
        hiddenAppointments.classList.toggle('hidden');
    }
</script>

</body>
</html>

但這產生了一個月中每天的查看更多，而且，對于某些天，我需要單擊查看更多來查看事件，而不是顯示兩個事件，如果有更多的顯示，請單擊查看更多按鈕。