Initial commitHEADmain

2 files changed, 64 insertions, 0 deletions

diff --git a/components/Calendar/index.js b/components/Calendar/index.js
new file mode 100644
index 0000000..bc00831
--- /dev/null
+++ b/components/Calendar/index.js
@@ -0,0 +1,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
+        }}
+      />
+    )
+  }
+}
diff --git a/components/index.js b/components/index.js
new file mode 100644
index 0000000..2d8e826
--- /dev/null
+++ b/components/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from 'react-dom';
+import Calendar from './Calendar';
+
+document.addEventListener('DOMContentLoaded', () => {
+  render(
+    <Calendar />,
+    document.querySelector('#basic-fullcalendar'),
+  );
+});