Glassmorphic Style Calendar Component With JavaScript

Preview:

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)