Update FullCalendar

package.json

@@ -32,7 +32,10 @@
     "primeflex": "1.0.0-rc.1",
     "axios": "^0.15.3",
     "quill": "1.3.3",
-    "fullcalendar": "4.0.0-alpha.2",
+    "@fullcalendar/core": "4.0.2",
+    "@fullcalendar/daygrid": "4.0.1",
+    "@fullcalendar/interaction": "4.0.2",
+    "@fullcalendar/timegrid": "4.0.1",
     "chart.js": "2.7.3"
   },
   "dependencies": {

public/themes/nova-light/theme.css

@@ -1510,10 +1510,10 @@ body .p-panel .p-panel-titlebar {
 }
 body .p-panel .p-panel-titlebar .p-panel-title {
   vertical-align: middle;
-  font-weight: 400;
+  font-weight: 700;
 }
 body .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
-  margin: 0;
+  margin: 0.143em 0 0 0;
   position: relative;
   font-size: 14px;
   color: #848484;
@@ -1541,7 +1541,6 @@ body .p-panel .p-panel-content {
   border: 1px solid #c8c8c8;
   background-color: #ffffff;
   color: #333333;
-  padding: 0.571em 1em;
   border-top: 0 none;
   -moz-border-radius-bottomleft: 3px;
   -webkit-border-bottom-left-radius: 3px;
@@ -1571,6 +1570,7 @@ body .p-fieldset .p-fieldset-legend a {
   border: 1px solid #c8c8c8;
   color: #333333;
   background-color: #f4f4f4;
+  font-weight: 700;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -1616,7 +1616,7 @@ body .p-accordion .p-accordion-header a {
   color: #333333;
   background-color: #f4f4f4;
   color: #333333;
-  font-weight: 400;
+  font-weight: 700;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -1634,7 +1634,7 @@ body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-right:
 body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-down:before {
   content: "";
 }
-body .p-accordion .p-accordion-header a:not(.p-disabled):focus {
+body .p-accordion .p-accordion-header:not(.p-disabled) a:focus {
   outline: 0 none;
   outline-offset: 0;
   -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
@@ -1709,7 +1709,7 @@ body .p-tabview.p-tabview-top .p-tabview-nav li a, body .p-tabview.p-tabview-bot
   display: inline-block;
   color: #333333;
   padding: 0.571em 1em;
-  font-weight: 400;
+  font-weight: 700;
   -moz-transition: background-color 0.2s, box-shadow 0.2s;
   -o-transition: background-color 0.2s, box-shadow 0.2s;
   -webkit-transition: background-color 0.2s, box-shadow 0.2s;
@@ -2115,7 +2115,7 @@ body .p-datagrid .p-datagrid-header {
   color: #333333;
   border: 1px solid #c8c8c8;
   padding: 0.571em 1em;
-  font-weight: 400;
+  font-weight: 700;
   border-bottom: 0 none;
 }
 body .p-datagrid .p-datagrid-content {
@@ -2137,7 +2137,7 @@ body .p-datalist .p-datalist-header {
   color: #333333;
   border: 1px solid #c8c8c8;
   padding: 0.571em 1em;
-  font-weight: 400;
+  font-weight: 700;
   border-bottom: 0 none;
 }
 body .p-datalist .p-datalist-content {
@@ -2159,7 +2159,7 @@ body .p-datascroller .p-datascroller-header {
   color: #333333;
   border: 1px solid #c8c8c8;
   padding: 0.571em 1em;
-  font-weight: 400;
+  font-weight: 700;
   border-bottom: 0 none;
 }
 body .p-datascroller .p-datascroller-content {
@@ -2181,7 +2181,7 @@ body .p-dataview .p-dataview-header {
   color: #333333;
   border: 1px solid #c8c8c8;
   padding: 0.571em 1em;
-  font-weight: 400;
+  font-weight: 700;
   border-bottom: 0 none;
   -moz-border-radius-topleft: 3px;
   -webkit-border-top-left-radius: 3px;
@@ -2232,7 +2232,7 @@ body .fc .fc-event {
   border: 1px solid #116fbf;
   color: #ffffff;
 }
-body .fc .fc-toolbar .ui-button {
+body .fc .fc-toolbar .fc-button {
   color: #ffffff;
   background-color: #007ad9;
   border: 1px solid #007ad9;
@@ -2245,38 +2245,38 @@ body .fc .fc-toolbar .ui-button {
   -webkit-border-radius: 3px;
   border-radius: 3px;
 }
-body .fc .fc-toolbar .ui-button:enabled:hover {
+body .fc .fc-toolbar .fc-button:enabled:hover {
   background-color: #116fbf;
   color: #ffffff;
   border-color: #116fbf;
 }
-body .fc .fc-toolbar .ui-button .ui-icon-circle-triangle-w {
+body .fc .fc-toolbar .fc-button .fc-icon-chevron-left {
-  font-family: "PrimeIcons";
+  font-family: "PrimeIcons" !important;
   text-indent: 0;
 }
-body .fc .fc-toolbar .ui-button .ui-icon-circle-triangle-w:before {
+body .fc .fc-toolbar .fc-button .fc-icon-chevron-left:before {
   content: "";
 }
-body .fc .fc-toolbar .ui-button .ui-icon-circle-triangle-e {
+body .fc .fc-toolbar .fc-button .fc-icon-chevron-right {
-  font-family: "PrimeIcons";
+  font-family: "PrimeIcons" !important;
   text-indent: 0;
 }
-body .fc .fc-toolbar .ui-button .ui-icon-circle-triangle-e:before {
+body .fc .fc-toolbar .fc-button .fc-icon-chevron-right:before {
   content: "";
 }
-body .fc .fc-toolbar .ui-button:focus {
+body .fc .fc-toolbar .fc-button:focus {
   outline: 0 none;
   outline-offset: 0;
   -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
   -moz-box-shadow: 0 0 0 0.2em #8dcdff;
   box-shadow: 0 0 0 0.2em #8dcdff;
 }
-body .fc .fc-toolbar .fc-button-group .ui-button {
+body .fc .fc-toolbar .fc-button-group .fc-button {
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   border-radius: 0;
 }
-body .fc .fc-toolbar .fc-button-group .ui-button:first-child {
+body .fc .fc-toolbar .fc-button-group .fc-button:first-child {
   -moz-border-radius-topleft: 3px;
   -webkit-border-top-left-radius: 3px;
   border-top-left-radius: 3px;
@@ -2284,7 +2284,7 @@ body .fc .fc-toolbar .fc-button-group .ui-button:first-child {
   -webkit-border-bottom-left-radius: 3px;
   border-bottom-left-radius: 3px;
 }
-body .fc .fc-toolbar .fc-button-group .ui-button:last-child {
+body .fc .fc-toolbar .fc-button-group .fc-button:last-child {
   -moz-border-radius-topright: 3px;
   -webkit-border-top-right-radius: 3px;
   border-top-right-radius: 3px;
@@ -2307,7 +2307,7 @@ body .p-picklist .p-picklist-caption {
   color: #333333;
   border: 1px solid #c8c8c8;
   padding: 0.571em 1em;
-  font-weight: 400;
+  font-weight: 700;
   border-bottom: 0 none;
   -moz-border-radius-topleft: 3px;
   -webkit-border-top-left-radius: 3px;
@@ -2396,7 +2396,7 @@ body .p-orderlist .p-orderlist-caption {
   color: #333333;
   border: 1px solid #c8c8c8;
   padding: 0.571em 1em;
-  font-weight: 400;
+  font-weight: 700;
   border-bottom: 0 none;
   -moz-border-radius-topleft: 3px;
   -webkit-border-top-left-radius: 3px;
@@ -3015,7 +3015,7 @@ body .p-overlaypanel {
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
 }
 body .p-overlaypanel .p-overlaypanel-content {
-  padding: 0.571em 1em;
+  padding: 1em;
 }
 body .p-overlaypanel .p-overlaypanel-close {
   background-color: #007ad9;
@@ -3070,7 +3070,7 @@ body .p-dialog .p-dialog-titlebar {
   background-color: #f4f4f4;
   color: #333333;
   padding: 1em;
-  font-weight: 400;
+  font-weight: 700;
   border-bottom: 0 none;
   -moz-border-radius-topleft: 3px;
   -webkit-border-top-left-radius: 3px;
@@ -3082,6 +3082,7 @@ body .p-dialog .p-dialog-titlebar {
 body .p-dialog .p-dialog-titlebar .p-dialog-title {
   margin: 0;
   float: none;
+  font-weight: 700;
 }
 body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
   color: #848484;
@@ -3100,7 +3101,7 @@ body .p-dialog .p-dialog-content {
   background-color: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
+  padding: 1em;
 }
 body .p-dialog .p-dialog-footer {
   border: 1px solid #c8c8c8;
@@ -3177,7 +3178,7 @@ body .p-lightbox .p-lightbox-caption {
   background-color: #f4f4f4;
   color: #333333;
   padding: 0.571em 1em;
-  font-weight: 400;
+  font-weight: 700;
 }
 body .p-lightbox .p-lightbox-caption .p-lightbox-caption-text {
   color: #333333;
@@ -3422,7 +3423,7 @@ body .p-menu .p-submenu-header {
   padding: 0.714em 0.857em;
   color: #333333;
   background-color: #f4f4f4;
-  font-weight: 400;
+  font-weight: 700;
   border: 0 none;
   -moz-border-radius-topleft: 3px;
   -webkit-border-top-left-radius: 3px;
@@ -3585,7 +3586,7 @@ body .p-slidemenu .p-slidemenu-backward {
   padding: 0.571em 1em;
   color: #333333;
   background-color: #f4f4f4;
-  font-weight: 400;
+  font-weight: 700;
   border: 0 none;
 }
 body .p-slidemenu .p-slidemenu-backward:hover {
@@ -3680,7 +3681,7 @@ body .p-megamenu .p-megamenu-submenu-header {
   padding: 0.571em 1em;
   color: #333333;
   background-color: #f4f4f4;
-  font-weight: 400;
+  font-weight: 700;
   border: 0 none;
 }
 body .p-megamenu .p-megamenu-panel {
@@ -3726,7 +3727,7 @@ body .p-panelmenu .p-panelmenu-header > a {
   background-color: #f4f4f4;
   color: #333333;
   padding: 0.714em 0.857em;
-  font-weight: 400;
+  font-weight: 700;
   position: static;
   font-size: 14px;
   -moz-border-radius: 3px;

src/components/fullcalendar/FullCalendar.vue

@@ -1,9 +1,9 @@
 <template>
-    <div ref="container"></div>
+    <div></div>
 </template>
 
 <script>
-import {Calendar} from 'fullcalendar';
+import {Calendar} from '@fullcalendar/core';
 
 export default {
     props: {
@@ -12,18 +12,25 @@ export default {
     },
     calendar: null,
     watch: {
-        events(newValue) {
+        events(value) {
             this.calendar.removeAllEventSources();
-            this.calendar.addEventSource(newValue);
+            this.calendar.addEventSource(value);
+        },
+        options(value) {
+            if (value && this.calendar) {
+                for (let prop in value) {
+                    this.calendar.setOption(prop, value[prop]);
+                }
+            }
         }
     },
     mounted() {
-        if (this.$refs.container.offsetParent) {
+        if (this.$el.offsetParent) {
             this.initialize();
         }
     },
     updated() {
-        if (!this.calendar && this.$refs.container.offsetParent) {
+        if (!this.calendar && this.$el.offsetParent) {
             this.initialize();
         }
     },
@@ -35,9 +42,9 @@ export default {
     },
     methods: {
         initialize() {
-            let defaultConfig = {theme: true};
+            let defaultConfig = {theme: false};
             let config = this.options ? {...this.options, ...defaultConfig} : defaultConfig;
-            this.calendar = new Calendar(this.$refs.container, config);
+            this.calendar = new Calendar(this.$el, config);
             this.calendar.render();
 
             if (this.events) {

src/main.js

@@ -51,6 +51,9 @@ import './assets/styles/primevue.css';
 import 'primeflex/primeflex.css';
 import 'primeicons/primeicons.css';
 import 'prismjs/themes/prism-coy.css';
+import '@fullcalendar/core/main.min.css';
+import '@fullcalendar/daygrid/main.min.css';
+import '@fullcalendar/timegrid/main.min.css';
 
 Vue.use(ToastService);
 

src/views/fullcalendar/FullCalendarDemo.vue

@@ -17,17 +17,21 @@
 
 <script>
 import EventService from '../../service/EventService';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
 import FullCalendarDoc from './FullCalendarDoc';
 
 export default {
     data() {
         return {
             options: {
+                plugins:[dayGridPlugin, timeGridPlugin, interactionPlugin],
                 defaultDate: '2019-01-01',
                 header: {
                     left: 'prev,next',
                     center: 'title',
-                    right: 'month,agendaWeek,agendaDay'
+                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                 },
                 editable: true
             },