0

我正在构建一个 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>
4

2 回答 2

1

有两个问题：

  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'
      });
  });
于 2020-08-09T11:15:13.900 回答
0

看起来您需要在加载 jquery 脚本后发布此内容。这已经加载了事件。我们只是添加一个事件。

身体

<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>
于 2020-08-09T12:43:48.693 回答