Cara Membuat Kalender Dengan HTML dan CSS - Lelluzec

Minggu, 22 Maret 2020

Cara Membuat Kalender Dengan HTML dan CSS

Kalender adalah sistem mengatur hari untuk tujuan sosial, agama, komersial atau administrasi. Ini dilakukan dengan memberi nama pada periode waktu, biasanya hari, minggu, bulan dan tahun. Tanggal adalah penunjukan satu hari tertentu dalam sistem tersebut. Kalender juga merupakan catatan fisik (seringkali kertas) dari sistem semacam itu. Kalender juga dapat berarti daftar acara yang direncanakan, seperti kalender pengadilan atau daftar dokumen yang sebagian atau seluruhnya kronologis, seperti kalender surat wasiat.

Periode dalam kalender (seperti tahun dan bulan) biasanya, meskipun tidak harus, disinkronkan dengan siklus matahari atau bulan. Jenis yang paling umum dari kalender pra-modern adalah kalender lunisolar, kalender lunar yang kadang-kadang menambahkan satu bulan selingan untuk tetap disinkronkan dengan tahun matahari dalam jangka panjang.

Nah disini admin akan membagikan syntax Pure CSS Calender:
HTML:
<!DOCTYPE html>
<html>
<head>
  <title>Calender</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <nav role='navigation' class="sections">
  <ul>
    <li class="notes"><a href="#"></a></li>
    <li class="calendar active"><a href="#"></a></li>
    <li class="settings"><a href="#"></a></li>
  </ul>
</nav>

<section class="mounth" id="january">
  <header>
    <h1>JANUARY 2020</h1>
    <nav role='padigation'>
      <span></span>
      <span></span>
    </nav>
  </header>

  <article>
    <div class="days">
      <b>SU</b>
      <b>MO</b>
      <b>TU</b>
      <b>WE</b>
      <b>TH</b>
      <b>FR</b>
      <b>SA</b>
    </div>
    <div class="dates">
      <span class="disable">30</span>
      <span class="disable">31</span>
     
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span>10</span>
      <span>11</span>
      <span>12</span>
      <span>13</span>
      <span>14</span>
      <span>15</span>
      <span class="active">16</span>
      <span>17</span>
      <span>18</span>
      <span>19</span>
      <span>20</span>
      <span>21</span>
      <span>22</span>
      <span>23</span>
      <span>24</span>
      <span>25</span>
      <span>26</span>
      <span>27</span>
      <span>28</span>
      <span>29</span>
      <span>30</span>
      <span>31</span>
     
      <span class="disable">1</span>
      <span class="disable">2</span>
      <span class="disable">3</span>
      <span class="disable">4</span>
      <span class="disable">5</span>
      <span class="disable">6</span>
      <span class="disable">7</span>
      <span class="disable">8</span>
      <span class="disable">9</span>
    </div>
  </article>
</section>
</body>
</html>

CSS:

::selection {
  background: rgba(0,0,0,.05);
}
body {
  padding: 20px;
  background: #d2d5e0;
  font-family: 'Open Sans', sans-serif;
}
ul, h1, h2, h3, h4 {
  margin: 0; padding: 0;
  list-style: none;
}
a, li,
header nav span,
article span {
  text-decoration: none;
  transition: all .25s ease-in-out;
}
h1 {
  font: 300 28px 'Open Sans';
  color: #4c5373;
}

/****/
/* Left Bar */
/****/
nav.sections {
  overflow: hidden;
  display: block;
  float: left;
  width: 82px; height: auto;
  margin-right: 20px;
  background: #3bc1f8;
  box-shadow: 0 1px 1px rgba(78,200,247,.35);
  border-radius: 5px;
  text-aling: center;
}
  nav.sections li a {
    display: block;
    width: 100%; height: 82px;
  }
    nav.sections li:hover,
    nav.sections li.active {
      background: #00aced;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.07);
    }
    nav.sections li.notes a,
    nav.sections li.calendar a,
    nav.sections li.settings a {
      background: url('http://ysfu.net/sprite.png') no-repeat;
    }
    nav.sections li.notes a {
      background-position: 25px 25px;
    }
    nav.sections li.calendar a {
      background-position: 25px -57px;
    }
    nav.sections li.settings a {
      background-position: 25px -139px;
    }

/****/
/* Calendar */
/****/
section.mounth {
  overflow: hidden;
  display: block;
  float: left;
  width: 420px; height: auto;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.25);
  border-radius: 5px;
}
  header {
    position: relative;
    display: block;
    height: 80px;
    background: #e9eaf0;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
  }
    header h1 {
      margin-left: 30px;
      line-height: 80px;
    }
    header nav {
      overflow: hidden;
      position: absolute;
      display: block;
      right: 30px; top: 30px;
    }
      header nav span {
        display: block;
        float: left;
        width: 11px; height: 20px;
        margin-left: 30px;
        cursor: pointer;
        background: url('http://ysfu.net/sprite.png') no-repeat;
      }
        header nav span:first-of-type {
          background-position: -77px -4px;
        }
          header nav span:first-of-type:hover {
            background-position: -106px -4px;
          }
        header nav span:last-of-type {
          background-position: -90px -4px;
        }
          header nav span:last-of-type:hover {
            background-position: -119px -4px;
          }

article {padding: 6px 0 25px 25px}
  article b,
  article span {
    display: block;
    float: left;
    width: 45px; height: 45px;
    margin: 4px;
    text-align: center;
  }
  article b {
    font: 600 16px/45px 'Open Sans';
    color: #91d9ff;
  }
  article span {
    font: 300 19px/45px 'Open Sans';
    color: #4c5373;
    box-shadow: inset 0 0 1px 1px #d9dce5;
    border-radius: 2px;
    cursor: pointer;
  }
  article span.disable {
    color: #b6bacc;
    box-shadow: inset 0 0 1px 1px #f3f4f7;
  }
    article span:not(.disable):hover {
      background: #cdd0dd;
      box-shadow:
        inset 0 0 1px 1px #d9dce5,
        0 1px 3px -1px #cdd0dd;
    }
    article span:not(.disable):active {
      background: #b9becf;
      box-shadow:
        inset 0 1px 2px rgba(0,0,0,.18),
        0 0 0 #cdd0dd;
    }
    article span.active,
    article span.active:hover,
    article span.active:active {
      color: #fff;
      box-shadow:
        inset 0 0 1px 1px #ff8263,
        0 1px 3px -1px #ff8263;
      background: #ff8263;
    }
  article div {
    display: block;
    overflow: hidden;
    clear: both;
  }

Jika kalian malas untuk mengetik, kalian bisa mendownload filenya di bawah ini:

Share with your friends

Give us your opinion