Calendário / Agenda com PHP & JS - #08 Estruturando Sistema de Consultas
18/11/2021Na aula de hoje começamos a estruturar o nosso projetinho utilizando boas maneiras do desenvolvimento para construção de eventos no calendário.
Estruturação do Projeto
Vamos começar organizando melhor o nosso código.
lib/html/header.php
Esse arquivo receberá o css padrão e as meta-tags superiores do html:
<!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>lib/html/footer.php
O arquivo footer por sua vez receberá os códigos javascript e as tags de encerramento do html:
<script src="<?php echo DIRPAGE.'lib/js/FullCalendar/main.min.js'; ?>"></script>
<script src="<?php echo DIRPAGE.'lib/js/javascript.js'; ?>"></script>
</body>
</html>Os arquivos acima foram criados para evitar a repetição de código desnecessário.
index.html
Agora basta chamar os arquivos acima no nosso index:
<?php include("config/config.php"); ?>
<?php include(DIRREQ."lib/html/header.php"); ?>
<a href="<?php echo DIRPAGE.'views/user'; ?>">Calendário do Usuário</a><br><br>
<a href="<?php echo DIRPAGE.'views/manager'; ?>">Calendário do Gerente</a>
<?php include(DIRREQ."lib/html/footer.php"); ?>Como o calendário terá funções diferentes para usuários e gerentes, vamos criar dentro de views a pasta user e a pasta manager.
views/user/manager/index.php
Calendário a ser exibido para o gerente do sistema, com opções de inserção e edição de eventos.
<?php include("../../config/config.php"); ?>
<?php include(DIRREQ."lib/html/header.php"); ?>
<div class="calendarManager"></div>
<?php include(DIRREQ."lib/html/footer.php"); ?>views/user/user/index.php
Calendário a ser exibido para o usuário final, apenas com opções de visualização.
<?php include("../../config/config.php"); ?>
<?php include(DIRREQ."lib/html/header.php"); ?>
<div class="calendarUser"></div>
<?php include(DIRREQ."lib/html/footer.php"); ?>lib/js/javascript.js
No javascript vamos adaptar as funções para gerentes e usuários:
(function(win,doc){
'use strict';
//Exibir o calendário
function getCalendar(perfil, div)
{
let calendarEl=doc.querySelector(div);
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar:{
start: 'prev,next,today',
center: 'title',
end: 'dayGridMonth, timeGridWeek, timeGridDay'
},
buttonText:{
today: 'hoje',
month: 'mês',
week: 'semana',
day: 'dia'
},
locale:'pt-br',
dateClick: function(info) {
if(perfil == 'manager'){
alert('vai pra pagina do manager');
}else{
alert('vai pra página do user');
}
/*alert('Clicked on: ' + info.dateStr);
alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
alert('Current view: ' + info.view.type);*/
},
events: '/controllers/ControllerEvents.php',
eventClick: function(info) {
if(perfil == 'manager'){
win.location.href=`/view/manager/editar?id=${info.event.id}`;
}
}
});
calendar.render();
}
if(doc.querySelector('.calendarUser')){
getCalendar('user','.calendarUser');
}else if(doc.querySelector('.calendarManager')){
getCalendar('manager','.calendarManager');
}
})(window,document);lib/css/style.css
Altere também as classes no css:
.calendarUser, .calendarManager{
width: 80%;
margin: 30px auto;
height: 80vh;
}Sucesso nos códigos e na vida!
Precisa de aulas particulares? webdesignemfoco@gmail.com
Posts Relacionados
