Update FullCalendar

2019-05-13 14:47:17 +03:00 · 2019-05-13 14:47:17 +03:00 · 2ec91db82f
parent 7c6480f440
commit 2ec91db82f
6 changed files with 60 additions and 15398 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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": {
--- a/public/themes/nova-light/theme.css
+++ b/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 {
-  font-family: "PrimeIcons";
+body .fc .fc-toolbar .fc-button .fc-icon-chevron-left {
+  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 {
-  font-family: "PrimeIcons";
+body .fc .fc-toolbar .fc-button .fc-icon-chevron-right {
+  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;
--- a/src/components/fullcalendar/FullCalendar.vue
+++ b/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) {
--- a/src/main.js
+++ b/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);

--- a/src/views/fullcalendar/FullCalendarDemo.vue
+++ b/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
            },