📌  相关文章
📜  如何使用 JavaScript 仅在图标上单击显示日历？(1)

📅  最后修改于: 2023-12-03 14:51:54.536000             🧑  作者: Mango

如何使用 JavaScript 仅在图标上单击显示日历？

在许多 web 应用程序中，日历是必不可少的一部分。为了提高用户体验，我们可以使用 JavaScript 在单击图标时显示日历。

准备工作

在开始编写代码之前，我们需要引入一些依赖项。首先，我们需要一个日历库。推荐使用 FullCalendar，它具有灵活的配置选项和功能。其次，我们需要引入 jQuery 库，因为 FullCalendar 需要依赖于它。

<!-- 引入 FullCalendar 和 jQuery 库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" integrity="sha512-fcTYyVGWeqxpbboC0olX+EfO7f1KazOzg+iJ+Yk5421omTHOu8WjJl7v4H4iclQyn7VDBJ25gUfN6e5SztYiwg==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-aqhy///z1l5DAmKJgB+C0NcltRMynQ/aQThNwIMYShN/auPbI7kOy22M21QSrPUKlJDbzE7jJ8xFh+mqdAaJLw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-or7v3B+tKoMaVIp4u6OZU1PxkBK6WCFY73H5S1RS5g5Oy3hjA/TblL61usPbc0ti/7jtF1WMTw1d0f+xNzxNvQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js" integrity="sha512-csCVJcGikp9XJCzKBxq3++LwHHHr/WrjmIVgRI1RFOEGfMxdFzMTT/9EiPzLZsi8tBUd/hwA0NtUTsAg0xm1pA==" crossorigin="anonymous"></script>
编写 HTML

接下来，我们需要编写一个包装日历的 <div>，以及一个用于触发日历的图标。我们可以使用 Font Awesome 提供的免费图标。

<div id="calendarWrapper">
   <i id="calendarIcon" class="fas fa-calendar-alt"></i>
   <div id="calendar"></div>
</div>
编写 JavaScript

在 HTML 中添加完元素后，我们需要编写一些 JavaScript 代码，以便在单击图标时显示和隐藏日历。

首先，我们需要配置 FullCalendar。此处我们使用了 selectable: true 来允许用户选择日期范围。

$('#calendar').fullCalendar({
   selectable: true,
   header: {
      center: 'title'
   }
});

接下来，我们需要编写一些 JavaScript 代码，以显示和隐藏日历。

$('#calendarIcon').click(function () {
   $('#calendar').toggle();
});

$(document).click(function(e) {
   if (!$(e.target).closest('#calendarWrapper').length) {
      $('#calendar').hide();       
   }
});

首先，我们在图标上绑定了一个单击事件，该事件会触发显示或隐藏日历（通过 toggle() 方法）。

然后，我们监听整个文档的单击事件。如果用户单击了其他地方，我们也会隐藏日历（通过 hide() 方法）。

完整代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JavaScript Calendar</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" integrity="sha512-fcTYyVGWeqxpbboC0olX+EfO7f1KazOzg+iJ+Yk5421omTHOu8WjJl7v4H4iclQyn7VDBJ25gUfN6e5SztYiwg==" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-G1DJF/8Ks+PfEJ/AkNgMi1cJp/mhcaKOzCcpJEKolrl9YLJLLv2nWbeiuAK7nF+hhbUdar7VjiRg6+ar7VakEw==" crossorigin="anonymous" />
  <style>
    #calendarWrapper {
      position: relative;
    }
    #calendar {
      position: absolute;
      top: 30px;
      right: 0;
      z-index: 1;
      display: none;
      background-color: #fff;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 20px;
    }
  </style>
</head>

<body>
  <div id="calendarWrapper">
    <i id="calendarIcon" class="fas fa-calendar-alt"></i>
    <div id="calendar"></div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-aqhy///z1l5DAmKJgB+C0NcltRMynQ/aQThNwIMYShN/auPbI7kOy22M21QSrPUKlJDbzE7jJ8xFh+mqdAaJLw==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-or7v3B+tKoMaVIp4u6OZU1PxkBK6WCFY73H5S1RS5g5Oy3hjA/TblL61usPbc0ti/7jtF1WMTw1d0f+xNzxNvQ==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js" integrity="sha512-csCVJcGikp9XJCzKBxq3++LwHHHr/WrjmIVgRI1RFOEGfMxdFzMTT/9EiPzLZsi8tBUd/hwA0NtUTsAg0xm1pA==" crossorigin="anonymous"></script>
  <script>
    $('#calendar').fullCalendar({
      selectable: true,
      header: {
        center: 'title'
      }
    });

    $('#calendarIcon').click(function () {
      $('#calendar').toggle();
    });

    $(document).click(function (e) {
      if (!$(e.target).closest('#calendarWrapper').length) {
        $('#calendar').hide();
      }
    });
  </script>
</body>

</html>
总结

使用 JavaScript 在单击图标时显示日历是一个很常见的需求。通过使用 FullCalendar 库和一些简单的 JavaScript 代码，我们可以轻松地实现这个功能。