почему addEvent из Fullcalendar не работает - PullRequest
Новая
       12

почему addEvent из Fullcalendar не работает

0 голосов
/ 17 апреля 2020

Привет. Я следую за https://fullcalendar.io/ v4, чтобы построить мой js календарь. Я пытаюсь создать новое событие, нажав на календарь, а затем вызвать функцию addEvent. где и как я могу вызвать функцию addEvent, можете ли вы привести пример, пожалуйста? У меня такой же вопрос по поводу удаления события. вот что я сделал, для каждого клика я ddd событие, просто чтобы посмотреть, работает ли оно. Это не работает. 

var event1 = [
    {
      title: 'MyEvent',
      start: '2020-03-03T13:00:00',
      end:'2020-03-03T14:00:00'
    },
]

var calendar = new FullCalendar.Calendar(calendarEl, {
    eventClick: function (info) {
        calendar.addEvent( event1)
    },
    plugins: ["interaction", "timeGrid"],
    header: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
    },
    defaultDate: currentDate,
    navLinks: true, 
    businessHours: {
      startTime: "08:00",
      endTime: "18:00", 
    },
    editable: true,
    weekends: false,

    allDaySlot: false,
      locale: "en",
    events: 
    [
        {
          title: 'MyEvent',
          start: '2020-03-03T13:00:00',
          end:'2020-03-03T14:00:00'
        },
    ]
  });
  calendar.render();

Я посмотрел на функцию addEvent из main. js, похоже, что id ничего не сделал, кортеж получил nul и функция (addEvent) также возвращает nul! 

Calendar.prototype.addEvent = function (eventInput, sourceInput) {
    if (eventInput instanceof EventApi) {
        var def = eventInput._def;
        var instance = eventInput._instance;
        // not already present? don't want to add an old snapshot
        if (!this.state.eventStore.defs[def.defId]) {
            this.dispatch({
                type: 'ADD_EVENTS',
                eventStore: eventTupleToStore({ def: def, instance: instance }) // TODO: better util for two args?
            });
        }
        return eventInput;
    }
    var sourceId;
    if (sourceInput instanceof EventSourceApi) {
        sourceId = sourceInput.internalEventSource.sourceId;
    }
    else if (sourceInput != null) {
        var sourceApi = this.getEventSourceById(sourceInput); // TODO: use an internal function
        if (!sourceApi) {
            console.warn('Could not find an event source with ID "' + sourceInput + '"'); // TODO: test
            return null;
        }
        else {
            sourceId = sourceApi.internalEventSource.sourceId;
        }
    }
    var tuple = parseEvent(eventInput, sourceId, this);
    if (tuple) {
        this.dispatch({
            type: 'ADD_EVENTS',
            eventStore: eventTupleToStore(tuple)
        });
        return new EventApi(this, tuple.def, tuple.def.recurringDef ? null : tuple.instance);
    }
    return null;
};

У вас есть пример использования функции addEvent

Ответы [ 2 ]

1 голос
/ 18 апреля 2020

Ваша проблема здесь в том, что event1 - это массив, а не объект. Функция addEvent ожидает один объект в качестве ввода, а не список / массив.

Измените его на простой объект: 

var event1 =
{
  title: 'MyEvent',
  start: '2020-03-03T13:00:00',
  end:'2020-03-03T14:00:00'
}

(без [ и ], который оборачивает объект в массив), и ваш исходный код должен работать нормально.

0 голосов
/ 18 апреля 2020

Ну, я взял пример с сайта fullcalendar, и он работает: 

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />


  <title>
    Add an event dynamically - Demos | FullCalendar
  </title>


<link href='/assets/demo-to-codepen.css' rel='stylesheet' />


  <style>

    html, body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
      font-size: 14px;
    }

    #calendar {
      max-width: 900px;
      margin: 40px auto;
    }

  </style>


<link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet' />


  <link href='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.css' rel='stylesheet' />


<script src='/assets/demo-to-codepen.js'></script>

<script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script>




  <script src='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js'></script>



  <script>

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'dayGrid' ],
      defaultView: 'dayGridMonth',
      header: {
        center: 'addEventButton'
      },
      customButtons: {
        addEventButton: {
          text: 'add event...',
          click: function() {
            var dateStr = prompt('Enter a date in YYYY-MM-DD format');
            var date = new Date(dateStr + 'T00:00:00'); // will be in local time

            if (!isNaN(date.valueOf())) { // valid?
              calendar.addEvent({
                title: 'dynamic event',
                start: date,
                allDay: true
              });
              alert('Great. Now, update your database...');
            } else {
              alert('Invalid date.');
            }
          }
        }
      }
    });

    calendar.render();
  });

</script>

</head>
<body>
  <div class='demo-topbar'>
  <button data-codepen class='codepen-button'>Edit in CodePen</button>




    Click the &quot;add event...&quot; button

</div>

  <div id='calendar'></div>
</body>

</html>
...