Full Year Calendar In JavaScript

Category: Date & Time , Javascript | March 25, 2022
AuthorSou-gata
Last UpdateMarch 25, 2022
LicenseMIT
Views1,903 views
Full Year Calendar In JavaScript

A full year calendar that can be used on your website. The calendar was written in pure JavaScript and you can switch between years in an easy way. Dark and Light modes are included as well.

How to use it:

1. Load the main JavaScript and CSS.

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

2. Build the HTML for the full year calendar.

<div class="main">
  <div class="left">
    <div class="themeSwitch">
      <img class="switch" />
    </div>
    <p class="heading">Calendar</p>
    <div class="heading-line"></div>
    <div class="wrapper">
      <div class="top">
        <p class="backward"></p>
        <p class="year-num"></p>
        <p class="forward"></p>
      </div>
      <div class="buttom"></div>
    </div>
    <p class="quote">
      <label class="lbl-one">
        "A dream is not that which you see while sleeping, it is
          something that does not let you sleep."
      </label>
      <label class="lbl-two"> - A.P.J Abdul Kalam </label>
    </p>
  </div>
  <div class="right"></div>
</div>

You Might Be Interested In:


Leave a Reply