События не отображаются в полном календаре - PullRequest
Новая
       92

События не отображаются в полном календаре

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

Я пытался отобразить некоторые события с полным календарем, но это не работает. Я гуглил и пробовал разные значения, но это никогда не работало. Например, я пробовал это: 

                                events: [
                                {
                                    title  : 'event1',
                                    start  : '2020-04-01'
                                },
                                {
                                    title  : 'event2',
                                    start  : '2020-04-05',
                                    end    : '2020-04-07'
                                },
                                {
                                    title  : 'event3',
                                    start  : '2020-04-03T12:30:00',
                                    allDay : false // will make the time show
                                }
                            ],

, а также это: 

                                events: [
                                {"id":"1","start":"2020-04-14T13:00:00","end":"2020-04-14T1‌​6:00:00","title":"Pe‌​r Hour: 11.00,Per Mile: 11.00"},
                                {"id":"2","start":"2020-04-15T13:00:00","end":"2020-04-15T16‌​:00:00","title":"Per Hour: 11.00,Per Mile: 11.00"},
                                {"id":"3","start":"2020-04-16T13:00:00","end":"2020-04-16T16‌​:00:00","title":"Per Hour: 11.00,Per Mile: 11.00"}
                            ]

среди других тестов. Все значения, которые я тестировал, были найдены в inte rnet от людей, которые делятся своим опытом, но для меня ни одно из них не сработало.

Есть идеи, что не так с этими значениями?

Затем я напишу сценарий, который будет извлекать данные из моей базы данных, но сначала я должен заставить его работать с жестко заданными значениями.

Я постараюсь быть более понятным: я скопировал / вставил этот код из полной демонстрации календаря, и он работает нормально, отображая события правильно: 

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

var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
  plugins: [ 'resourceTimeGrid' ],
  timeZone: 'UTC',
  defaultView: 'resourceTimeGridFourDay',
  datesAboveResources: true,
  header: {
    left: 'prev,next',
    center: 'title',
    right: 'resourceTimeGridDay,resourceTimeGridFourDay'
  },
  views: {
    resourceTimeGridFourDay: {
      type: 'resourceTimeGrid',
      duration: { days: 4 },
      buttonText: '4 days'
    }
  },
  resources: [
    { id: 'a', title: 'Room A' },
    { id: 'b', title: 'Room B' }
  ],
  events: 'https://fullcalendar.io/demo-events.json?with-resources=2'
});

calendar.render();  });

Затем я прокомментировал строку, которая извлекала события с веб-сайта fullcalendar, и добавил свои собственные жестко запрограммированные события, например: 

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

var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
  plugins: [ 'resourceTimeGrid' ],
  timeZone: 'UTC',
  defaultView: 'resourceTimeGridFourDay',
  datesAboveResources: true,
  header: {
    left: 'prev,next',
    center: 'title',
    right: 'resourceTimeGridDay,resourceTimeGridFourDay'
  },
  views: {
    resourceTimeGridFourDay: {
      type: 'resourceTimeGrid',
      duration: { days: 4 },
      buttonText: '4 days'
    }
  },
  resources: [
    { id: 'a', title: 'Room A' },
    { id: 'b', title: 'Room B' }
  ],
  //events: 'https://fullcalendar.io/demo-events.json?with-resources=2'
  events: [
                            {
                                title  : 'event1',
                                start  : '2020-04-01'
                            },
                            {
                                title  : 'event2',
                                start  : '2020-04-05',
                                end    : '2020-04-07'
                            },
                            {
                                title  : 'event3',
                                start  : '2020-04-03T12:30:00',
                                allDay : false // will make the time show
                            }
    ]
});

calendar.render();  });

И когда я это делаю, события не отображаются.

1 Ответ

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

Спасибо за редактирование.

Теперь причина более ясна - вы используете представления с включенными ресурсами, но у ваших событий нет соответствующих идентификаторов ресурсов. Так как же fullCalendar должен знать, на каком ресурсе их размещать, как вы думаете? Он не может решить, что означает, что он не может отображать события.

Вы можете назначить свои события различным ресурсам, в зависимости от того, где они принадлежат. Например, 

events: [
  {
    title  : 'event1',
    start  : '2020-04-01',
    resourceId: 'b'
  },
  {
    title  : 'event2',
    start  : '2020-04-05',
    end    : '2020-04-07',
    resourceId: 'a'
  },
  {
    title  : 'event3',
    start  : '2020-04-03T12:30:00',
    allDay : false, // will make the time show
    resourceIds: ['a', 'b']
  }
]

Демонстрация: https://codepen.io/ADyson82/pen/LYVoZvK?editable=true&editors=001

Вот соответствующая страница документации fullCalendar: Связывание событий с ресурсами

...