当前位置:主页 > JavsScript库 > 日期 / 时间 >

JavaScript的Glassmorphic风格日历组件
栏目分类:日期 / 时间   发布日期:2021-09-23   浏览次数:

Glassmorphism 设计启发了基于 yusufshakeel 的dyCalendarJS库的Calendar 组件。

使用它:

1. 为日历组件构建 HTML。

<section>
  <div class="box">
    <div class="container">
      <div id="calendar">
      </div>
    </div>
  </div>
</section>

2. 加载必要的 JavaScript 和 CSS 文件。

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="cal.css" />
<script src="calendar.js"></script>

3. 初始化日历并完成。

dycalendar.draw({
  target:'#calendar',
  type:'month',
  dayformat:'full',
  monthformat:'full',
  highlighttargetdate:true,
  prevnextbutton:'show'
})

4. 所有可能的选项。

  • target:对于 id 使用 #id | 用于课堂使用 .class

  • type:值:“日|月”(默认“日”)

  • month:值 0-11,其中 0 = 一月,... 11 = 十二月(默认当前月份)

  • year:例如 1990。(默认当前年份)

  • date:示例 1-31。(默认当前日期)

  • monthformat:值:“mmm|full”(默认为“full”)

  • dayformat:值:“ddd|full”(默认为“full”)

  • highlighttoday:如果为 true 将突出显示今天的日期

  • highlighttargetdate:如果为 true 将突出显示月份中的目标日期

  • prevnextbutton:如果设置为“show”,它将显示导航按钮(prev|next)


官方网站:https://github.com/MainakRepositor/Calendar

相关热词: Calendar日历组件

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库