0

Calendário Glassmorphism com css e javascript

Achilles Vasconcelos
Achilles Vasconcelos

Calendário Glassmorphism com css e javascript.

Primeiro vamos criar um arquivo index.html, estou usando o vscode pode ser um editor ao seu gosto.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Com o atalho no vscode da tecla "!", já cria o código acima.

  1. Vamos mudar o lang= para o do nosso pais.
  2. Vamos adicionar no head  <link rel="stylesheet" href="style.css" />.
  3. Vamos criar uma div com o nome da class box dentro no body <div class="box"></div>:
  4. Dentro da div box vamos cria uma div com nome da class container e dentro dela outra div com o nome do Id dycalendar <div class="box">
         <div class="container">
           <div id="dycalendar"></div>
       </div>
       </div>


Agora vamos criar um arquivo com nome style.css dentro dele adicione o seguinte codigo


/*! importa essa fonte do google*/
@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: url("baixados.png"); /*! aqui é uma imagem da sua preferencia ou uma cor */
  background-color: black;
  overflow: hidden;
}
.box {
  position: relative;
  z-index: 1000;
}
.container {
  position: relative;
  width: 400px;
  min-height: 400px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(25px);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}



Vamos baixar dois arquivos do github dycalendar.css nesse link é só botão direito do mouse salvar como na pasta dos arquivos do calendário.

e esse dycalendar.js nesse link

Esses arquivos foi do repositório do github link


Vamos voltar para o arquivo index.html e adicionar o seguinte código no final do body.

<script src="dycalendar.js"></script>
    <script>
      dycalendar.draw({
        target: "#dycalendar",
        type: "month",
        dayformat: "full",
        monthformat: "full",
        highlighttargetdate: true,
        prevnextbutton: "show",
      });
    </script>


No final seu arquivo index.html vai ficar assim.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="dycalendar.css" />
    <title>Calendário Glassmorphism</title>
  </head>
  <body>
    <section>
      <div class="box">
        <div class="container">
          <div id="dycalendar"></div>
        </div>
      </div>
    </section>
    <script src="dycalendar.js"></script>
    <script>
      dycalendar.draw({
        target: "#dycalendar",
        type: "month",
        dayformat: "full",
        monthformat: "full",
        highlighttargetdate: true,
        prevnextbutton: "show",
      });
    </script>
  </body>
</html>


Com a imagem de sua premência de fundo no código do

background-image: url("sua imagem aqui"); do arquivo style.css


Se quiser deixar em português nomes é só ir no arquivo dycalendar.js e modificar os nomes dos meses.



Se tiver alguma duvida no código ele se encontra no meu repositório do github link



0
0

Comentários (2)

0
Achilles Vasconcelos

Achilles Vasconcelos

25/04/2021 14:02

@Eros M.Lima cara sou seu fã, fiz algo bem rápido para que fique didático pois no mundo da programação ao meu ver é a entrega que conta no final é isso que importa e no processo vamos aprendo aos poucos pois é um mundo infinito e muito prazeroso, se a galera gostar vou explicar cada passo.

0

Glass é top ainda bem que não conta o truque rs!!!

None

Brasil