Calendário / Agenda com PHP & JS - #03 Lib FullCalendar

31/10/2021

Nesse tutorial falaremos sobre a lib que será a base do nosso calendário, a lib Full Calendar do Javascript.

Trabalhando com Full Calendar

Primeiramente precisamos baixar a lib no site do Full Calendar. Após baixar a lib cole a pasta dela dentro do diretório lib do nosso projeto.

index.php

No nosso arquivo index.php precisamos instalar o js e o css da lib. Ficará assim:

<?php include("config/config.php"); ?>
    <!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Calendário Agenda com PHP</title>
    <link rel="stylesheet" href="<?php echo DIRPAGE.'lib/css/style.css'; ?>">
    <link rel="stylesheet" href="<?php echo DIRPAGE.'lib/js/FullCalendar/main.min.css'; ?>">
</head>
<body>
    <div class="calendar"></div>

    <script src="<?php echo DIRPAGE.'lib/js/FullCalendar/main.min.js'; ?>"></script>
    <script src="<?php echo DIRPAGE.'lib/js/javascript.js'; ?>"></script>
</body>
</html>

Crie também um arquivo style.css dentro do diretório lib/css e um arquivo javascript.js dentro de lib/js.

lib/css/style.css

Essa será nossa folha de estilo com nossos designs particulares:

*{margin:0; padding: 0; box-sizing: border-box; font-family: Arial,sans-serif;}

.calendar{
    width: 80%;
    margin: 30px auto;
    height: 80vh;
}

lib/js/javascript.js

Vamos preparar o nosso javascript para os scripts que acionarão o calendário:

(function(win,doc){
    'use strict';

    let calendarEl = doc.querySelector('.calendar');
    let calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth'
    });
    calendar.render();
})(window,document);

Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Calendário / Agenda com PHP & JS - #02 Configurações

Nesse tutorial vamos criar o arquivo de configuração da nossa aplicação, definindo todas as constantes do nosso sistema.

Calendário / Agenda com PHP & JS - #04 Customizações, Eventos e Tradução

Na aula de hoje aprenderemos sobre customizações, tradução e eventos dentro da lib do Javascript Full Calendar, entendendo como configurar as ações do usuário.

PHP

PHP é uma das principais linguagens de programação utilizada nas plataformas web. Isso porque além de ser uma linguagem leve, o PHP é robusto.