Glassmorphic Style Calendar Component With JavaScript

Category: Date & Time , Javascript | June 4, 2021
Author:MainakRepositor
Views Total:971 views
Official Page:Go to website
Last Update:June 4, 2021
License:MIT

Preview:

Glassmorphic Style Calendar Component With JavaScript

Description:

A Glassmorphism design inspired Calendar component based on yusufshakeel’s dyCalendarJS library.

How to use it:

1. Build the HTML for the calendar component.

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

2. Load the necessary JavaScript and CSS files.

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

3. Initialize the calendar and done.

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

4. All possible options.

  • target: for id use #id | for class use .class
  • type: values: “day|month” (default “day”)
  • month: value 0-11, where 0 = January, … 11 = December (default current month)
  • year: example 1990. (default current year)
  • date: example 1-31. (default current date)
  • monthformat: values: “mmm|full” (default “full”)
  • dayformat: values: “ddd|full” (default “full”)
  • highlighttoday: if true will highlight today’s date
  • highlighttargetdate: if true will highlight targeted date of the month year
  • prevnextbutton: if set to “show” it will show the nav button (prev|next)

You Might Be Interested In:


Leave a Reply