1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
export default class Calendar extends React.Component {
constructor(props) {
super(props);
this.state = {
events: [
{ title: 'Geburtstag', date: '2020-12-19' },
{ title: 'Weihnachten', date: '2020-12-24' },
],
};
}
fetchEvents({start, end}, successCallback, failureCallback) {
const calendarEvents = new wp.api.collections.CalendarEvent();
calendarEvents.fetch({
data: {
before: start.toISOString(),
after: end.toISOString(),
}
}).then(async (events) => {
const mappedEvents = await Promise.all(events.map(async (event) => {
const category = new wp.api.models.CalendarEventCategory({ id: event['calendar-event-category'][0] });
await category.fetch();
return {
title: event.title.rendered,
start: event.meta.start_date,
end: event.meta.end_date,
color: category.getMeta('color'),
};
}));
successCallback(mappedEvents);
}).catch((error) => {
failureCallback(error);
});
}
render() {
return (
<FullCalendar
plugins={[ dayGridPlugin ]}
initialView="dayGridMonth"
events={this.fetchEvents}
eventTimeFormat={{
hour: '2-digit',
minute: '2-digit',
hour12: false
}}
/>
)
}
}
|
