Calendário / Agenda com PHP & JS - #13 Múltiplas Datas

No vídeo de hoje aprenderemos como selecionar múltiplas datas na lib Full Calendar, salvando esses eventos no banco de dados.

Várias Datas com FullCalendar

lib/js/javascript.js

Vamos começar implementando a opção de selectable dentro do javascript:

(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',
            events: '/controllers/ControllerEvents.php',
            selectable:true,
            select: async (arg)=>{
                let title=prompt('Nome do Evento:');
                if(title){
                    let response=await fetch('http://localhost/controllers/ControllerSelectable.php',{
                        method:'post',
                        headers:{
                            'Content-Type':'application/json',
                            'Accept':'application/json'
                        },
                        body:JSON.stringify({
                            title:title,
                            start:arg.start,
                            end:arg.end
                        })
                    });
                   if(response.status == 200){
                       window.location.href="http://localhost/views/selectable/";
                   }
                }
            }
        });
        calendar.render();
    }

    if(doc.querySelector('.calendarUser')){
        getCalendar('user','.calendarUser');
    }else if(doc.querySelector('.calendarManager')){
        getCalendar('manager','.calendarManager');
    }

    if(doc.querySelector('#delete')){
        let btn=doc.querySelector('#delete');
        btn.addEventListener('click',(event)=>{
            event.preventDefault();
            if(confirm("Deseja mesmo apagar este dado?")){
                win.location.href=event.target.parentNode.href;
            }
        },false);
    }
})(window,document);

controllers/ControllerSelectable.php

Esse controlador pegará os dados selecionados pelo usuário e gravará os dados no banco MySQL.

<?php
include ("../config/config.php");
$objEvents=new \Classes\ClassEvents();
$json=json_decode(file_get_contents('php://input'));
$start=new \DateTime($json->start);
$end=new \DateTime($json->end);
$objEvents->createEvent(
    0,
    $json->title,
    '',
    'red',
    $start->format("Y-m-d H:i:s"),
    $end->modify("-1 day")->format("Y-m-d H:i:s")
);

Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com