Full Year Calendar In JavaScript

Category: Date & Time , Javascript | March 25, 2022
Author:Sou-gata
Views Total:899 views
Official Page:Go to website
Last Update:March 25, 2022
License:MIT

Preview:

Full Year Calendar In JavaScript

Description:

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