Calendário / Agenda com PHP & JS - #09 Formulário de Eventos

Nesse tutorial começaremos a construir o formulário de inserções de eventos na lib Full Calendar, utilizando como backend o PHP e o banco MySQL.

Formulário de Eventos com PHP e JS

Bora construir o formulário de cadastro de eventos de acordo com a permissão do cliente (usuário ou gerente).

lib/js/javascript.js

No javascript vamos colocar primeiramente a função que o usuário ao clicar abrirár as opçoes de horá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{
                    if(info.view.type == 'dayGridMonth'){
                        calendar.changeView('timeGrid', info.dateStr);
                    }else{
                        win.location.href='/views/user/add.php?date='+info.dateStr;
                    }
                }
                /*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);

views/user/add.php

Essa será a página que receberá o html do formulário de inserção do evento no banco de dados:

<?php include("../../config/config.php"); ?>
<?php include(DIRREQ."lib/html/header.php"); ?>
<?php $date=new \DateTime($_GET['date'],new \DateTimeZone('America/Sao_Paulo')); ?>

<form name="formAdd" id="formAdd" method="post" action="<?php echo DIRPAGE.'controllers/ControllerAdd.php'; ?>">
    Data: <input type="date" name="date" id="date" value="<?php echo $date->format("Y-m-d"); ?>"><br>
    Hora: <input type="time" name="time" id="time" value="<?php echo $date->format("H:i"); ?>"><br>
    Paciente: <input type="text" name="title" id="title"><br>
    Queixa: <input type="text" name="description" id="description"><br>
    Quanto tempo deseja de atendimento:
    <select name="horasAtendimento" id="horasAtendimento">
        <option value="">Selecione</option>
        <option value="1">1h</option>
        <option value="2">2h</option>
        <option value="3">3h</option>
    </select><br>
    <input type="submit" value="Marcar Consulta">
</form>

<?php include(DIRREQ."lib/html/footer.php"); ?>

controllers/ControllerAdd.php

Esse será o controlador que receberá os dados do formulário html:

<?php
include ("../config/config.php");
$objEvents=new \Classes\ClassEvents();
var_dump($_POST);

Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com