'Fullcalendar - Uncaught TypeError: Cannot read property 'hasTime' of undefined

Fullcalendar v2.6.0 + php + sqlite PDO

Problem:

fullcalendar.js:10416 Uncaught TypeError: Cannot read property 'hasTime' of undefined
at normalizeEventTimes (fullcalendar.js:10416)
at normalizeEventDates (fullcalendar.js:10385)
at assignDatesToEvent (fullcalendar.js:10376)
at buildEventFromInput (fullcalendar.js:10363)
at Calendar_constructor.renderEvent (fullcalendar.js:10205)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
at n.fn.init.$.fn.fullCalendar (fullcalendar.js:32)
at Object.success (Calendar.php:269)

Get json:

{"id":"1","title":"test","start":"2022-03-29","end":"2022-03-29"}

ajax.php

<?php
$bdd = new PDO('sqlite:Calendar.db');
$bdd->exec("CREATE TABLE if not exists events (id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT, start TEXT, end TEXT)");
if(isset( $_POST['title'], $_POST['start'], $_POST['end']))
{   
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];

$sql = "INSERT INTO events (title, start, end) VALUES (:title, :start, :end)";

$q = $bdd->prepare($sql);

$q->execute(array(':title'=>$title, ':start'=>$start, ':end'=>$end));

 $requete = "SELECT * FROM events";

 $res = $bdd->query($requete) or die(print_r($bdd->errorInfo()));

 echo json_encode($res->fetch(PDO::FETCH_ASSOC));
}
?>

I am junior. I do not understand what the problem is. Wrong date format?

code:


   events: "ajax.php",  

    dayClick: function(date,jsEvent,view){

    var clickDate = date.format('YYYY-MM-DD');
    console.log(clickDate);
    form.dialog({
    modal: true,
    width: '30%',
    title: "event",
    buttons: [{
    id: 'add',
    text: 'add',
    click: function() {
        
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: {

               title: event_title.val(),
               start: event_start.val(),
               end: event_end.val()
            },
            success: function(){
                Calendar.fullCalendar('renderEvent', {
                    title: event_title.val(),
                    start: event_start.val(),
                    end: event_end.val(),
                    allDay: false
                });
            }
        });
        emptyForm();
    }
},
    ...
...
    }]
    });
    event_start.val(clickDate);
    event_end.val(clickDate);
    $('.datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
    formOpen('add');
},
...
...

Help make it work(



Solution 1:[1]

You seem to be treating event_title, event_start and event_end as if they are HTML <input> elements, referenced by the jQuery .val() syntax, is that correct?

if so, jQuery (or MomentJS which handles the dates) is saying they are undefined.

so you need

<input id="event_title" value="">
<input id="event_start" value="">
<input id="event_end" value="">

on your page somewhere, and then to reference them event_title.val(), event_start.val(), event_end.val() need instead to be

$("#event_title").val()
$("#event_start").val()
$("#event_end").val()

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mike Irving