FullCalendar 5 添加事件

Question

我正在构建 CRM 并尝试在日历外创建一个按钮 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>

Answer 1

有两个问题：

calendarEl 是一个 DOM 元素。它不会有 .addEvent 属性（至少不是 FullCalendar。）
addEvent is a single Event object 的参数，不是具有键 events 和事件数组作为值的对象。

addEvent demo可能对您有所帮助。

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

  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'
      });
  });

Answer 2

看起来您需要在加载 jquery 脚本后 post 执行此操作。这已经加载了事件。我们只是添加一个事件。

正文

<body>
<button id="testbtn">Add lunch time</button>
  <div id='calendar-container'>
    <div id='calendar'></div>
  </div>
<script src="/js/jquery/jquery.min.js"></script>
</body>

然后调用全日历插件

<script>
  var calendarEl = $("#calendar").get(0);
  var calendar = new FullCalendar.Calendar(calendarEl, {
    /*options...*/
    events:
            [
              {
                id: 1,
                title: 'First Event',
                start: '2020-08-08T10:30:00',
                end: '2020-08-08T11:30:00',
                extendedProps: {
                  description: 'Test 1'
                },
                color: '#336e03'
              },

              {
                id: 2,
                title: 'Second Event',
                start: '2020-08-08T15:30:00',
                end: '2020-08-08T16:30:00',
                extendedProps: {
                  description: 'Test 2'
                },
              }
            ]

  });

  calendar.render();
/*this is the action when the button is pressed*/
  $("#testbtn").on("click", function(){
    calendar.addEvent({
      title: 'Third Event',
      start: '2020-08-08T12:30:00',
      end: '2020-08-08T13:30:00'
    });
  });
</script>

FullCalendar 5 添加事件

FullCalander 5 add event

javascript

fullcalendar

fullcalendar-5