Init

Preview: http://dashboards.webkom.co/react/airframe

app/routes/Interface/Calendar/Calendar.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Calendar as BigCalendar, momentLocalizer } from 'react-big-calendar';
+import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
+import moment from 'moment';
+
+import {
+    Container
+} from './../../../components';
+
+import { HeaderMain } from "../../components/HeaderMain";
+import events from './events';
+
+const DragAndDropCalendar = withDragAndDrop(BigCalendar)
+const localizer = momentLocalizer(moment) 
+
+
+export class Calendar extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            events: events,
+        }
+    
+        this.moveEvent = this.moveEvent.bind(this)
+        this.newEvent = this.newEvent.bind(this)
+    }
+  
+    moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) {
+        const { events } = this.state
+    
+        const idx = events.indexOf(event)
+        let allDay = event.allDay
+    
+        if (!event.allDay && droppedOnAllDaySlot) {
+            allDay = true
+        } else if (event.allDay && !droppedOnAllDaySlot) {
+            allDay = false
+        }
+    
+        const updatedEvent = { ...event, start, end, allDay }
+    
+        const nextEvents = [...events]
+        nextEvents.splice(idx, 1, updatedEvent)
+    
+        this.setState({
+            events: nextEvents,
+        })
+    }
+  
+    resizeEvent = ({ event, start, end }) => {
+        const { events } = this.state
+    
+        const nextEvents = events.map(existingEvent => {
+            return existingEvent.id == event.id
+            ? { ...existingEvent, start, end }
+            : existingEvent
+        })
+    
+        this.setState({
+            events: nextEvents,
+        })
+    }
+  
+    newEvent(event) {
+        const title = window.prompt('New Event name');
+        if (!title) {
+            return;
+        }
+
+        let idList = this.state.events.map(a => a.id)
+        let newId = Math.max(...idList) + 1
+        let hour = {
+            id: newId,
+            title,
+            allDay: event.slots.length == 1,
+            start: event.start,
+            end: event.end,
+            }
+        this.setState({
+            events: this.state.events.concat([hour]),
+        })
+    }
+  
+    render() {
+        return (
+            <Container>
+                <HeaderMain 
+                    title="Calendar"
+                    className="mb-5 mt-4"
+                />
+                <p className="pb-4">
+                    An events calendar component built for React and made for modern browsers (read: IE10+) and uses flexbox over the classic tables-ception approach. 
+                    See <a href="https://github.com/intljusticemission/react-big-calendar" target="_blank" rel="noopener noreferrer">Demo and Docs</a>
+                </p>
+                <DragAndDropCalendar
+                    style={{
+                        minHeight: '720px'
+                    }}
+                    selectable
+                    localizer={localizer}
+                    events={this.state.events}
+                    onEventDrop={this.moveEvent}
+                    resizable
+                    onEventResize={this.resizeEvent}
+                    onSelectSlot={this.newEvent}
+                    defaultView={'month'}
+                    defaultDate={new Date()}
+                />
+            </Container>
+        );
+    }
+}

app/routes/Interface/Calendar/events.js

@@ -0,0 +1,111 @@
+import moment from 'moment';
+
+const currentYear = moment().year();
+const currentMonth = moment().month();
+
+export default [
+    {
+        id: 0,
+        title: 'All Day Event very long title',
+        allDay: true,
+        start: new Date(currentYear, currentMonth, 0),
+        end: new Date(currentYear, currentMonth, 1),
+    },
+    {
+        id: 1,
+        title: 'Long Event',
+        start: new Date(currentYear, currentMonth, 7),
+        end: new Date(currentYear, currentMonth, 10),
+    },
+  
+    {
+        id: 2,
+        title: 'DTS STARTS',
+        start: new Date(2016, 2, 13, 0, 0, 0),
+        end: new Date(2016, 2, 20, 0, 0, 0),
+    },
+  
+    {
+        id: 3,
+        title: 'DTS ENDS',
+        start: new Date(2016, 10, 6, 0, 0, 0),
+        end: new Date(2016, 10, 13, 0, 0, 0),
+    },
+  
+    {
+        id: 4,
+        title: 'Some Event',
+        start: new Date(currentYear, currentMonth, 9, 0, 0, 0),
+        end: new Date(currentYear, currentMonth, 10, 0, 0, 0),
+    },
+    {
+        id: 5,
+        title: 'Conference',
+        start: new Date(currentYear, currentMonth, 11),
+        end: new Date(currentYear, currentMonth, 13),
+        desc: 'Big conference for important people',
+    },
+    {
+        id: 6,
+        title: 'Meeting',
+        start: new Date(currentYear, currentMonth, 12, 10, 30, 0, 0),
+        end: new Date(currentYear, currentMonth, 12, 12, 30, 0, 0),
+        desc: 'Pre-meeting meeting, to prepare for the meeting',
+    },
+    {
+        id: 7,
+        title: 'Lunch',
+        start: new Date(currentYear, currentMonth, 12, 12, 0, 0, 0),
+        end: new Date(currentYear, currentMonth, 12, 13, 0, 0, 0),
+        desc: 'Power lunch',
+    },
+    {
+        id: 8,
+        title: 'Meeting',
+        start: new Date(currentYear, currentMonth, 12, 14, 0, 0, 0),
+        end: new Date(currentYear, currentMonth, 12, 15, 0, 0, 0),
+    },
+    {
+        id: 9,
+        title: 'Happy Hour',
+        start: new Date(currentYear, currentMonth, 12, 17, 0, 0, 0),
+        end: new Date(currentYear, currentMonth, 12, 17, 30, 0, 0),
+        desc: 'Most important meal of the day',
+    },
+    {
+        id: 10,
+        title: 'Dinner',
+        start: new Date(currentYear, currentMonth, 12, 20, 0, 0, 0),
+        end: new Date(currentYear, currentMonth, 12, 21, 0, 0, 0),
+    },
+    {
+        id: 11,
+        title: 'Birthday Party',
+        start: new Date(currentYear, currentMonth, 13, 7, 0, 0),
+        end: new Date(currentYear, currentMonth, 13, 10, 30, 0),
+    },
+    {
+        id: 12,
+        title: 'Late Night Event',
+        start: new Date(currentYear, currentMonth, 17, 19, 30, 0),
+        end: new Date(currentYear, currentMonth, 18, 2, 0, 0),
+    },
+    {
+        id: 12.5,
+        title: 'Late Same Night Event',
+        start: new Date(currentYear, currentMonth, 17, 19, 30, 0),
+        end: new Date(currentYear, currentMonth, 17, 23, 30, 0),
+    },
+    {
+        id: 13,
+        title: 'Multi-day Event',
+        start: new Date(currentYear, currentMonth, 20, 19, 30, 0),
+        end: new Date(currentYear, currentMonth, 22, 2, 0, 0),
+    },
+    {
+        id: 14,
+        title: 'Today',
+        start: new Date(new Date().setHours(new Date().getHours() - 3)),
+        end: new Date(new Date().setHours(new Date().getHours() + 3)),
+    },
+];

app/routes/Interface/Calendar/index.js

@@ -0,0 +1,3 @@
+import { Calendar } from './Calendar';
+
+export default Calendar;