CODEWITHSUNDEEP
javascriptfullcalendarfullcalendar-5
Cameron W
Cameron W

Reputation: 23

FullCalander 5 add event

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>

Upvotes: 0

Views: 10110

Answers (2)

Cameron W
Cameron W

Reputation: 23

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>

Upvotes: 1

dwmorrin
dwmorrin

Reputation: 2734

There are two issues:

  1. calendarEl is a DOM element. It won't have a .addEvent property (at least not the FullCalendar one.)

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

Upvotes: 4

Related Questions