Fullcalendar Javascript events with PHP

Question

How do I save drag between days or drag hours?

How to make so that when clicking on a day it opens a registration page with the day I clicked selected so that I can enter a description and the start and end time?

My events are all in one javascript down below:

function hoje() {
   now = new Date();
   var dia = now.getDate();
   var mes = now.getMonth();
   var ano = now.getFullYear();
   var res = ano + "-" + mes + "-" + dia;
}

$(document).ready(function() {
// Define calendario em Pt-br
var currentLangCode = 'pt-br';

// Inicia o calendario

function renderCalendar() {
    var calendar = $('#calendar').fullCalendar({
        header : {
            left : 'prev,next today',
            center : 'title',
            right : 'month,agendaWeek,agendaDay'
        },
        defaultDate : hoje(),
        businessHours : true, //Descata dias uteis da semana
        lang : currentLangCode,
        buttonIcons : true, // show the prev/next text
        weekNumbers : false,
        //weekends: false, //Oculta os finais de semana
        editable : true,
        eventLimit : true, // allow "more" link when too many events
        selectable : true,
        selectHelper : true,
        events : "http://localhost/calendario/events.php",

        // Convert the allDay from string to boolean
        eventRender : function(event, element, view) {
            if (event.allDay === 'true') {
                event.allDay = true;
            } else {
                event.allDay = false;
            }
        },

        select : function(start, end, allDay) {//Ao clicar na celula do calendario
            var title = prompt('Evento');
            var descricao = prompt('Descrição');
            if (title) {
                var start = $.fullCalendar.moment(start).format();
                var end = $.fullCalendar.moment(end).format();
                $.ajax({
                    url : 'http://localhost/calendario/add_events.php',
                    data : '&title=' + title + '&start=' + start + '&end=' + end + '&obs_acao=' + descricao,
                    type : "POST",
                    sucess : function(json) {
                        alert('OK');
                    }
                });
                calendar.fullCalendar('renderEvent', {
                    title : title,
                    start : start,
                    end : end,
                    allDay : allDay
                }, true);
            }
            calendar.fullCalendar('unselect');
        },

        droppable : true, // Habilitar para drop de caixa
        drop : function() {//DROP
            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }
        },

        eventDrop : function(event, delta, revertFunc) {// Salva o arraste de evento para outro dia
            var start = $.fullCalendar.moment(event.start).format();
            var end = $.fullCalendar.moment(event.end).format();

            $.ajax({
                url : 'http://localhost/calendario/update_events.php',
                data : 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                type : "POST",
                success : function(json) {
                    console.log(json);
                    alert("Atualizado com Sucesso!");
                }
            });
        },

        eventResize : function(event, delta, revertFunc) {// Salva o arraste de evento na semana, idem do eventDrop
            var start = $.fullCalendar.moment(event.start).format();
            var end = $.fullCalendar.moment(event.end).format();

            $.ajax({
                url : 'http://localhost/calendario/update_events.php',
                data : 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                type : "POST",
                success : function(json) {
                    console.log(json);
                    alert("Atualizado com Sucesso!");
                }
            });
        },

        eventClick : function(event) {// Remove o evento
            decisao = confirm("Deseja remover o evento?");
            if (decisao) {
                $.ajax({
                    type : "POST",
                    url : "http://localhost/calendario/delete_events.php",
                    data : "&id=" + event.id
                });
                $('#calendar').fullCalendar('removeEvents', event.id);
            } else {
            }
        },
    });
}

renderCalendar();
});

My update_events.php code is this:

<?php
include_once 'conectar.php';
$id = $_POST['id'];
$title = $_POST['title'];
$status = $_POST['status'];
$start = $_POST['start'];
$end = $_POST['end'];
$ticket = $_POST['ticket'];
$qtd_afetados = $_POST['qtd_afetados'];
$obs_acao = $_POST['obs_acao'];
$obs_rollback = $_POST['obs_rollback'];
$conclusao = $_POST['conclusao'];
$tipo_acao = $_POST['tipo_acao'];
$responsavel = $_POST['responsavel'];
$cadastrado_por = $_POST['cadastrado_por'];
$cidade = $_POST['cidade'];
$sql = "UPDATE eventos SET title ='$title',status ='$status',start ='$start',end ='$end',ticket ='$ticket',qtd_afetados ='
$qtd_afetados',obs_acao='$obs_acao',obs_rollback ='$obs_rollback',conclusao ='$conclusao',tipo_acao ='$tipo_acao',responsavel='
$responsavel',cadastrado_por ='$cadastrado_por',cidade ='$cidade' WHERE id='$id'";

echo $sql;
$q = $bdd->prepare($sql);
$q->execute(array($title,$start,$end,$id));
?>

My delete is working, but I wanted to change its action so when I click it opens an edit screen with change or delete buttons, but for this I need to know how to pass the parameter to the screen that will be called.

If anyone has any tutorial thank you or can help me thank you.

Answer 1

My dear

After much struggle I discovered the following way

select: function (start, end, allDay) {
    start = $.fullCalendar.formatRange(start, start, 'YYYY-MM-DD');
    document.location.href = 'form_cadastro.php?novo=' + start ;
},