全日历显示无法读取属性hastime

时间:2019-06-22 15:11:00

标签: javascript node.js fullcalendar fullcalendar-3

我正在尝试在node.js中使用fullcalendar,其中开始和结束时间的参数是从带有JSON.parse的字符串中提取的

我已经尝试过将对象数组(代表事件的开始和结束时间)手动输入到events函数中,并且效果很好。

这是我当前的代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Title</title>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-74664112-6"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());
        gtag('config', 'UA-74664112-6');
    </script>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- FullCalendar -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>

</head>

<body>

<h4 style="text-align:center;margin-top:0px; margin-bottom: 0px;">Heading</h4>

<div id="calendar">

</div>
<div id="availabilities">
    [{"ifvID":1,"title":"testtitle","start_event":"2019-06-22T20:00:00","end_event":"2019-06-22T22:00:00"}]
</div>

<script>
   
    $(document).ready(function() {
        console.log(document.getElementById("availabilities").innerHTML);
        console.log(JSON.parse(document.getElementById("availabilities").innerHTML));
        console.log(JSON.parse(document.getElementById("availabilities").innerHTML)[0]);
     var calendar = $('#calendar').fullCalendar({
      editable:true,
      header:{
       left:'prev,next today',
       center:'title',
       right:'month,agendaWeek,agendaDay'
      },
      events: JSON.parse(document.getElementById("availabilities").innerHTML),
      selectable:true,
      selectHelper:true,
      select: function(start, end, allDay)
      {
       var title = prompt("Enter Event Title");
       if(title)
       {
        var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
        var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
        $.ajax({
         url:"insert.php",
         type:"POST",
         data:{title:title, start:start, end:end},
         success:function()
         {
          calendar.fullCalendar('refetchEvents');
          alert("Added Successfully");
         }
        })
       }
      },
      editable:true,
      eventResize:function(event)
      {
       var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
       var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
       var title = event.title;
       var id = event.id;
       $.ajax({
        url:"update.php",
        type:"POST",
        data:{title:title, start:start, end:end, id:id},
        success:function(){
         calendar.fullCalendar('refetchEvents');
         alert('Event Update');
        }
       })
      },
  
      eventDrop:function(event)
      {
       var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
       var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
       var title = event.title;
       var id = event.id;
       $.ajax({
        url:"update.php",
        type:"POST",
        data:{title:title, start:start, end:end, id:id},
        success:function()
        {
         calendar.fullCalendar('refetchEvents');
         alert("Event Updated");
        }
       });
      },
  
      eventClick:function(event)
      {
       if(confirm("Are you sure you want to remove it?"))
       {
        var id = event.id;
        $.ajax({
         url:"delete.php",
         type:"POST",
         data:{id:id},
         success:function()
         {
          calendar.fullCalendar('refetchEvents');
          alert("Event Removed");
         }
        })
       }
      },
  
     });
    });
     
</script>

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
    <!-- JQUERY -->
    <!-- <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> -->
</body>

</html>

如果运行正确,则事件应显示在日历上,而没有任何错误-但是,当我运行代码时,错误消息显示“无法读取未定义的Type的属性'hasTime':无法读取未定义的属性'hasTime'”发生。这是确切的错误:

jQuery.Deferred exception: Cannot read property 'hasTime' of undefined TypeError: Cannot read property 'hasTime' of undefined
    at P (https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:18300)
    at O (https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:18107)
    at V (https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:18082)
    at z (https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:17993)
    at https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:15518
    at Function.map (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:3309)
    at p (https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:15486)
    at Array.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:20605)
    at Function.each (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:2715)
    at constructor.Ut (https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:20507) undefined
r.Deferred.exceptionHook @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: Cannot read property 'hasTime' of undefined
    at P (fullcalendar.min.js:6)
    at O (fullcalendar.min.js:6)
    at V (fullcalendar.min.js:6)
    at z (fullcalendar.min.js:6)
    at fullcalendar.min.js:6
    at Function.map (jquery.min.js:2)
    at p (fullcalendar.min.js:6)
    at Array.<anonymous> (fullcalendar.min.js:6)
    at Function.each (jquery.min.js:2)
    at constructor.Ut (fullcalendar.min.js:6)

1 个答案:

答案 0 :(得分:0)

大多数情况下,此 hastime 错误会在您的事件属性的开始或结束日期没有值或其中包含空值时显示