updated fullcalendar and changelog, removed console.log

Author: guardofparadise

changelog.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [8.0.5]
+
+- Updated fullcalendar package to v5.3.0
+
 ## [8.0.4]
 
 - Add animation to alert in header

src/pages/dashboard/components/calendar/Calendar.js

@@ -48,9 +48,6 @@ class Calendar extends Component {
   }
 
   next = () =>  {
-    console.log('HEHEHE');
-    console.log(this.state.selectedMonthEvents, this.state.selectedMonth.add(1, "month"));
-    console.log('HEHEHE');
     this.setState({
       selectedMonth: this.state.selectedMonth.add(1, "month")
     });

src/pages/extra/calendar/Calendar.js

@@ -16,13 +16,14 @@ import moment from 'moment/moment';
 import s from './Calendar.module.scss';
 import Widget from '../../../components/Widget';
 
-import FullCalendar from "@fullcalendar/react";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import timeGridPlugin from "@fullcalendar/timegrid";
-import interactionPlugin, {Draggable} from "@fullcalendar/interaction";
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import listPlugin from '@fullcalendar/list';
+import interactionPlugin, {Draggable} from '@fullcalendar/interaction';
 
-import "@fullcalendar/daygrid/main.css";
-import "@fullcalendar/timegrid/main.css";
+import '@fullcalendar/daygrid/main.css';
+import '@fullcalendar/timegrid/main.css';
 
 class Calendar extends React.Component {
     constructor(props) {
@@ -115,7 +116,7 @@ class Calendar extends React.Component {
           editable: true,
           droppable: true,
         },
-        calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
+        calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
         dragOptions: { zIndex: 999, revert: true, revertDuration: 0 },
       }
     }
@@ -166,6 +167,7 @@ class Calendar extends React.Component {
     this.fullCalendar.getApi().today();
   }
   changeView = (view) => {
+    this.setState({ calendarView: view });
     this.fullCalendar.getApi().changeView(view);
   }
   getFormattedDate = (date) =>  {
@@ -262,6 +264,10 @@ class Calendar extends React.Component {
                       color="default" onClick={() => this.changeView('timeGridDay')}
                       active={this.state.calendarView === 'timeGridDay'}
                     >Day</Button>
+                    <Button
+                      color="default" onClick={() => this.changeView('list')}
+                      active={this.state.calendarView === 'list'}
+                    >List</Button>
                   </ButtonGroup>
                 </Col>
               </Row>

src/pages/extra/calendar/Calendar.module.scss

@@ -20,6 +20,15 @@
       padding: 0;
     }
 
+    .fc .fc-list-sticky .fc-list-day > * {
+      background: $gray-900;
+    }
+
+    .fc .fc-list-event:hover td {
+      background-color: $violet_deep;
+      cursor: pointer;
+    }
+
     .fc-event {
       border: none;
       font-weight: $font-weight-normal;