时间戳

首页 > 解决方案 > FullCalander 5 添加事件

javascript - FullCalander 5 添加事件

问题描述

我正在构建一个 CRM 并尝试在日历 div 之外创建一个按钮，如果我按下该按钮，它应该会在该 div 上创建一个事件并且它不起作用。有人可以指出我做错了什么吗？

这是我尝试过的：


  $(document).on("click", "#testbtn", function(){
    var calendarEl = $("#calendar");
    calendarEl.addEvent({events: [
      {
        title: 'Second Event',
        start: '2020-08-08T12:30:00',
        end: '2020-08-08T13:30:00'
      }
    ]});
  });

这是我的整个脚本：

<html>
<body>
<script src='../lib/main.js'></script>
<script>

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
    <!-- all the options here -->
    calendar.render();
  });

</script>
</head>
<body>
<button id="testbtn">Add lunch time</button>
  <div id='calendar-container'>
    <div id='calendar'></div>
  </div>
<script src="/assets/plugins/jquery/jquery.min.js"></script>
<script>
  var options = {  /*Add options here*/};
  var calendarEl = $("#calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, options);

  $(document).on("click", "#testbtn", function(){
    calendar.addEvent({
      title: 'Lunch',
      start: '2020-08-08T12:30:00',
      end: '2020-08-08T13:30:00'
    });
    calendar.render();
  });
</script>

标签： javascriptfullcalendarfullcalendar-5

解决方案

有两个问题：

  1. calendarEl是一个 DOM 元素。它没有.addEvent属性（至少没有 FullCalendar 属性。）

  2. for 的参数addEvent是单个Event 对象，而不是具有键events和事件数组作为值的对象。

该addEvent演示可能对您有所帮助。

您需要将使用关键字FullCalendar.Calendar创建的实例传递给事件处理函数。new

  var calendarEl = $("#calendar").get(0);
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth'
  }); 
  calendar.render();
  $("#testbtn").on("click", function(){
    calendar.addEvent({
        title: 'Second Event',
        start: '2020-08-08T12:30:00',
        end: '2020-08-08T13:30:00'
      });
  });

推荐阅读