javascript - FullCalendar v4 - fullCalendar 不是函数-6ren

javascript - FullCalendar v4 - fullCalendar 不是函数

转载作者：行者123 更新时间：2023-12-01 08:31:57

26

4

我正在使用 FullCalendar 4.3.1 。日历显示正确，但是我无法动态添加事件。我收到此错误:使用 JQuery 时:

TypeError: $(...).fullCalendar is not a function

我在没有 JQuery 的情况下尝试了它，但仍然无法工作:

TypeError: document.getElementById(...).fullCalendar is not a function

我有这个页面:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <link href = 'libs/fullcalendar/core/main.css' rel = 'stylesheet' />
        <link href = 'libs/fullcalendar/daygrid/main.css' rel = 'stylesheet' />
        <link href = 'libs/fullcalendar/timegrid/main.css' rel = 'stylesheet' />
        <link href = 'libs/fullcalendar/list/main.css' rel = 'stylesheet' />

        <script src='libs/fullcalendar/core/main.js'></script>
        <script src='libs/fullcalendar/core/locales/sk.js'></script>
        <script src='libs/fullcalendar/interaction/main.js'></script>
        <script src='libs/fullcalendar/daygrid/main.js'></script>
        <script src='libs/fullcalendar/timegrid/main.js'></script>
        <script src='libs/fullcalendar/list/main.js'></script>
        <script src='libs/fullcalendar/moment/main.js'></script>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        
        <script>
            

    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['moment', 'interaction', 'dayGrid', 'timeGrid', 'list'],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            locale: 'sk'
        });

        calendar.render();
    });


    function addEventToCalendar()
    {
        $('#calendar').fullCalendar('renderEvent', {
            title: 'dynamic event',
            start: new Date(),
            allDay: true
        });
        
        //not working too
        /*
        document.getElementById('calendar').fullCalendar('renderEvent', {
            title: 'dynamic event',
            start: new Date(),
            allDay: true
        });
         */
    }

</script>


    </head>
    <body>

        <div style="margin-top: 10px">
            <a onclick="addEventToCalendar()">
                <i class="fas fa-calendar-alt calendarButtonText"></i> Add event
            </a>
        </div>
        <div id='calendar' ></div>
    </body>
</html>

问题出在哪里？

最佳答案

我认为您没有正确访问日历对象。

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />


  <title>
    Add an event dynamically - Demos | FullCalendar
  </title>


<link href='/assets/demo-to-codepen.css' rel='stylesheet' />


  <style>

    html, body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
      font-size: 14px;
    }

    #calendar {
      max-width: 900px;
      margin: 40px auto;
    }

  </style>


<link href='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.css' rel='stylesheet' />


  <link href='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.css' rel='stylesheet' />


<script src='/assets/demo-to-codepen.js'></script>

<script src='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.js'></script>




  <script src='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.js'></script>



  <script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'dayGrid' ],
      defaultView: 'dayGridMonth',
      header: {
        center: 'addEventButton'
      },
      customButtons: {
        addEventButton: {
          text: 'add event...',
          click: function() {
            var dateStr = prompt('Enter a date in YYYY-MM-DD format');
            var date = new Date(dateStr + 'T00:00:00'); // will be in local time

            if (!isNaN(date.valueOf())) { // valid?
              calendar.addEvent({
                title: 'dynamic event',
                start: date,
                allDay: true
              });
              alert('Great. Now, update your database...');
            } else {
              alert('Invalid date.');
            }
          }
        }
      }
    });

    calendar.render();
  });

</script>

</head>
<body>
  <div class='demo-topbar'>

  
  
</div>

  <div id='calendar'></div>
</body>

</html>

查看此演示页面上的源代码: https://fullcalendar.io/docs/Calendar-addEvent-demo

关于javascript - FullCalendar v4 - fullCalendar 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60235087/

26

4

0

文章推荐： javascript - data- 属性无法从 foreach 获取动态 id

文章推荐： c++ - std::less 是否应该允许在编译时比较不相关的指针？

文章推荐： python - 确定值是否为字符串的最有效方法

详解C语言sscanf()函数、vsscanf()函数、vscanf()函数
C语言sscanf()函数：从字符串中读取指定格式的数据头文件： ?
php - 如何解释at()函数； substr()函数;伪代码中的exist()函数
最近，我有一个关于工作预评估的问题，即使查询了每个功能的工作原理，我也不知道如何解决。这是一个伪代码。下面是一个名为foo()的函数，该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数，
VBS教程：函数-CStr 函数
CStr 函数返回表达式，该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CSng 函数
CSng 函数返回表达式，该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-CreateObject 函数
CreateObject 函数创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
VBS教程：函数-Cos 函数
Cos 函数返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
VBS教程：函数-CLng 函数
CLng 函数返回表达式，此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。说明通常，您可以使
VBS教程：函数-CInt 函数
CInt 函数返回表达式，此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-Chr 函数
Chr 函数返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。说明从 0 到 31 的数字表示标准的不可打印的
VBS教程：函数-CDbl 函数
CDbl 函数返回表达式，此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。说明通常，您可
VBS教程：函数-CDate 函数
CDate 函数返回表达式，此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。说明 IsDate 函数用于判断 d
VBS教程：函数-CCur 函数
CCur 函数返回表达式，此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。说明通常，
VBS教程：函数-CByte 函数
CByte 函数返回表达式，此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CBool 函数
CBool 函数返回表达式，此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。说明如果 ex
VBS教程：函数-Atn 函数
Atn 函数返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
VBS教程：函数-Asc 函数
Asc 函数返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符，则将发生运行时错误。
VBS教程：函数-Array 函数
Array 函数返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表（用逗号分隔）。如果没有指定此参数，则
VBS教程：函数-Abs 函数
Abs 函数返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null，则返回 Null；如果是未初始化变量，则返回 0。
VBS教程：函数-FormatPercent 函数
FormatPercent 函数返回表达式，此表达式已被格式化为尾随有 % 符号的百分比（乘以 100 ）。 FormatPercent(expression[,NumDigitsAfterD
VBS教程：函数-FormatNumber 函数
FormatNumber 函数返回表达式，此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc

首页

博学

6Ren·AI

商城

javascript - FullCalendar v4 - fullCalendar 不是函数