Блог

Главная - Вопросы по программированию - отображение событий из fullcalendar в список HTML

отображение событий из fullcalendar в список HTML

#javascript

Вопрос:

У меня есть fullcalendar.io виджет, который работает нормально, но у меня возникли некоторые проблемы с отображением всех событий в html-списке.

Прежде всего, у меня есть:

 const EventsOfTheDay = app.store.find('events', {
      allDay: true,
      sort: 'event_start'
    })
      .then(results => {
        this.events = results;
        console.log(results);
      });

это приводит к:

результат журнала консоли

У меня есть проблема, чтобы получить только имя, дату и описание всех событий и отобразить все в списке html, может ли кто-нибудь помочь мне в этом?

Комментарии:

1. Вам нужно просмотреть их с каждым из них и создать свой html-код.

Ответ №1:

Если у вас есть такой список, как этот:

 <ul id="list">    
</ul>

Повторите каждое событие, создайте элемент списка (узел) и добавьте его в список выше.

 const EventsOfTheDay = app.store.find('events', {
    allDay: true,
    sort: 'event_start'
  })
  .then(results => {
    results.forEach((entry) => {
      var ul = document.getElementById('list');
      var node = document.createElement('li');
      var nodeText = document.createTextNode(entry.name   ','   entry.date   ','   entry.description);
      ul.appendChild(node);
    });
  });

Комментарии:

1. меня не поймают (в обещании) Ошибка типа: Не удается прочитать свойство ‘forEach’ неопределенного

2. Проверьте мою правку, она должна быть results.forEach вместо this.events.forEach .

3. никаких ошибок, но я понимаю это i.ibb.co/tctWtR3/aassff.png по-видимому, 3 значения, но пустые

4. Добавьте console.log(entry) » до var ul = document.getElementById('list'); » и поделитесь результатом. Но вы можете попробовать results[entry].name ',' results[entry].date ',' results[entry].description

5. спасибо, я нашел решение, добавил класс, а затем я могу получить доступ к атрибутам с: {this.events.map((событие) => ( ><li>{event.name()} — {событие.описание()}<li></li>, кстати, ваша помощь бесценна

Метки: