javascript - FullCalander 5 add event - Stack Overflow|江阴雨辰互联

I'm building a CRM and trying to make a button outside the calendar div and if I press the button, it should be creating an event on the and it's not working. Could someone please point me out what I'm doing wrong?

This is what I tried:


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

This is my whole script:

<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>

This is what I tried:


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

This is my whole script:

<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>

Share Improve this question edited Aug 9, 2020 at 11:59 asked Aug 9, 2020 at 10:25 Cameron W 231 gold badge1 silver badge6 bronze badges

You shouldn't do new FullCalendar.Calendar twice. All the code can live in one <script> tag (and in actual use, should be in a .js file) – dwmorrin Commented Aug 9, 2020 at 12:09

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

There are two issues:

calendarEl is a DOM element. It won't have a .addEvent property (at least not the FullCalendar one.)
The argument for addEvent is a single Event object, not an object with a key events and an array of events as a value.

The addEvent demo may be helpful for you.

You need to pass the FullCalendar.Calendar instance, which you create with the new keyword, to the event handling function.

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

Looks like you need to post this after where you load the jquery script. This has already got events loaded. We are just adding an event.

Body

<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>

Then call the full calendar plugin

<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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742421710a4440814.html

javascript - FullCalander 5 add event - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - FullCalander 5 add event - Stack Overflow

2 Answers 2

相关推荐