From 0d727e74c0701f5fd1b950148bc6653e26f5d604 Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Mon, 3 Jul 2023 20:46:13 +0300
Subject: [PATCH] update fullcalendar

---
 .../Crm/Resources/metadata/app/jsLibs.json    |   18 +-
 client/modules/crm/css/fullcalendar.css       | 1494 -----------------
 client/modules/crm/css/fullcalendar.print.css |  208 ---
 .../crm/res/templates/calendar/calendar.tpl   |    3 -
 .../crm/src/views/calendar/calendar.js        |  544 ++++--
 frontend/less/espo/custom.less                |   11 +-
 .../espo/misc/fullcalendar/fullcalendar.less  |  275 +--
 frontend/less/glass/custom.less               |    4 +-
 frontend/libs.json                            |   14 +-
 package-lock.json                             |  175 +-
 package.json                                  |    4 +-
 11 files changed, 712 insertions(+), 2038 deletions(-)
 delete mode 100644 client/modules/crm/css/fullcalendar.css
 delete mode 100644 client/modules/crm/css/fullcalendar.print.css

diff --git a/application/Espo/Modules/Crm/Resources/metadata/app/jsLibs.json b/application/Espo/Modules/Crm/Resources/metadata/app/jsLibs.json
index e403b0f381..7b318559dd 100644
--- a/application/Espo/Modules/Crm/Resources/metadata/app/jsLibs.json
+++ b/application/Espo/Modules/Crm/Resources/metadata/app/jsLibs.json
@@ -2,8 +2,22 @@
     "fullcalendar": {
         "path": "client/modules/crm/lib/fullcalendar.js",
         "devPath": "client/modules/crm/lib/original/fullcalendar.js",
-        "exportsTo": "$.fn",
-        "exportsAs": "fullCalendar",
+        "exportsTo": "window",
+        "exportsAs": "FullCalendar",
+        "sourceMap": true
+    },
+    "fullcalendar-moment": {
+        "path": "client/modules/crm/lib/fullcalendar-moment.js",
+        "devPath": "client/modules/crm/lib/original/fullcalendar-moment.js",
+        "exportsTo": "FullCalendar",
+        "exportsAs": "Moment",
+        "sourceMap": true
+    },
+    "fullcalendar-moment-timezone": {
+        "path": "client/modules/crm/lib/fullcalendar-moment-timezone.js",
+        "devPath": "client/modules/crm/lib/original/fullcalendar-moment-timezone.js",
+        "exportsTo": "FullCalendar",
+        "exportsAs": "MomentTimezone",
         "sourceMap": true
     },
     "vis": {
diff --git a/client/modules/crm/css/fullcalendar.css b/client/modules/crm/css/fullcalendar.css
deleted file mode 100644
index 4dbdb83b74..0000000000
--- a/client/modules/crm/css/fullcalendar.css
+++ /dev/null
@@ -1,1494 +0,0 @@
-/*!
- * FullCalendar v3.7.0 Stylesheet
- * Docs & License: https://fullcalendar.io/
- * (c) 2017 Adam Shaw
- */
-
-
-.fc {
-	direction: ltr;
-	text-align: left;
-}
-
-.fc-rtl {
-	text-align: right;
-}
-
-body .fc { /* extra precedence to overcome jqui */
-	font-size: 1em;
-}
-
-
-/* Colors
---------------------------------------------------------------------------------------------------*/
-
-
-.fc-highlight { /* when user is selecting cells */
-	background: #bce8f1;
-	opacity: .3;
-}
-
-.fc-bgevent { /* default look for background events */
-	background: rgb(143, 223, 130);
-	opacity: .3;
-}
-
-.fc-nonbusiness { /* default look for non-business-hours areas */
-	/* will inherit .fc-bgevent's styles */
-	background: #d7d7d7;
-}
-
-
-/* Buttons (styled <button> tags, normalized to work cross-browser)
---------------------------------------------------------------------------------------------------*/
-
-.fc button {
-	/* force height to include the border and padding */
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	/* dimensions */
-	margin: 0;
-	height: 2.1em;
-	padding: 0 .6em;
-
-	/* text & cursor */
-	font-size: 1em; /* normalize */
-	white-space: nowrap;
-	cursor: pointer;
-}
-
-/* Firefox has an annoying inner border */
-.fc button::-moz-focus-inner { margin: 0; padding: 0; }
-	
-.fc-state-default { /* non-theme */
-	border: 1px solid;
-}
-
-.fc-state-default.fc-corner-left { /* non-theme */
-	border-top-left-radius: 4px;
-	border-bottom-left-radius: 4px;
-}
-
-.fc-state-default.fc-corner-right { /* non-theme */
-	border-top-right-radius: 4px;
-	border-bottom-right-radius: 4px;
-}
-
-/* icons in buttons */
-
-.fc button .fc-icon { /* non-theme */
-	position: relative;
-	top: -0.05em; /* seems to be a good adjustment across browsers */
-	margin: 0 .2em;
-	vertical-align: middle;
-}
-	
-/*
-  button states
-  borrowed from twitter bootstrap (http://twitter.github.com/bootstrap/)
-*/
-
-.fc-state-default {
-	background-color: #f5f5f5;
-	background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
-	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
-	background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
-	background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
-	background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
-	background-repeat: repeat-x;
-	border-color: #e6e6e6 #e6e6e6 #bfbfbf;
-	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-	color: #333;
-	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.fc-state-hover,
-.fc-state-down,
-.fc-state-active,
-.fc-state-disabled {
-	color: #333333;
-	background-color: #e6e6e6;
-}
-
-.fc-state-hover {
-	color: #333333;
-	text-decoration: none;
-	background-position: 0 -15px;
-	-webkit-transition: background-position 0.1s linear;
-	   -moz-transition: background-position 0.1s linear;
-	     -o-transition: background-position 0.1s linear;
-	        transition: background-position 0.1s linear;
-}
-
-.fc-state-down,
-.fc-state-active {
-	background-color: #cccccc;
-	background-image: none;
-	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.fc-state-disabled {
-	cursor: default;
-	background-image: none;
-	opacity: 0.65;
-	box-shadow: none;
-}
-
-
-/* Buttons Groups
---------------------------------------------------------------------------------------------------*/
-
-.fc-button-group {
-	display: inline-block;
-}
-
-/*
-every button that is not first in a button group should scootch over one pixel and cover the
-previous button's border...
-*/
-
-.fc .fc-button-group > * { /* extra precedence b/c buttons have margin set to zero */
-	float: left;
-	margin: 0 0 0 -1px;
-}
-
-.fc .fc-button-group > :first-child { /* same */
-	margin-left: 0;
-}
-
-
-/* Popover
---------------------------------------------------------------------------------------------------*/
-
-.fc-popover {
-	position: absolute;
-	box-shadow: 0 2px 6px rgba(0,0,0,.15);
-}
-
-.fc-popover .fc-header { /* TODO: be more consistent with fc-head/fc-body */
-	padding: 2px 4px;
-}
-
-.fc-popover .fc-header .fc-title {
-	margin: 0 2px;
-}
-
-.fc-popover .fc-header .fc-close {
-	cursor: pointer;
-}
-
-.fc-ltr .fc-popover .fc-header .fc-title,
-.fc-rtl .fc-popover .fc-header .fc-close {
-	float: left;
-}
-
-.fc-rtl .fc-popover .fc-header .fc-title,
-.fc-ltr .fc-popover .fc-header .fc-close {
-	float: right;
-}
-
-
-/* Misc Reusable Components
---------------------------------------------------------------------------------------------------*/
-
-.fc-divider {
-	border-style: solid;
-	border-width: 1px;
-}
-
-hr.fc-divider {
-	height: 0;
-	margin: 0;
-	padding: 0 0 2px; /* height is unreliable across browsers, so use padding */
-	border-width: 1px 0;
-}
-
-.fc-clear {
-	clear: both;
-}
-
-.fc-bg,
-.fc-bgevent-skeleton,
-.fc-highlight-skeleton,
-.fc-helper-skeleton {
-	/* these element should always cling to top-left/right corners */
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-}
-
-.fc-bg {
-	bottom: 0; /* strech bg to bottom edge */
-}
-
-.fc-bg table {
-	height: 100%; /* strech bg to bottom edge */
-}
-
-
-/* Tables
---------------------------------------------------------------------------------------------------*/
-
-.fc table {
-	width: 100%;
-	box-sizing: border-box; /* fix scrollbar issue in firefox */
-	table-layout: fixed;
-	border-collapse: collapse;
-	border-spacing: 0;
-	font-size: 1em; /* normalize cross-browser */
-}
-
-.fc th {
-	text-align: center;
-}
-
-.fc th,
-.fc td {
-	border-style: solid;
-	border-width: 1px;
-	padding: 0;
-	vertical-align: top;
-}
-
-.fc td.fc-today {
-	border-style: double; /* overcome neighboring borders */
-}
-
-
-/* Internal Nav Links
---------------------------------------------------------------------------------------------------*/
-
-a[data-goto] {
-	cursor: pointer;
-}
-
-a[data-goto]:hover {
-	text-decoration: underline;
-}
-
-
-/* Fake Table Rows
---------------------------------------------------------------------------------------------------*/
-
-.fc .fc-row { /* extra precedence to overcome themes w/ .ui-widget-content forcing a 1px border */
-	/* no visible border by default. but make available if need be (scrollbar width compensation) */
-	border-style: solid;
-	border-width: 0;
-}
-
-.fc-row table {
-	/* don't put left/right border on anything within a fake row.
-	   the outer tbody will worry about this */
-	border-left: 0 hidden transparent;
-	border-right: 0 hidden transparent;
-
-	/* no bottom borders on rows */
-	border-bottom: 0 hidden transparent; 
-}
-
-.fc-row:first-child table {
-	border-top: 0 hidden transparent; /* no top border on first row */
-}
-
-
-/* Day Row (used within the header and the DayGrid)
---------------------------------------------------------------------------------------------------*/
-
-.fc-row {
-	position: relative;
-}
-
-.fc-row .fc-bg {
-	z-index: 1;
-}
-
-/* highlighting cells & background event skeleton */
-
-.fc-row .fc-bgevent-skeleton,
-.fc-row .fc-highlight-skeleton {
-	bottom: 0; /* stretch skeleton to bottom of row */
-}
-
-.fc-row .fc-bgevent-skeleton table,
-.fc-row .fc-highlight-skeleton table {
-	height: 100%; /* stretch skeleton to bottom of row */
-}
-
-.fc-row .fc-highlight-skeleton td,
-.fc-row .fc-bgevent-skeleton td {
-	border-color: transparent;
-}
-
-.fc-row .fc-bgevent-skeleton {
-	z-index: 2;
-
-}
-
-.fc-row .fc-highlight-skeleton {
-	z-index: 3;
-}
-
-/*
-row content (which contains day/week numbers and events) as well as "helper" (which contains
-temporary rendered events).
-*/
-
-.fc-row .fc-content-skeleton {
-	position: relative;
-	z-index: 4;
-	padding-bottom: 2px; /* matches the space above the events */
-}
-
-.fc-row .fc-helper-skeleton {
-	z-index: 5;
-}
-
-.fc .fc-row .fc-content-skeleton table,
-.fc .fc-row .fc-content-skeleton td,
-.fc .fc-row .fc-helper-skeleton td {
-	/* see-through to the background below */
-	/* extra precedence to prevent theme-provided backgrounds */
-	background: none; /* in case <td>s are globally styled */
-	border-color: transparent;
-}
-
-.fc-row .fc-content-skeleton td,
-.fc-row .fc-helper-skeleton td {
-	/* don't put a border between events and/or the day number */
-	border-bottom: 0;
-}
-
-.fc-row .fc-content-skeleton tbody td, /* cells with events inside (so NOT the day number cell) */
-.fc-row .fc-helper-skeleton tbody td {
-	/* don't put a border between event cells */
-	border-top: 0;
-}
-
-
-/* Scrolling Container
---------------------------------------------------------------------------------------------------*/
-
-.fc-scroller {
-	-webkit-overflow-scrolling: touch;
-}
-
-/* TODO: move to agenda/basic */
-.fc-scroller > .fc-day-grid,
-.fc-scroller > .fc-time-grid {
-	position: relative; /* re-scope all positions */
-	width: 100%; /* hack to force re-sizing this inner element when scrollbars appear/disappear */
-}
-
-
-/* Global Event Styles
---------------------------------------------------------------------------------------------------*/
-
-.fc-event {
-	position: relative; /* for resize handle and other inner positioning */
-	display: block; /* make the <a> tag block */
-	font-size: .85em;
-	line-height: 1.3;
-	border-radius: 3px;
-	border: 1px solid #3a87ad; /* default BORDER color */
-}
-
-.fc-event,
-.fc-event-dot {
-	background-color: #3a87ad; /* default BACKGROUND color */
-}
-
-.fc-event,
-.fc-event:hover {
-	color: #fff; /* default TEXT color */
-	text-decoration: none; /* if <a> has an href */
-}
-
-.fc-event[href],
-.fc-event.fc-draggable {
-	cursor: pointer; /* give events with links and draggable events a hand mouse pointer */
-}
-
-.fc-not-allowed, /* causes a "warning" cursor. applied on body */
-.fc-not-allowed .fc-event { /* to override an event's custom cursor */
-	cursor: not-allowed;
-}
-
-.fc-event .fc-bg { /* the generic .fc-bg already does position */
-	z-index: 1;
-	background: #fff;
-	opacity: .25;
-}
-
-.fc-event .fc-content {
-	position: relative;
-	z-index: 2;
-}
-
-/* resizer (cursor AND touch devices) */
-
-.fc-event .fc-resizer {
-	position: absolute;
-	z-index: 4;
-}
-
-/* resizer (touch devices) */
-
-.fc-event .fc-resizer {
-	display: none;
-}
-
-.fc-event.fc-allow-mouse-resize .fc-resizer,
-.fc-event.fc-selected .fc-resizer {
-	/* only show when hovering or selected (with touch) */
-	display: block;
-}
-
-/* hit area */
-
-.fc-event.fc-selected .fc-resizer:before {
-	/* 40x40 touch area */
-	content: "";
-	position: absolute;
-	z-index: 9999; /* user of this util can scope within a lower z-index */
-	top: 50%;
-	left: 50%;
-	width: 40px;
-	height: 40px;
-	margin-left: -20px;
-	margin-top: -20px;
-}
-
-
-/* Event Selection (only for touch devices)
---------------------------------------------------------------------------------------------------*/
-
-.fc-event.fc-selected {
-	z-index: 9999 !important; /* overcomes inline z-index */
-	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-.fc-event.fc-selected.fc-dragging {
-	box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
-}
-
-
-/* Horizontal Events
---------------------------------------------------------------------------------------------------*/
-
-/* bigger touch area when selected */
-.fc-h-event.fc-selected:before {
-	content: "";
-	position: absolute;
-	z-index: 3; /* below resizers */
-	top: -10px;
-	bottom: -10px;
-	left: 0;
-	right: 0;
-}
-
-/* events that are continuing to/from another week. kill rounded corners and butt up against edge */
-
-.fc-ltr .fc-h-event.fc-not-start,
-.fc-rtl .fc-h-event.fc-not-end {
-	margin-left: 0;
-	border-left-width: 0;
-	padding-left: 1px; /* replace the border with padding */
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
-}
-
-.fc-ltr .fc-h-event.fc-not-end,
-.fc-rtl .fc-h-event.fc-not-start {
-	margin-right: 0;
-	border-right-width: 0;
-	padding-right: 1px; /* replace the border with padding */
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
-}
-
-/* resizer (cursor AND touch devices) */
-
-/* left resizer  */
-.fc-ltr .fc-h-event .fc-start-resizer,
-.fc-rtl .fc-h-event .fc-end-resizer {
-	cursor: w-resize;
-	left: -1px; /* overcome border */
-}
-
-/* right resizer */
-.fc-ltr .fc-h-event .fc-end-resizer,
-.fc-rtl .fc-h-event .fc-start-resizer {
-	cursor: e-resize;
-	right: -1px; /* overcome border */
-}
-
-/* resizer (mouse devices) */
-
-.fc-h-event.fc-allow-mouse-resize .fc-resizer {
-	width: 7px;
-	top: -1px; /* overcome top border */
-	bottom: -1px; /* overcome bottom border */
-}
-
-/* resizer (touch devices) */
-
-.fc-h-event.fc-selected .fc-resizer {
-	/* 8x8 little dot */
-	border-radius: 4px;
-	border-width: 1px;
-	width: 6px;
-	height: 6px;
-	border-style: solid;
-	border-color: inherit;
-	background: #fff;
-	/* vertically center */
-	top: 50%;
-	margin-top: -4px;
-}
-
-/* left resizer  */
-.fc-ltr .fc-h-event.fc-selected .fc-start-resizer,
-.fc-rtl .fc-h-event.fc-selected .fc-end-resizer {
-	margin-left: -4px; /* centers the 8x8 dot on the left edge */
-}
-
-/* right resizer */
-.fc-ltr .fc-h-event.fc-selected .fc-end-resizer,
-.fc-rtl .fc-h-event.fc-selected .fc-start-resizer {
-	margin-right: -4px; /* centers the 8x8 dot on the right edge */
-}
-
-
-/* DayGrid events
-----------------------------------------------------------------------------------------------------
-We use the full "fc-day-grid-event" class instead of using descendants because the event won't
-be a descendant of the grid when it is being dragged.
-*/
-
-.fc-day-grid-event {
-	margin: 1px 2px 0; /* spacing between events and edges */
-	padding: 0 1px;
-}
-
-tr:first-child > td > .fc-day-grid-event {
-	margin-top: 2px; /* a little bit more space before the first event */
-}
-
-.fc-day-grid-event.fc-selected:after {
-	content: "";
-	position: absolute;
-	z-index: 1; /* same z-index as fc-bg, behind text */
-	/* overcome the borders */
-	top: -1px;
-	right: -1px;
-	bottom: -1px;
-	left: -1px;
-	/* darkening effect */
-	background: #000;
-	opacity: .25;
-}
-
-.fc-day-grid-event .fc-content { /* force events to be one-line tall */
-	white-space: nowrap;
-	overflow: hidden;
-}
-
-.fc-day-grid-event .fc-time {
-	font-weight: bold;
-}
-
-/* resizer (cursor devices) */
-
-/* left resizer  */
-.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer,
-.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer {
-	margin-left: -2px; /* to the day cell's edge */
-}
-
-/* right resizer */
-.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer,
-.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer {
-	margin-right: -2px; /* to the day cell's edge */
-}
-
-
-/* Event Limiting
---------------------------------------------------------------------------------------------------*/
-
-/* "more" link that represents hidden events */
-
-a.fc-more {
-	margin: 1px 3px;
-	font-size: .85em;
-	cursor: pointer;
-	text-decoration: none;
-}
-
-a.fc-more:hover {
-	text-decoration: underline;
-}
-
-.fc-limited { /* rows and cells that are hidden because of a "more" link */
-	display: none;
-}
-
-/* popover that appears when "more" link is clicked */
-
-.fc-day-grid .fc-row {
-	z-index: 1; /* make the "more" popover one higher than this */
-}
-
-.fc-more-popover {
-	z-index: 2;
-	width: 220px;
-}
-
-.fc-more-popover .fc-event-container {
-	padding: 10px;
-}
-
-
-/* Now Indicator
---------------------------------------------------------------------------------------------------*/
-
-.fc-now-indicator {
-	position: absolute;
-	border: 0 solid red;
-}
-
-
-/* Utilities
---------------------------------------------------------------------------------------------------*/
-
-.fc-unselectable {
-	-webkit-user-select: none;
-	 -khtml-user-select: none;
-	   -moz-user-select: none;
-	    -ms-user-select: none;
-	        user-select: none;
-	-webkit-touch-callout: none;
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-
-
-/*
-TODO: more distinction between this file and common.css
-*/
-
-/* Colors
---------------------------------------------------------------------------------------------------*/
-
-.fc-unthemed th,
-.fc-unthemed td,
-.fc-unthemed thead,
-.fc-unthemed tbody,
-.fc-unthemed .fc-divider,
-.fc-unthemed .fc-row,
-.fc-unthemed .fc-content, /* for gutter border */
-.fc-unthemed .fc-popover,
-.fc-unthemed .fc-list-view,
-.fc-unthemed .fc-list-heading td {
-	border-color: #ddd;
-}
-
-.fc-unthemed .fc-popover {
-	background-color: #fff;
-}
-
-.fc-unthemed .fc-divider,
-.fc-unthemed .fc-popover .fc-header,
-.fc-unthemed .fc-list-heading td {
-	background: #eee;
-}
-
-.fc-unthemed .fc-popover .fc-header .fc-close {
-	color: #666;
-}
-
-.fc-unthemed td.fc-today {
-	background: #fcf8e3;
-}
-
-.fc-unthemed .fc-disabled-day {
-	background: #d7d7d7;
-	opacity: .3;
-}
-
-
-/* Icons (inline elements with styled text that mock arrow icons)
---------------------------------------------------------------------------------------------------*/
-
-.fc-icon {
-	display: inline-block;
-	height: 1em;
-	line-height: 1em;
-	font-size: 1em;
-	text-align: center;
-	overflow: hidden;
-	font-family: "Courier New", Courier, monospace;
-
-	/* don't allow browser text-selection */
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-/*
-Acceptable font-family overrides for individual icons:
-	"Arial", sans-serif
-	"Times New Roman", serif
-
-NOTE: use percentage font sizes or else old IE chokes
-*/
-
-.fc-icon:after {
-	position: relative;
-}
-
-.fc-icon-left-single-arrow:after {
-	content: "\02039";
-	font-weight: bold;
-	font-size: 200%;
-	top: -7%;
-}
-
-.fc-icon-right-single-arrow:after {
-	content: "\0203A";
-	font-weight: bold;
-	font-size: 200%;
-	top: -7%;
-}
-
-.fc-icon-left-double-arrow:after {
-	content: "\000AB";
-	font-size: 160%;
-	top: -7%;
-}
-
-.fc-icon-right-double-arrow:after {
-	content: "\000BB";
-	font-size: 160%;
-	top: -7%;
-}
-
-.fc-icon-left-triangle:after {
-	content: "\25C4";
-	font-size: 125%;
-	top: 3%;
-}
-
-.fc-icon-right-triangle:after {
-	content: "\25BA";
-	font-size: 125%;
-	top: 3%;
-}
-
-.fc-icon-down-triangle:after {
-	content: "\25BC";
-	font-size: 125%;
-	top: 2%;
-}
-
-.fc-icon-x:after {
-	content: "\000D7";
-	font-size: 200%;
-	top: 6%;
-}
-
-
-/* Popover
---------------------------------------------------------------------------------------------------*/
-
-.fc-unthemed .fc-popover {
-	border-width: 1px;
-	border-style: solid;
-}
-
-.fc-unthemed .fc-popover .fc-header .fc-close {
-	font-size: .9em;
-	margin-top: 2px;
-}
-
-
-/* List View
---------------------------------------------------------------------------------------------------*/
-
-.fc-unthemed .fc-list-item:hover td {
-	background-color: #f5f5f5;
-}
-
-
-
-/* Colors
---------------------------------------------------------------------------------------------------*/
-
-.ui-widget .fc-disabled-day {
-	background-image: none;
-}
-
-
-/* Popover
---------------------------------------------------------------------------------------------------*/
-
-.fc-popover > .ui-widget-header + .ui-widget-content {
-	border-top: 0; /* where they meet, let the header have the border */
-}
-
-
-/* Global Event Styles
---------------------------------------------------------------------------------------------------*/
-
-.ui-widget .fc-event {
-	/* overpower jqui's styles on <a> tags. TODO: more DRY */
-	color: #fff; /* default TEXT color */
-	text-decoration: none; /* if <a> has an href */
-
-	/* undo ui-widget-header bold */
-	font-weight: normal;
-}
-
-
-/* TimeGrid axis running down the side (for both the all-day area and the slot area)
---------------------------------------------------------------------------------------------------*/
-
-.ui-widget td.fc-axis {
-	font-weight: normal; /* overcome bold */
-}
-
-
-/* TimeGrid Slats (lines that run horizontally)
---------------------------------------------------------------------------------------------------*/
-
-.fc-time-grid .fc-slats .ui-widget-content { 
-	background: none; /* see through to fc-bg */
-}
-
-
-
-.fc.fc-bootstrap3 a {
-	text-decoration: none;
-}
-
-.fc.fc-bootstrap3 a[data-goto]:hover {
-	text-decoration: underline;
-}
-
-.fc-bootstrap3 hr.fc-divider {
-	border-color: inherit;
-}
-
-.fc-bootstrap3 .fc-today.alert {
-	border-radius: 0;
-}
-
-
-/* Popover
---------------------------------------------------------------------------------------------------*/
-
-.fc-bootstrap3 .fc-popover .panel-body {
-	padding: 0; /* undo built-in padding */
-}
-
-
-/* TimeGrid Slats (lines that run horizontally)
---------------------------------------------------------------------------------------------------*/
-
-.fc-bootstrap3 .fc-time-grid .fc-slats table {
-	/* some themes have background color. see through to slats */
-	background: none;
-}
-
-
-
-/* Toolbar
---------------------------------------------------------------------------------------------------*/
-
-.fc-toolbar {
-	text-align: center;
-}
-
-.fc-toolbar.fc-header-toolbar {
-	margin-bottom: 1em;
-}
-
-.fc-toolbar.fc-footer-toolbar {
-	margin-top: 1em;
-}
-
-.fc-toolbar .fc-left {
-	float: left;
-}
-
-.fc-toolbar .fc-right {
-	float: right;
-}
-
-.fc-toolbar .fc-center {
-	display: inline-block;
-}
-
-/* the things within each left/right/center section */
-.fc .fc-toolbar > * > * { /* extra precedence to override button border margins */
-	float: left;
-	margin-left: .75em;
-}
-
-/* the first thing within each left/center/right section */
-.fc .fc-toolbar > * > :first-child { /* extra precedence to override button border margins */
-	margin-left: 0;
-}
-	
-/* title text */
-
-.fc-toolbar h2 {
-	margin: 0;
-}
-
-/* button layering (for border precedence) */
-
-.fc-toolbar button {
-	position: relative;
-}
-
-.fc-toolbar .fc-state-hover,
-.fc-toolbar .ui-state-hover {
-	z-index: 2;
-}
-	
-.fc-toolbar .fc-state-down {
-	z-index: 3;
-}
-
-.fc-toolbar .fc-state-active,
-.fc-toolbar .ui-state-active {
-	z-index: 4;
-}
-
-.fc-toolbar button:focus {
-	z-index: 5;
-}
-
-
-/* View Structure
---------------------------------------------------------------------------------------------------*/
-
-/* undo twitter bootstrap's box-sizing rules. normalizes positioning techniques */
-/* don't do this for the toolbar because we'll want bootstrap to style those buttons as some pt */
-.fc-view-container *,
-.fc-view-container *:before,
-.fc-view-container *:after {
-	-webkit-box-sizing: content-box;
-	   -moz-box-sizing: content-box;
-	        box-sizing: content-box;
-}
-
-.fc-view, /* scope positioning and z-index's for everything within the view */
-.fc-view > table { /* so dragged elements can be above the view's main element */
-	position: relative;
-	z-index: 1;
-}
-
-
-
-/* BasicView
---------------------------------------------------------------------------------------------------*/
-
-/* day row structure */
-
-.fc-basicWeek-view .fc-content-skeleton,
-.fc-basicDay-view .fc-content-skeleton {
-	/* there may be week numbers in these views, so no padding-top */
-	padding-bottom: 1em; /* ensure a space at bottom of cell for user selecting/clicking */
-}
-
-.fc-basic-view .fc-body .fc-row {
-	min-height: 4em; /* ensure that all rows are at least this tall */
-}
-
-/* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */
-
-.fc-row.fc-rigid {
-	overflow: hidden;
-}
-
-.fc-row.fc-rigid .fc-content-skeleton {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-}
-
-/* week and day number styling */
-
-.fc-day-top.fc-other-month {
-	opacity: 0.3;
-}
-
-.fc-basic-view .fc-week-number,
-.fc-basic-view .fc-day-number {
-	padding: 2px;
-}
-
-.fc-basic-view th.fc-week-number,
-.fc-basic-view th.fc-day-number {
-	padding: 0 2px; /* column headers can't have as much v space */
-}
-
-.fc-ltr .fc-basic-view .fc-day-top .fc-day-number { float: right; }
-.fc-rtl .fc-basic-view .fc-day-top .fc-day-number { float: left; }
-
-.fc-ltr .fc-basic-view .fc-day-top .fc-week-number { float: left; border-radius: 0 0 3px 0; }
-.fc-rtl .fc-basic-view .fc-day-top .fc-week-number { float: right; border-radius: 0 0 0 3px; }
-
-.fc-basic-view .fc-day-top .fc-week-number {
-	min-width: 1.5em;
-	text-align: center;
-	background-color: #f2f2f2;
-	color: #808080;
-}
-
-/* when week/day number have own column */
-
-.fc-basic-view td.fc-week-number {
-	text-align: center;
-}
-
-.fc-basic-view td.fc-week-number > * {
-	/* work around the way we do column resizing and ensure a minimum width */
-	display: inline-block;
-	min-width: 1.25em;
-}
-
-
-/* AgendaView all-day area
---------------------------------------------------------------------------------------------------*/
-
-.fc-agenda-view .fc-day-grid {
-	position: relative;
-	z-index: 2; /* so the "more.." popover will be over the time grid */
-}
-
-.fc-agenda-view .fc-day-grid .fc-row {
-	min-height: 3em; /* all-day section will never get shorter than this */
-}
-
-.fc-agenda-view .fc-day-grid .fc-row .fc-content-skeleton {
-	padding-bottom: 1em; /* give space underneath events for clicking/selecting days */
-}
-
-
-/* TimeGrid axis running down the side (for both the all-day area and the slot area)
---------------------------------------------------------------------------------------------------*/
-
-.fc .fc-axis { /* .fc to overcome default cell styles */
-	vertical-align: middle;
-	padding: 0 4px;
-	white-space: nowrap;
-}
-
-.fc-ltr .fc-axis {
-	text-align: right;
-}
-
-.fc-rtl .fc-axis {
-	text-align: left;
-}
-
-
-/* TimeGrid Structure
---------------------------------------------------------------------------------------------------*/
-
-.fc-time-grid-container, /* so scroll container's z-index is below all-day */
-.fc-time-grid { /* so slats/bg/content/etc positions get scoped within here */
-	position: relative;
-	z-index: 1;
-}
-
-.fc-time-grid {
-	min-height: 100%; /* so if height setting is 'auto', .fc-bg stretches to fill height */
-}
-
-.fc-time-grid table { /* don't put outer borders on slats/bg/content/etc */
-	border: 0 hidden transparent;
-}
-
-.fc-time-grid > .fc-bg {
-	z-index: 1;
-}
-
-.fc-time-grid .fc-slats,
-.fc-time-grid > hr { /* the <hr> AgendaView injects when grid is shorter than scroller */
-	position: relative;
-	z-index: 2;
-}
-
-.fc-time-grid .fc-content-col {
-	position: relative; /* because now-indicator lives directly inside */
-}
-
-.fc-time-grid .fc-content-skeleton {
-	position: absolute;
-	z-index: 3;
-	top: 0;
-	left: 0;
-	right: 0;
-}
-
-/* divs within a cell within the fc-content-skeleton */
-
-.fc-time-grid .fc-business-container {
-	position: relative;
-	z-index: 1;
-}
-
-.fc-time-grid .fc-bgevent-container {
-	position: relative;
-	z-index: 2;
-}
-
-.fc-time-grid .fc-highlight-container {
-	position: relative;
-	z-index: 3;
-}
-
-.fc-time-grid .fc-event-container {
-	position: relative;
-	z-index: 4;
-}
-
-.fc-time-grid .fc-now-indicator-line {
-	z-index: 5;
-}
-
-.fc-time-grid .fc-helper-container { /* also is fc-event-container */
-	position: relative;
-	z-index: 6;
-}
-
-
-/* TimeGrid Slats (lines that run horizontally)
---------------------------------------------------------------------------------------------------*/
-
-.fc-time-grid .fc-slats td {
-	height: 1.5em;
-	border-bottom: 0; /* each cell is responsible for its top border */
-}
-
-.fc-time-grid .fc-slats .fc-minor td {
-	border-top-style: dotted;
-}
-
-
-/* TimeGrid Highlighting Slots
---------------------------------------------------------------------------------------------------*/
-
-.fc-time-grid .fc-highlight-container { /* a div within a cell within the fc-highlight-skeleton */
-	position: relative; /* scopes the left/right of the fc-highlight to be in the column */
-}
-
-.fc-time-grid .fc-highlight {
-	position: absolute;
-	left: 0;
-	right: 0;
-	/* top and bottom will be in by JS */
-}
-
-
-/* TimeGrid Event Containment
---------------------------------------------------------------------------------------------------*/
-
-.fc-ltr .fc-time-grid .fc-event-container { /* space on the sides of events for LTR (default) */
-	margin: 0 2.5% 0 2px;
-}
-
-.fc-rtl .fc-time-grid .fc-event-container { /* space on the sides of events for RTL */
-	margin: 0 2px 0 2.5%;
-}
-
-.fc-time-grid .fc-event,
-.fc-time-grid .fc-bgevent {
-	position: absolute;
-	z-index: 1; /* scope inner z-index's */
-}
-
-.fc-time-grid .fc-bgevent {
-	/* background events always span full width */
-	left: 0;
-	right: 0;
-}
-
-
-/* Generic Vertical Event
---------------------------------------------------------------------------------------------------*/
-
-.fc-v-event.fc-not-start { /* events that are continuing from another day */
-	/* replace space made by the top border with padding */
-	border-top-width: 0;
-	padding-top: 1px;
-
-	/* remove top rounded corners */
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
-}
-
-.fc-v-event.fc-not-end {
-	/* replace space made by the top border with padding */
-	border-bottom-width: 0;
-	padding-bottom: 1px;
-
-	/* remove bottom rounded corners */
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
-}
-
-
-/* TimeGrid Event Styling
-----------------------------------------------------------------------------------------------------
-We use the full "fc-time-grid-event" class instead of using descendants because the event won't
-be a descendant of the grid when it is being dragged.
-*/
-
-.fc-time-grid-event {
-	overflow: hidden; /* don't let the bg flow over rounded corners */
-}
-
-.fc-time-grid-event.fc-selected {
-	/* need to allow touch resizers to extend outside event's bounding box */
-	/* common fc-selected styles hide the fc-bg, so don't need this anyway */
-	overflow: visible;
-}
-
-.fc-time-grid-event.fc-selected .fc-bg {
-	display: none; /* hide semi-white background, to appear darker */
-}
-
-.fc-time-grid-event .fc-content {
-	overflow: hidden; /* for when .fc-selected */
-}
-
-.fc-time-grid-event .fc-time,
-.fc-time-grid-event .fc-title {
-	padding: 0 1px;
-}
-
-.fc-time-grid-event .fc-time {
-	font-size: .85em;
-	white-space: nowrap;
-}
-
-/* short mode, where time and title are on the same line */
-
-.fc-time-grid-event.fc-short .fc-content {
-	/* don't wrap to second line (now that contents will be inline) */
-	white-space: nowrap;
-}
-
-.fc-time-grid-event.fc-short .fc-time,
-.fc-time-grid-event.fc-short .fc-title {
-	/* put the time and title on the same line */
-	display: inline-block;
-	vertical-align: top;
-}
-
-.fc-time-grid-event.fc-short .fc-time span {
-	display: none; /* don't display the full time text... */
-}
-
-.fc-time-grid-event.fc-short .fc-time:before {
-	content: attr(data-start); /* ...instead, display only the start time */
-}
-
-.fc-time-grid-event.fc-short .fc-time:after {
-	content: "\000A0-\000A0"; /* seperate with a dash, wrapped in nbsp's */
-}
-
-.fc-time-grid-event.fc-short .fc-title {
-	font-size: .85em; /* make the title text the same size as the time */
-	padding: 0; /* undo padding from above */
-}
-
-/* resizer (cursor device) */
-
-.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer {
-	left: 0;
-	right: 0;
-	bottom: 0;
-	height: 8px;
-	overflow: hidden;
-	line-height: 8px;
-	font-size: 11px;
-	font-family: monospace;
-	text-align: center;
-	cursor: s-resize;
-}
-
-.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after {
-	content: "=";
-}
-
-/* resizer (touch device) */
-
-.fc-time-grid-event.fc-selected .fc-resizer {
-	/* 10x10 dot */
-	border-radius: 5px;
-	border-width: 1px;
-	width: 8px;
-	height: 8px;
-	border-style: solid;
-	border-color: inherit;
-	background: #fff;
-	/* horizontally center */
-	left: 50%;
-	margin-left: -5px;
-	/* center on the bottom edge */
-	bottom: -5px;
-}
-
-
-/* Now Indicator
---------------------------------------------------------------------------------------------------*/
-
-.fc-time-grid .fc-now-indicator-line {
-	border-top-width: 1px;
-	left: 0;
-	right: 0;
-}
-
-/* arrow on axis */
-
-.fc-time-grid .fc-now-indicator-arrow {
-	margin-top: -5px; /* vertically center on top coordinate */
-}
-
-.fc-ltr .fc-time-grid .fc-now-indicator-arrow {
-	left: 0;
-	/* triangle pointing right... */
-	border-width: 5px 0 5px 6px;
-	border-top-color: transparent;
-	border-bottom-color: transparent;
-}
-
-.fc-rtl .fc-time-grid .fc-now-indicator-arrow {
-	right: 0;
-	/* triangle pointing left... */
-	border-width: 5px 6px 5px 0;
-	border-top-color: transparent;
-	border-bottom-color: transparent;
-}
-
-
-
-/* List View
---------------------------------------------------------------------------------------------------*/
-
-/* possibly reusable */
-
-.fc-event-dot {
-	display: inline-block;
-	width: 10px;
-	height: 10px;
-	border-radius: 5px;
-}
-
-/* view wrapper */
-
-.fc-rtl .fc-list-view {
-	direction: rtl; /* unlike core views, leverage browser RTL */
-}
-
-.fc-list-view {
-	border-width: 1px;
-	border-style: solid;
-}
-
-/* table resets */
-
-.fc .fc-list-table {
-	table-layout: auto; /* for shrinkwrapping cell content */
-}
-
-.fc-list-table td {
-	border-width: 1px 0 0;
-	padding: 8px 14px;
-}
-
-.fc-list-table tr:first-child td {
-	border-top-width: 0;
-}
-
-/* day headings with the list */
-
-.fc-list-heading {
-	border-bottom-width: 1px;
-}
-
-.fc-list-heading td {
-	font-weight: bold;
-}
-
-.fc-ltr .fc-list-heading-main { float: left; }
-.fc-ltr .fc-list-heading-alt { float: right; }
-
-.fc-rtl .fc-list-heading-main { float: right; }
-.fc-rtl .fc-list-heading-alt { float: left; }
-
-/* event list items */
-
-.fc-list-item.fc-has-url {
-	cursor: pointer; /* whole row will be clickable */
-}
-
-.fc-list-item-marker,
-.fc-list-item-time {
-	white-space: nowrap;
-	width: 1px;
-}
-
-/* make the dot closer to the event title */
-.fc-ltr .fc-list-item-marker { padding-right: 0; }
-.fc-rtl .fc-list-item-marker { padding-left: 0; }
-
-.fc-list-item-title a {
-	/* every event title cell has an <a> tag */
-	text-decoration: none;
-	color: inherit;
-}
-
-.fc-list-item-title a[href]:hover {
-	/* hover effect only on titles with hrefs */
-	text-decoration: underline;
-}
-
-/* message when no events */
-
-.fc-list-empty-wrap2 {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-}
-
-.fc-list-empty-wrap1 {
-	width: 100%;
-	height: 100%;
-	display: table;
-}
-
-.fc-list-empty {
-	display: table-cell;
-	vertical-align: middle;
-	text-align: center;
-}
-
-.fc-unthemed .fc-list-empty { /* theme will provide own background */
-	background-color: #eee;
-}
diff --git a/client/modules/crm/css/fullcalendar.print.css b/client/modules/crm/css/fullcalendar.print.css
deleted file mode 100644
index 35c0e61b8b..0000000000
--- a/client/modules/crm/css/fullcalendar.print.css
+++ /dev/null
@@ -1,208 +0,0 @@
-/*!
- * FullCalendar v3.7.0 Print Stylesheet
- * Docs & License: https://fullcalendar.io/
- * (c) 2017 Adam Shaw
- */
-
-/*
- * Include this stylesheet on your page to get a more printer-friendly calendar.
- * When including this stylesheet, use the media='print' attribute of the <link> tag.
- * Make sure to include this stylesheet IN ADDITION to the regular fullcalendar.css.
- */
-
-.fc {
-	max-width: 100% !important;
-}
-
-
-/* Global Event Restyling
---------------------------------------------------------------------------------------------------*/
-
-.fc-event {
-	background: #fff !important;
-	color: #000 !important;
-	page-break-inside: avoid;
-}
-
-.fc-event .fc-resizer {
-	display: none;
-}
-
-
-/* Table & Day-Row Restyling
---------------------------------------------------------------------------------------------------*/
-
-.fc th,
-.fc td,
-.fc hr,
-.fc thead,
-.fc tbody,
-.fc-row {
-	border-color: #ccc !important;
-	background: #fff !important;
-}
-
-/* kill the overlaid, absolutely-positioned components */
-/* common... */
-.fc-bg,
-.fc-bgevent-skeleton,
-.fc-highlight-skeleton,
-.fc-helper-skeleton,
-/* for timegrid. within cells within table skeletons... */
-.fc-bgevent-container,
-.fc-business-container,
-.fc-highlight-container,
-.fc-helper-container {
-	display: none;
-}
-
-/* don't force a min-height on rows (for DayGrid) */
-.fc tbody .fc-row {
-	height: auto !important; /* undo height that JS set in distributeHeight */
-	min-height: 0 !important; /* undo the min-height from each view's specific stylesheet */
-}
-
-.fc tbody .fc-row .fc-content-skeleton {
-	position: static; /* undo .fc-rigid */
-	padding-bottom: 0 !important; /* use a more border-friendly method for this... */
-}
-
-.fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td { /* only works in newer browsers */
-	padding-bottom: 1em; /* ...gives space within the skeleton. also ensures min height in a way */
-}
-
-.fc tbody .fc-row .fc-content-skeleton table {
-	/* provides a min-height for the row, but only effective for IE, which exaggerates this value,
-	   making it look more like 3em. for other browers, it will already be this tall */
-	height: 1em;
-}
-
-
-/* Undo month-view event limiting. Display all events and hide the "more" links
---------------------------------------------------------------------------------------------------*/
-
-.fc-more-cell,
-.fc-more {
-	display: none !important;
-}
-
-.fc tr.fc-limited {
-	display: table-row !important;
-}
-
-.fc td.fc-limited {
-	display: table-cell !important;
-}
-
-.fc-popover {
-	display: none; /* never display the "more.." popover in print mode */
-}
-
-
-/* TimeGrid Restyling
---------------------------------------------------------------------------------------------------*/
-
-/* undo the min-height 100% trick used to fill the container's height */
-.fc-time-grid {
-	min-height: 0 !important;
-}
-
-/* don't display the side axis at all ("all-day" and time cells) */
-.fc-agenda-view .fc-axis {
-	display: none;
-}
-
-/* don't display the horizontal lines */
-.fc-slats,
-.fc-time-grid hr { /* this hr is used when height is underused and needs to be filled */
-	display: none !important; /* important overrides inline declaration */
-}
-
-/* let the container that holds the events be naturally positioned and create real height */
-.fc-time-grid .fc-content-skeleton {
-	position: static;
-}
-
-/* in case there are no events, we still want some height */
-.fc-time-grid .fc-content-skeleton table {
-	height: 4em;
-}
-
-/* kill the horizontal spacing made by the event container. event margins will be done below */
-.fc-time-grid .fc-event-container {
-	margin: 0 !important;
-}
-
-
-/* TimeGrid *Event* Restyling
---------------------------------------------------------------------------------------------------*/
-
-/* naturally position events, vertically stacking them */
-.fc-time-grid .fc-event {
-	position: static !important;
-	margin: 3px 2px !important;
-}
-
-/* for events that continue to a future day, give the bottom border back */
-.fc-time-grid .fc-event.fc-not-end {
-	border-bottom-width: 1px !important;
-}
-
-/* indicate the event continues via "..." text */
-.fc-time-grid .fc-event.fc-not-end:after {
-	content: "...";
-}
-
-/* for events that are continuations from previous days, give the top border back */
-.fc-time-grid .fc-event.fc-not-start {
-	border-top-width: 1px !important;
-}
-
-/* indicate the event is a continuation via "..." text */
-.fc-time-grid .fc-event.fc-not-start:before {
-	content: "...";
-}
-
-/* time */
-
-/* undo a previous declaration and let the time text span to a second line */
-.fc-time-grid .fc-event .fc-time {
-	white-space: normal !important;
-}
-
-/* hide the the time that is normally displayed... */
-.fc-time-grid .fc-event .fc-time span {
-	display: none;
-}
-
-/* ...replace it with a more verbose version (includes AM/PM) stored in an html attribute */
-.fc-time-grid .fc-event .fc-time:after {
-	content: attr(data-full);
-}
-
-
-/* Vertical Scroller & Containers
---------------------------------------------------------------------------------------------------*/
-
-/* kill the scrollbars and allow natural height */
-.fc-scroller,
-.fc-day-grid-container,    /* these divs might be assigned height, which we need to cleared */
-.fc-time-grid-container {  /* */
-	overflow: visible !important;
-	height: auto !important;
-}
-
-/* kill the horizontal border/padding used to compensate for scrollbars */
-.fc-row {
-	border: 0 !important;
-	margin: 0 !important;
-}
-
-
-/* Button Controls
---------------------------------------------------------------------------------------------------*/
-
-.fc-button-group,
-.fc button {
-	display: none; /* don't display any button-related controls */
-}
diff --git a/client/modules/crm/res/templates/calendar/calendar.tpl b/client/modules/crm/res/templates/calendar/calendar.tpl
index 60b00722ac..e9b13a2d82 100644
--- a/client/modules/crm/res/templates/calendar/calendar.tpl
+++ b/client/modules/crm/res/templates/calendar/calendar.tpl
@@ -1,6 +1,3 @@
-<link href="{{basePath}}client/modules/crm/css/fullcalendar.css" rel="stylesheet">
-<link href="{{basePath}}client/modules/crm/css/fullcalendar.print.css" rel="stylesheet" media="print">
-
 {{#if header}}
 <div class="row button-container">
     <div class="col-sm-4 col-xs-5">
diff --git a/client/modules/crm/src/views/calendar/calendar.js b/client/modules/crm/src/views/calendar/calendar.js
index 380352f3f4..a283cada1f 100644
--- a/client/modules/crm/src/views/calendar/calendar.js
+++ b/client/modules/crm/src/views/calendar/calendar.js
@@ -28,8 +28,11 @@
 
 import View from 'view';
 import moment from 'moment';
-// noinspection ES6UnusedImports
-import FullCalendar from 'lib!fullcalendar';
+import * as FullCalendar from 'fullcalendar';
+
+/**
+ * @typedef {import('@fullcalendar/core/internal-common.js').EventImpl} EventImpl
+ */
 
 class CalendarView extends View {
 
@@ -60,6 +63,31 @@ class CalendarView extends View {
     /** @private */
     fetching = false
 
+    modeViewMap = {
+        month: 'dayGridMonth',
+        agendaWeek: 'timeGridWeek',
+        agendaDay: 'timeGridDay',
+        basicWeek: 'dayGridWeek',
+        basicDay: 'dayGridDay',
+        listWeek: 'listWeek',
+    }
+
+    extendedProps = [
+        'scope',
+        'recordId',
+        'dateStart',
+        'dateEnd',
+        'dateStartDate',
+        'dateEndDate',
+        'status',
+        'originalColor',
+        'duration',
+        'allDayCopy',
+    ]
+
+    /** @type {FullCalendar.Calendar} */
+    calendar
+
     events = {
         /** @this CalendarView */
         'click button[data-action="prev"]': function () {
@@ -114,6 +142,14 @@ class CalendarView extends View {
     }
 
     setup() {
+        this.wait(
+            Espo.loader.requirePromise('lib!fullcalendar-moment')
+        );
+
+        this.wait(
+            Espo.loader.requirePromise('lib!fullcalendar-moment-timezone')
+        );
+
         this.date = this.options.date || null;
         this.mode = this.options.mode || this.defaultMode;
         this.header = ('header' in this.options) ? this.options.header : this.header;
@@ -134,8 +170,6 @@ class CalendarView extends View {
 
         this.colors = {...this.colors, ...this.getHelper().themeManager.getParam('calendarColors')};
 
-        //this.scopeFilter = false;
-
         this.isCustomViewAvailable = this.getAcl().getPermissionLevel('userPermission') !== 'no';
 
         if (this.options.userId) {
@@ -237,7 +271,7 @@ class CalendarView extends View {
             this.$el.find('[data-action="mode"]').removeClass('active');
             this.$el.find('[data-mode="' + mode + '"]').addClass('active');
 
-            this.$calendar.fullCalendar('changeView', this.viewMode);
+            this.calendar.changeView(this.modeViewMap[this.viewMode]);
 
             let toAgenda = previousMode.indexOf('agenda') !== 0 && mode.indexOf('agenda') === 0;
             let fromAgenda = previousMode.indexOf('agenda') === 0 && mode.indexOf('agenda') !== 0;
@@ -246,7 +280,7 @@ class CalendarView extends View {
                 toAgenda && !this.fetching ||
                 fromAgenda && !this.fetching
             ) {
-                this.$calendar.fullCalendar('refetchEvents')
+                this.calendar.refetchEvents();
             }
 
             this.updateDate();
@@ -271,7 +305,7 @@ class CalendarView extends View {
 
         this.storeEnabledScopeList(this.enabledScopeList);
 
-        this.$calendar.fullCalendar('refetchEvents');
+        this.calendar.refetchEvents();
     }
 
     getStoredEnabledScopeList() {
@@ -303,30 +337,36 @@ class CalendarView extends View {
     }
 
     isToday() {
-        let view = this.$calendar.fullCalendar('getView');
-        let today = moment();
+        let view = this.calendar.view;
 
-        return view.intervalStart.unix() <= today.unix() && today.unix() < view.intervalEnd.unix();
+        let todayUnix = moment().unix();
+        let startUnix = moment(view.activeStart).unix();
+        let endUnix = moment(view.activeStart).unix();
+
+        return startUnix <= todayUnix && todayUnix < endUnix;
     }
 
     getTitle() {
-        let view = this.$calendar.fullCalendar('getView');
+        let view = this.calendar.view;
 
         let map = {
-            'agendaWeek': 'week',
-            'agendaDay': 'day',
-            'basicWeek': 'week',
-            'basicDay': 'day',
+            timeGridWeek: 'week',
+            timeGridDay: 'day',
+            dayGridWeek: 'week',
+            dayGridDay: 'day',
+            dayGridMonth: 'month',
         };
 
-        let viewName = map[view.name] || view.name
+        let viewName = map[view.type] || view.type;
 
         let title;
 
+        let format = this.titleFormat[viewName];
+
         if (viewName === 'week') {
-            title = $.fullCalendar.formatRange(view.start, view.end, this.titleFormat[viewName], ' – ');
+            title = this.calendar.formatRange(view.currentStart, view.currentEnd, format);
         } else {
-            title = view.intervalStart.format(this.titleFormat[viewName]);
+            title = moment(view.currentStart).format(format);
         }
 
         if (this.options.userId && this.options.userName) {
@@ -338,9 +378,25 @@ class CalendarView extends View {
         return title;
     }
 
+    /**
+     * @param {Object.<string, *>} o
+     * @return {{
+     *     recordId,
+     *     dateStart?: string,
+     *     originalColor?: string,
+     *     scope?: string,
+     *     display: string,
+     *     id: string,
+     *     dateEnd?: string,
+     *     dateStartDate?: ?string,
+     *     title: string,
+     *     dateEndDate?: ?string,
+     *     status?: string,
+     * }}
+     */
     convertToFcEvent(o) {
         let event = {
-            title: o.name,
+            title: o.name || '',
             scope: o.scope,
             id: o.scope + '-' + o.id,
             recordId: o.id,
@@ -350,12 +406,12 @@ class CalendarView extends View {
             dateEndDate: o.dateEndDate,
             status: o.status,
             originalColor: o.color,
+            display: 'block',
         };
 
         if (o.isWorkingRange) {
-            event.rendering = 'inverse-background';
-            //event.display = 'inverse-background';
-
+            event.display = 'inverse-background';
+            event.groupId = 'nonWorking';
             event.color = this.colors['bg'];
         }
 
@@ -372,28 +428,35 @@ class CalendarView extends View {
             event[attr] = o[attr];
         });
 
+        let start;
+        let end;
+
         if (o.dateStart) {
-            if (!o.dateStartDate) {
-                event.start = this.getDateTime().toMoment(o.dateStart);
-            } else {
-                event.start = this.getDateTime().toMomentDate(o.dateStartDate);
-            }
+            start = !o.dateStartDate ?
+                this.getDateTime().toMoment(o.dateStart) :
+                this.getDateTime().toMomentDate(o.dateStartDate);
         }
 
         if (o.dateEnd) {
-            if (!o.dateEndDate) {
-                event.end = this.getDateTime().toMoment(o.dateEnd);
-            } else {
-                event.end = this.getDateTime().toMomentDate(o.dateEndDate);
+            end = !o.dateEndDate ?
+                this.getDateTime().toMoment(o.dateEnd) :
+                this.getDateTime().toMomentDate(o.dateEndDate);
+        }
+
+        if (end && start) {
+            event.duration = end.unix() - start.unix();
+
+            if (event.duration < 1800) {
+                end = start.clone().add(30, 'm');
             }
         }
 
-        if (event.end && event.start) {
-            event.duration = event.end.unix() - event.start.unix();
+        if (start) {
+            event.start = start.toISOString(true);
+        }
 
-            if (event.duration < 1800) {
-                event.end = event.start.clone().add(30, 'm');
-            }
+        if (end) {
+            event.end = end.toISOString(true);
         }
 
         event.allDay = false;
@@ -486,18 +549,34 @@ class CalendarView extends View {
     }
 
     handleAllDay(event, notInitial) {
-        if (~this.allDayScopeList.indexOf(event.scope)) {
+        let start = event.start ? moment(event.start) : null;
+        let end = event.end ? moment(event.end) : null;
+
+        if (this.allDayScopeList.includes(event.scope)) {
             event.allDay = event.allDayCopy = true;
 
             if (!notInitial) {
-                if (event.end) {
-                    event.start = event.end;
-                    if (!event.dateEndDate && event.end.hours() === 0 && event.end.minutes() === 0) {
-                        event.start.add(-1, 'days');
+                if (end) {
+                    start = end;
+
+                    if (
+                        !event.dateEndDate &&
+                        end.hours() === 0 &&
+                        end.minutes() === 0
+                    ) {
+                        start.add(-1, 'days');
                     }
                 }
             }
 
+            if (start) {
+                event.start = start.toDate();
+            }
+
+            if (end) {
+                event.end = end.toDate();
+            }
+
             return;
         }
 
@@ -506,31 +585,39 @@ class CalendarView extends View {
             event.allDayCopy = event.allDay;
 
             if (!notInitial) {
-                event.end.add(1, 'days')
+                end.add(1, 'days')
+            }
+
+            if (start) {
+                event.start = start.toDate();
+            }
+
+            if (end) {
+                event.end = end.toDate();
             }
 
             return;
         }
 
-        if (!event.start || !event.end) {
+        if (!start || !end) {
             event.allDay = true;
 
-            if (event.end) {
-                event.start = event.end;
+            if (end) {
+                start = end;
             }
         } else {
             if (
                 (
-                    event.start.format('d') !== event.end.format('d') &&
-                    (event.end.hours() !== 0 || event.end.minutes() !== 0)
+                    start.format('d') !== end.format('d') &&
+                    (end.hours() !== 0 || end.minutes() !== 0)
                 ) ||
-                (event.end.unix() - event.start.unix() >= 86400)
+                (end.unix() - start.unix() >= 86400)
             ) {
                 event.allDay = true;
 
                 if (!notInitial) {
-                    if (event.end.hours() !== 0 || event.end.minutes() !== 0) {
-                        event.end.add(1, 'days');
+                    if (end.hours() !== 0 || end.minutes() !== 0) {
+                        end.add(1, 'days');
                     }
                 }
             } else {
@@ -539,6 +626,14 @@ class CalendarView extends View {
         }
 
         event.allDayCopy = event.allDay;
+
+        if (start) {
+            event.start = start.toDate();
+        }
+
+        if (end) {
+            event.end = end.toDate();
+        }
     }
 
     convertToFcEvents(list) {
@@ -555,18 +650,17 @@ class CalendarView extends View {
         return events;
     }
 
-    convertTime(d) {
+    /**
+     * @param {string} date
+     * @return {string}
+     */
+    convertDateTime(date) {
         let format = this.getDateTime().internalDateTimeFormat;
         let timeZone = this.getDateTime().timeZone;
-        let string = d.format(format);
 
-        let m;
-
-        if (timeZone) {
-            m = moment.tz(string, format, timeZone).utc();
-        } else {
-            m = moment.utc(string, format);
-        }
+        let m = timeZone ?
+            moment.tz(date, null, timeZone).utc() :
+            moment.utc(date, null);
 
         return m.format(format) + ':00';
     }
@@ -586,7 +680,7 @@ class CalendarView extends View {
 
         let height = this.getCalculatedHeight();
 
-        this.$calendar.fullCalendar('option', 'contentHeight', height);
+        this.calendar.setOption('contentHeight', height);
     }
 
     afterRender() {
@@ -594,55 +688,67 @@ class CalendarView extends View {
             this.$container = $(this.options.containerSelector);
         }
 
-        let $calendar = this.$calendar = this.$el.find('div.calendar');
+        this.$calendar = this.$el.find('div.calendar');
 
         let slotDuration = '00:' + this.slotDuration + ':00';
         let timeFormat = this.getDateTime().timeFormat;
 
-        let slotLabelFormat;
+        let slotLabelFormat = timeFormat;
 
         if (~timeFormat.indexOf('a')) {
-            slotLabelFormat = 'h(:mm)a';
+            slotLabelFormat = 'h:mma';
         } else if (~timeFormat.indexOf('A')) {
-            slotLabelFormat = 'h(:mm)A';
-        } else {
-            slotLabelFormat = timeFormat;
+            slotLabelFormat = 'h:mmA';
         }
 
         let options = {
-            header: false,
+            headerToolbar: false,
             slotLabelFormat: slotLabelFormat,
-            timeFormat: timeFormat,
-            defaultView: this.viewMode,
+            eventTimeFormat: timeFormat,
+            initialView: this.modeViewMap[this.viewMode],
+            defaultRangeSeparator: ' – ',
             weekNumbers: true,
             weekNumberCalculation: 'ISO',
             editable: true,
             selectable: true,
-            selectHelper: true,
-            height: this.options.height || null,
+            selectMirror: true,
+            height: this.options.height || void 0,
             firstDay: this.getDateTime().weekStart,
             slotEventOverlap: true,
             slotDuration: slotDuration,
             snapDuration: this.slotDuration * 60 * 1000,
-            timezone: this.getDateTime().timeZone,
+            timeZone: this.getDateTime().timeZone,
             longPressDelay: 300,
-            //eventBackgroundColor: '#333',
             eventColor: this.colors[''],
             nowIndicator: true,
+            allDayText: '',
+            weekText: '',
+            views: {
+                week: {
+                    dayHeaderFormat: 'ddd DD',
+                },
+                day: {
+                    dayHeaderFormat: 'ddd DD',
+                },
+            },
             windowResize: () => {
                 this.adjustSize();
             },
-            select: (start, end) => {
-                let dateStart = this.convertTime(start);
-                let dateEnd = this.convertTime(end);
-                let allDay = !start.hasTime();
+            select: info => {
+                let start = info.startStr;
+                let end = info.endStr;
+
+                let allDay = info.allDay;
 
                 let dateEndDate = null;
                 let dateStartDate = null;
 
+                let dateStart = this.convertDateTime(start);
+                let dateEnd = this.convertDateTime(end);
+
                 if (allDay) {
-                    dateStartDate = start.format('YYYY-MM-DD');
-                    dateEndDate = end.clone().add(-1, 'days').format('YYYY-MM-DD');
+                    dateStartDate = moment(start).format('YYYY-MM-DD');
+                    dateEndDate = moment(end).clone().add(-1, 'days').format('YYYY-MM-DD');
                 }
 
                 this.createEvent({
@@ -653,17 +759,22 @@ class CalendarView extends View {
                     dateEndDate: dateEndDate,
                 })
 
-                $calendar.fullCalendar('unselect');
+                this.calendar.unselect();
             },
-            eventClick: event => {
-                Espo.Ui.notify(' ... ');
+            eventClick: info => {
+                const event = /** @type EventImpl */info.event;
 
-                let viewName = this.getMetadata().get(['clientDefs', event.scope, 'modalViews', 'detail']) ||
+                let scope = event.extendedProps.scope;
+                let recordId = event.extendedProps.recordId;
+
+                let viewName = this.getMetadata().get(['clientDefs', scope, 'modalViews', 'detail']) ||
                     'views/modals/detail';
 
+                Espo.Ui.notify(' ... ');
+
                 this.createView('quickView', viewName, {
-                    scope: event.scope,
-                    id: event.recordId,
+                    scope: scope,
+                    id: recordId,
                     removeDisabled: false,
                 }, view => {
                     view.render();
@@ -684,148 +795,155 @@ class CalendarView extends View {
                     });
                 });
             },
-            viewRender: () => {
-                let date = this.getDateTime().fromIso(this.$calendar.fullCalendar('getDate'));
-                let m = moment(this.$calendar.fullCalendar('getDate'));
+            datesSet: () => {
+                let date = this.getDateTime().fromIso(this.calendar.getDate().toISOString());
+                let m = moment(this.calendar.getDate());
 
                 this.date = date;
 
                 this.trigger('view', m.format('YYYY-MM-DD'), this.mode);
             },
-            events: (from, to, timezone, callback) => {
+            events: (info, callback) => {
                 let dateTimeFormat = this.getDateTime().internalDateTimeFormat;
 
-                let fromStr = from.format(dateTimeFormat);
-                let toStr = to.format(dateTimeFormat);
+                let from = moment.tz(info.startStr, info.timeZone);
+                let to = moment.tz(info.endStr, info.timeZone);
 
-                from = moment.tz(fromStr, timezone);
-                to = moment.tz(toStr, timezone);
-
-                fromStr = from.utc().format(dateTimeFormat);
-                toStr = to.utc().format(dateTimeFormat);
+                let fromStr = from.utc().format(dateTimeFormat);
+                let toStr = to.utc().format(dateTimeFormat);
 
                 this.fetchEvents(fromStr, toStr, callback);
             },
-            eventDrop: (event, delta, revertFunc) => {
-                if (event.start.hasTime()) {
-                    if (event.allDayCopy) {
-                        revertFunc();
+            eventDrop: info => {
+                let event = /** @type EventImpl */info.event;
+                let delta = info.delta;
 
-                        return;
-                    }
-                } else {
-                    if (!event.allDayCopy) {
-                        revertFunc();
+                const scope = event.extendedProps.scope;
 
-                        return;
-                    }
+                if (!event.allDay && event.extendedProps.allDayCopy) {
+                    info.revert();
+
+                    return;
                 }
 
+                if (event.allDay && !event.extendedProps.allDayCopy) {
+                    info.revert();
+
+                    return;
+                }
+
+                let start = event.start;
+                let end = event.end;
+
+                let dateStart = event.extendedProps.dateStart;
+                let dateEnd = event.extendedProps.dateEnd;
+                let dateStartDate = event.extendedProps.dateStartDate;
+                let dateEndDate = event.extendedProps.dateEndDate;
+
                 let attributes = {};
 
-                if (event.dateStart) {
-                    event.dateStart = this.convertTime(this.getDateTime().toMoment(event.dateStart).add(delta));
-                    attributes.dateStart = event.dateStart;
+                if (dateStart) {
+                    let dateString = this.getDateTime()
+                        .toMoment(dateStart)
+                        .add(delta)
+                        .format(this.getDateTime().internalDateTimeFormat);
+
+                    attributes.dateStart = this.convertDateTime(dateString);
                 }
 
-                if (event.dateEnd) {
-                    event.dateEnd = this.convertTime(this.getDateTime().toMoment(event.dateEnd).add(delta));
-                    attributes.dateEnd = event.dateEnd;
+                if (dateEnd) {
+                    let dateString = this.getDateTime()
+                        .toMoment(dateEnd)
+                        .add(delta)
+                        .format(this.getDateTime().internalDateTimeFormat);
+
+                    attributes.dateEnd = this.convertDateTime(dateString);
                 }
 
-                if (event.dateStartDate) {
-                    let d = this.getDateTime().toMomentDate(event.dateStartDate).add(delta);
+                if (dateStartDate) {
+                    let m = this.getDateTime().toMomentDate(dateStartDate).add(delta);
 
-                    event.dateStartDate = d.format(this.getDateTime().internalDateFormat);
-                    attributes.dateStartDate = event.dateStartDate;
+                    attributes.dateStartDate = m.format(this.getDateTime().internalDateFormat);
                 }
 
-                if (event.dateEndDate) {
-                    let d = this.getDateTime().toMomentDate(event.dateEndDate).add(delta);
+                if (dateEndDate) {
+                    let m = this.getDateTime().toMomentDate(dateEndDate).add(delta);
 
-                    event.dateEndDate = d.format(this.getDateTime().internalDateFormat);
-                    attributes.dateEndDate = event.dateEndDate;
+                    attributes.dateStartDate = m.format(this.getDateTime().internalDateFormat);
                 }
 
-                if (!event.end) {
-                    if (!~this.allDayScopeList.indexOf(event.scope)) {
-                        event.end = event.start.clone().add(event.duration, 's');
-                    }
+                let props = this.obtainPropsFromEvent(event);
+
+                if (!end && !this.allDayScopeList.includes(scope)) {
+                    props.end = moment.tz(start, null, this.getDateTime().timeZone)
+                        .clone()
+                        .add(event.extendedProps.duration, 's')
+                        .toDate();
                 }
 
-                event.allDay = false;
+                props.allDay = false;
 
-                this.handleAllDay(event, true);
-                this.fillColor(event);
+                this.handleAllDay(props, true);
+                this.fillColor(props);
 
                 Espo.Ui.notify(this.translate('saving', 'messages'));
 
-                this.getModelFactory().create(event.scope, (model) => {
-                    model.id = event.recordId;
+                this.getModelFactory().create(scope, model => {
+                    model.id = props.recordId;
 
-                    model
-                        .save(attributes, {patch: true})
+                    model.save(attributes, {patch: true})
                         .then(() => {
                             Espo.Ui.notify(false);
 
-                            this.$calendar.fullCalendar('updateEvent', event);
+                            this.applyPropsToEvent(event, props);
                         })
                         .catch(() => {
-                            revertFunc();
+                            info.revert();
                         });
                 });
             },
-            eventResize: (event, delta, revertFunc) => {
+            eventResize: info => {
+                let event = /** @type EventImpl */info.event;
+
                 let attributes = {
-                    dateEnd: this.convertTime(event.end),
+                    dateEnd: this.convertDateTime(event.endStr),
                 };
 
-                event.dateEnd = attributes.dateEnd;
-                event.duration = event.end.unix() - event.start.unix();
-
-                this.fillColor(event);
+                let duration = moment().tz(event.endStr).unix() - moment().tz(event.startStr).unix();
 
                 Espo.Ui.notify(this.translate('saving', 'messages'));
 
-                this.getModelFactory().create(event.scope, (model) => {
-                    model.id = event.recordId;
+                this.getModelFactory().create(event.extendedProps.scope, model => {
+                    model.id = event.extendedProps.recordId;
 
-                    model
-                        .save(attributes, {patch: true})
+                    model.save(attributes, {patch: true})
                         .then(() => {
                             Espo.Ui.notify(false);
 
-                            this.$calendar.fullCalendar('updateEvent', event);
+                            event.setExtendedProp('dateEnd', attributes.dateEnd);
+                            event.setExtendedProp('duration', duration);
                         })
                         .catch(() => {
-                            revertFunc();
+                            info.revert();
                         });
                 });
             },
-            allDayText: '',
-            firstHour: 8,
-            weekNumberTitle: '',
-            views: {
-                week: {
-                    columnFormat: 'ddd DD',
-                },
-                day: {
-                    columnFormat: 'ddd DD',
-                },
-            },
         };
 
         if (this.teamIdList) {
-            options.eventRender = (event, element) => {
-                let $el = $(element);
-                let $content = $el.find('.fc-content');
+            options.eventContent = arg => {
+                const event = /** @type {EventImpl} */arg.event;
 
-                if (!event.userIdList) {
-                    return;
-                }
+                console.log(arg);
 
-                event.userIdList.forEach(userId => {
-                    let userName = event.userNameMap[userId] || '';
+                let $content = $('<div>');
+
+                $content.append(
+                    $('<div>').text(event.title)
+                );
+
+                event.extendedProps.userIdList.forEach(userId => {
+                    let userName = event.extendedProps.userNameMap[userId] || '';
                     let avatarHtml = this.getHelper().getAvatarHtml(userId, 'small', 13);
 
                     if (avatarHtml) {
@@ -841,6 +959,8 @@ class CalendarView extends View {
 
                     $content.append($div);
                 });
+
+                return {html: $content.get(0).innerHTML};
             };
         }
 
@@ -851,13 +971,15 @@ class CalendarView extends View {
         }
 
         if (this.date) {
-            options.defaultDate = moment.utc(this.date);
+            options.initialDate = moment.utc(this.date).toDate();
         } else {
             this.$el.find('button[data-action="today"]').addClass('active');
         }
 
         setTimeout(() => {
-            $calendar.fullCalendar(options);
+            this.calendar = new FullCalendar.Calendar(this.$calendar.get(0), options);
+
+            this.calendar.render();
 
             this.updateDate();
 
@@ -964,48 +1086,105 @@ class CalendarView extends View {
 
         let event = this.convertToFcEvent(d);
 
-        this.$calendar.fullCalendar('renderEvent', event);
+        this.calendar.addEvent(event);
     }
 
     updateModel(model) {
         let eventId = model.name + '-' + model.id;
 
-        let events = this.$calendar.fullCalendar('clientEvents', eventId);
+        let event = this.calendar.getEventById(eventId);
 
-        if (!events.length) {
+        if (!event) {
             return;
         }
 
-        let event = events[0];
+        let attributes = model.getClonedAttributes();
 
-        let d = model.getClonedAttributes();
+        attributes.scope = model.name;
 
-        d.scope = model.name;
+        let data = this.convertToFcEvent(attributes);
 
-        let data = this.convertToFcEvent(d);
+        this.applyPropsToEvent(event, data);
+    }
+    /**
+     * @param {EventImpl} event
+     * @return Object.<string, *>
+     */
+    obtainPropsFromEvent(event) {
+        let props = {};
 
-        for (let key in data) {
-            event[key] = data[key];
+        for (let key in event.extendedProps) {
+            props[key] = event.extendedProps[key];
         }
 
-        this.$calendar.fullCalendar('updateEvent', event);
+        props.allDay = event.allDay;
+        props.start = event.start;
+        props.end = event.end;
+        props.title = event.title;
+        props.id = event.id;
+        props.color = event.color;
+
+        return props;
+    }
+
+    /**
+     * @param {EventImpl} event
+     * @param {Object.<string, *>} props
+     */
+    applyPropsToEvent(event, props) {
+        for (let key in props) {
+            let value = props[key];
+
+            if (key === 'start') {
+                event.setStart(value);
+
+                continue;
+            }
+
+            if (key === 'end') {
+                event.setEnd(value);
+
+                continue;
+            }
+            if (key === 'allDay') {
+                event.setAllDay(value);
+
+                continue;
+            }
+
+            if (this.extendedProps.includes(key)) {
+                event.setExtendedProp(key, value);
+
+                continue;
+            }
+
+            event.setProp(key, value);
+        }
     }
 
     removeModel(model) {
-        this.$calendar.fullCalendar('removeEvents', model.name + '-' + model.id);
+        let event = this.calendar.getEventById(model.name + '-' + model.id);
+
+        if (!event) {
+            return;
+        }
+
+        event.remove();
     }
 
     actionRefresh() {
-        this.$calendar.fullCalendar('refetchEvents');
+        this.calendar.refetchEvents();
     }
 
     actionPrevious() {
-        this.$calendar.fullCalendar('prev');
+        this.calendar.prev();
+
         this.updateDate();
     }
 
     actionNext() {
-        this.$calendar.fullCalendar('next');
+        this.calendar.next();
+
         this.updateDate();
     }
 
@@ -1050,7 +1229,8 @@ class CalendarView extends View {
             return;
         }
 
-        this.$calendar.fullCalendar('today');
+        this.calendar.today();
+
         this.updateDate();
     }
 }
diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index 014665b127..4cc753b92b 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -2440,12 +2440,12 @@ table.table td.cell .html-container {
     .calendar {
         border-radius: var(--panel-border-radius);
 
-        .fc-view-container {
+        /*.fc-view-container {
             .fc-view > table {
                 border-collapse: collapse;
                 border-style: hidden;
             }
-        }
+        }*/
     }
 
     .timeline {
@@ -2455,13 +2455,14 @@ table.table td.cell .html-container {
 }
 
 .dashlet-body {
-    .fc-agenda-view {
+    .fc-daygrid,
+    .fc-timegrid {
         border-top: 1px solid var(--calendar-border);
 
-        table {
+        /*table {
             border-collapse: collapse;
             border-style: hidden;
-        }
+        }*/
     }
 }
 
diff --git a/frontend/less/espo/misc/fullcalendar/fullcalendar.less b/frontend/less/espo/misc/fullcalendar/fullcalendar.less
index ee56e0b57c..38ddebfbca 100644
--- a/frontend/less/espo/misc/fullcalendar/fullcalendar.less
+++ b/frontend/less/espo/misc/fullcalendar/fullcalendar.less
@@ -1,3 +1,10 @@
+:root {
+    --fc-neutral-bg-color: none;
+    --fc-now-indicator-color: var(--brand-danger);
+    --fc-border-color: var(--calendar-border);
+    --fc-today-bg-color: var(--calendar-today-bg);
+}
+
 .date-title {
     text-align: center !important;
     user-select: none;
@@ -7,159 +14,169 @@
     margin: 10px 0 0;
 }
 
-.fc-event.event-canceled .fc-content {
-    text-decoration: line-through !important;
-}
-
-.fc th {
-    font-weight: normal;
-}
-
-.fc-content > .user > .avatar {
-    position: relative;
-    top: -1px;
-}
-
-.fc-time-grid-event .fc-bg {
-    opacity: 0 !important;
-}
-
-.fc-state-default.fc-corner-left {
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-}
-
-.fc-state-default.fc-corner-right {
-    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-}
-
-.fc-event {
-    border-radius: var(--border-radius) !important;
-    background-color: none !important;
-}
-
 .dashlet-body div.calendar-container {
     height: 100% !important;
 }
 
-.fc-event {
-    min-height: 19px !important;
-}
-
-.fc-day-grid-event .fc-time {
-    font-weight: normal !important;
-}
-
-
-.fc-basic-view td.fc-week-number span, .fc-basic-view td.fc-day-number {
-    padding-top: 0 !important;
-}
-
-.fc-ltr .fc-basic-view .fc-day-top {
-    text-align: right !important;
-}
+//-----
 
 @media screen and (max-width: (@screen-sm-min - 1px)) {
-    .fc-view-container {
+    .fc {
         font-size: 85%;
     }
 }
 
-.fc-unthemed {
-    .fc-view-container {
-        td.fc-today {
-            background: var(--calendar-today-bg);
+.fc {
+    overflow: hidden;
+
+    th {
+        font-weight: normal;
+    }
+
+    .fc-event-main > .user > .avatar {
+        position: relative;
+        top: -1px;
+    }
+
+    .fc-col-header {
+        user-select: none;
+
+        .fc-event {
+            border-radius: var(--border-radius) !important;
+            min-height: 19px !important; // ?
         }
 
-        .fc-agenda-view .fc-time-grid-container {
-            td.fc-today {
-                background: transparent
+        a.fc-col-header-cell-cushion,
+        a.fc-timegrid-axis-cushion {
+            &,
+            &:hover {
+                text-decoration: none;
+                color: var(--text-color);
             }
         }
     }
-}
 
-.fc-unthemed th,
-.fc-unthemed td,
-.fc-unthemed thead,
-.fc-unthemed tbody,
-.fc-unthemed .fc-divider,
-.fc-unthemed .fc-row,
-.fc-unthemed .fc-content,
-.fc-unthemed .fc-popover,
-.fc-unthemed .fc-list-view,
-.fc-unthemed .fc-list-heading td {
-    border-color: var(--calendar-border) !important;
-}
-
-.fc-unthemed .fc-divider,
-.fc-unthemed .fc-popover .fc-header,
-.fc-unthemed .fc-list-heading td {
-    background: var(--calendar-border) !important;
-}
-
-.fc-unthemed {
-    .fc-event,
-    .fc-event:hover {
-        color: var(--text-white-color);
+    .fc-timegrid-now-indicator-container {
+        overflow: visible; // ?
     }
-}
 
-.fc-view-container .fc-bgevent {
-    opacity: 0.5;
-}
+    .fc-bg-event {
+        opacity: 0.5;
+    }
 
-.fc.fc-unthemed {
-    overflow: hidden;
-}
+    .fc-event-selected,
+    .fc-event:focus {
+        box-shadow: none;
 
-.fc-unthemed .fc-time-grid .fc-slats .fc-minor td {
-    //border-top-style: dashed;
-    border-top-style: none;
-}
+        &::after {
+            background: transparent;
+        }
+    }
 
-body .fc-now-indicator-arrow {
-    display: none;
-}
+    .fc-event.event-canceled {
+        &,
+        .fc-event-title,
+        .fc-event-main {
+            text-decoration: line-through !important;
+        }
+    }
 
-body .fc-now-indicator {
-    opacity: 0.9;
-}
+    .fc-daygrid-event,
+    .fc-timegrid-event,
+    .fc-timegrid-more-link {
+        border-radius: var(--border-radius);
+    }
 
-body .fc-content-col > .fc-now-indicator-line {
-    height: 1px;
-    border-top: 1px solid var(--brand-danger);
-    border-bottom-width: 0;
-    background-color: var(--brand-danger);
+    .fc-day-today.fc-timegrid-col {
+        background-color: transparent;
+    }
 
-    &:before {
-        content: "";
-        position: inherit;
-        left: -4px;
-        border-radius: 50%;
-        height: 8px;
-        width: 8px;
-        background-color: var(--brand-danger);
-        display: inline-block;
-        top: -4px;
+    .fc-day-today {
+        .fc-col-header-cell-cushion,
+        .fc-daygrid-day-number {
+            &,
+            &:hover {
+                color: var(--state-warning-text);
+            }
+        }
+    }
+
+    .fc-timegrid-now-indicator-line {
         opacity: 0.9;
+
+        height: 2px;
+        border-top: 1px solid var(--brand-danger);
+        border-bottom-width: 0;
+        background-color: var(--brand-danger);
+
+        &:before {
+            content: "";
+            position: inherit;
+            left: -4px;
+            border-radius: 50%;
+            height: 8px;
+            width: 8px;
+            background-color: var(--brand-danger);
+            display: inline-block;
+            top: -4px;
+            opacity: 0.9;
+        }
+    }
+
+    .fc-timegrid-now-indicator-arrow {
+        display: none;
+    }
+
+    .fc-timegrid-slot-minor {
+        border-top-style: none;
+    }
+
+    .fc-timegrid-slot-label-cushion,
+    a.fc-daygrid-day-number {
+        &,
+        &:hover {
+            color: var(--text-color);
+            text-decoration: none;
+            cursor: default;
+        }
+    }
+
+    a.fc-daygrid-week-number {
+        &,
+        &:hover {
+            color: var(--gray-soft);
+            text-decoration: none;
+            cursor: default;
+        }
+    }
+
+    border-style: none !important;
+
+    .fc-scrollgrid {
+        border: 0;
+
+        td:last-of-type {
+            border-right-color: transparent;
+            border-right-width: 0;
+        }
+    }
+
+    th[role='presentation'] {
+        border-right-color: transparent !important;
+        border-right-width: 0;
+    }
+
+    .fc-scrollgrid-section-body td[role='presentation'] {
+        border-bottom-color: transparent;
+        border-bottom-width: 0;
+    }
+
+    tr[role="presentation"]:first-child:not(:last-child) > td {
+        border-bottom: 1px solid var(--calendar-border);
+    }
+
+    [role='row']:last-of-type td {
+        border-bottom-color: transparent !important;
+        border-bottom-width: 0;
     }
 }
-
-.fc-today.fc-day-header > span,
-.fc-today > .fc-day-number {
-    color: var(--state-warning-text);
-}
-
-.fc-widget-header {
-    user-select: none;
-}
-
-.dashlet-body {
-    .fc-basicWeek-view td.fc-widget-content,
-    .fc-month-view .fc-body > tr > td.fc-widget-content {
-        border-bottom: 0;
-    }
-}
-
diff --git a/frontend/less/glass/custom.less b/frontend/less/glass/custom.less
index 13e99c7a87..6145eda7eb 100644
--- a/frontend/less/glass/custom.less
+++ b/frontend/less/glass/custom.less
@@ -189,11 +189,11 @@ select.form-control > option {
     }
 }
 
-.calendar {
+/*.calendar {
     td.fc-day-top.fc-today {
         background-color: transparent !important;
     }
-}
+}*/
 
 .popup-notification {
     border-width: 1px;
diff --git a/frontend/libs.json b/frontend/libs.json
index 0ca67e00d9..5db760c031 100644
--- a/frontend/libs.json
+++ b/frontend/libs.json
@@ -180,11 +180,23 @@
         "amdId": "ace"
     },
     {
-        "src": "node_modules/fullcalendar/dist/fullcalendar.js",
+        "src": "node_modules/fullcalendar/index.global.js",
         "dest": "client/modules/crm/lib/fullcalendar.js",
         "minify": true,
         "amdId": "fullcalendar"
     },
+    {
+        "src": "node_modules/@fullcalendar/moment/index.global.js",
+        "dest": "client/modules/crm/lib/fullcalendar-moment.js",
+        "minify": true,
+        "amdId": "fullcalendar-moment"
+    },
+    {
+        "src": "node_modules/@fullcalendar/moment-timezone/index.global.js",
+        "dest": "client/modules/crm/lib/fullcalendar-moment-timezone.js",
+        "minify": true,
+        "amdId": "fullcalendar-moment-timezone"
+    },
     {
         "src": "node_modules/vis/dist/vis.js",
         "dest": "client/modules/crm/lib/vis.js",
diff --git a/package-lock.json b/package-lock.json
index 2b8c731589..a3ba6ff61d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "hasInstallScript": true,
       "license": "GPL-3.0",
       "dependencies": {
+        "@fullcalendar/moment": "^6.1.8",
+        "@fullcalendar/moment-timezone": "^6.1.8",
         "ace-builds": "^1.4.12",
         "autobahn-espo": "github:yurikuzn/autobahn-espo#0.1.0",
         "autonumeric": "^4.6.0",
@@ -25,7 +27,7 @@
         "espo-funnel-chart": "github:yurikuzn/espo-funnel-chart#1.1.0",
         "exif-js": "^2.3.0",
         "flotr2": "github:yurikuzn/flotr2#0.1.3",
-        "fullcalendar": "^3.10.5",
+        "fullcalendar": "^6.1.8",
         "getobject": ">=1.0.0",
         "gridstack": "github:yurikuzn/gridstack.js#5.1.1.e3",
         "handlebars": "^4.7.7",
@@ -1915,6 +1917,78 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@fullcalendar/core": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.8.tgz",
+      "integrity": "sha512-i8JBIvZCWGO9dsMEDcx9bnsQZ9PtGSJdOXGgWbhLaGq2iq41OBdp9g9gM4b/Otv2oK8bL5Gl6CsMmb/HkDtA6Q==",
+      "dependencies": {
+        "preact": "~10.12.1"
+      }
+    },
+    "node_modules/@fullcalendar/daygrid": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.8.tgz",
+      "integrity": "sha512-kCZxQFKb9Vqa3CZRX0v7rMSJ2mlTt4gDpyLfiNJKxUAq7W51uKurPaFZWicaXy1ESHVBxKNlbx5uNjBpyu50JQ==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.8"
+      }
+    },
+    "node_modules/@fullcalendar/interaction": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.8.tgz",
+      "integrity": "sha512-r6W4E9ohaA87M2uPSlmpE2WT7Fzu7LN0u2pE6D/tThruCEaAPbN8Pw5+sqclsuyTIL09mg0eSJm/ggJekTabSA==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.8"
+      }
+    },
+    "node_modules/@fullcalendar/list": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.8.tgz",
+      "integrity": "sha512-10N0T/vCtId1cE3JGLpnbAivWVnaWCCkVO7wmbsyr5Y+I939kr/zq4BUNwBoP/xSFVVxx59FETh3iyA+MkV8Fw==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.8"
+      }
+    },
+    "node_modules/@fullcalendar/moment": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/moment/-/moment-6.1.8.tgz",
+      "integrity": "sha512-b/i8smze1msm7/Aoca7oJ9/JTRB9G1I08Qe5z+yTscvdgtWQY6QDGJHNU0h/91p4CO/uSNjg/bOEwIn8k8xqEA==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.8",
+        "moment": "^2.29.1"
+      }
+    },
+    "node_modules/@fullcalendar/moment-timezone": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/moment-timezone/-/moment-timezone-6.1.8.tgz",
+      "integrity": "sha512-YUQ6BQO9+aDnR3smJlElSCfcprtMhPbHe8FmTFjsU0UeQfjtlTdbbs+Clp2WFlbzZu1RjAGJW90PkFv9NBoNIw==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.8",
+        "moment-timezone": "^0.5.40"
+      }
+    },
+    "node_modules/@fullcalendar/multimonth": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/multimonth/-/multimonth-6.1.8.tgz",
+      "integrity": "sha512-3F0NlncQTfeE9x5ICxh/M9DaSdY6XjgM1NazY8k+d6ukd1jthHI7vs6j7tXJI9eGUKs3DNNEyzN/LoP06SIyKw==",
+      "dependencies": {
+        "@fullcalendar/daygrid": "~6.1.8"
+      },
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.8"
+      }
+    },
+    "node_modules/@fullcalendar/timegrid": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.8.tgz",
+      "integrity": "sha512-3+3KHHCoNcaLs/gQt004hAqICbY5+WAffrZ0ePv+80HFB1OVh8BQ5XXLHSOUbTvXdgtUTcfBHuw9fhO31kt5gA==",
+      "dependencies": {
+        "@fullcalendar/daygrid": "~6.1.8"
+      },
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.8"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -3534,12 +3608,16 @@
       }
     },
     "node_modules/fullcalendar": {
-      "version": "3.10.5",
-      "resolved": "https://registry.npmjs.org/fullcalendar/-/fullcalendar-3.10.5.tgz",
-      "integrity": "sha512-JGWpECKgza/344bbF5QT0hBJpx04DZ/7QGPlR1ZbAwrG6Yz6mWEkQd+NnZUh1sK6HCBIPnPRW2x53aJxeLGvvQ==",
-      "peerDependencies": {
-        "jquery": "2 - 3",
-        "moment": "^2.20.1"
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/fullcalendar/-/fullcalendar-6.1.8.tgz",
+      "integrity": "sha512-cbIdnInHVjj3fWqGgurbRuo8EFViVcEKpI2NZpGkzaqpnvN0p1ifKyQ9qnSGS2bKr7733z8Tv8T+CRXfnEWVmw==",
+      "dependencies": {
+        "@fullcalendar/core": "~6.1.8",
+        "@fullcalendar/daygrid": "~6.1.8",
+        "@fullcalendar/interaction": "~6.1.8",
+        "@fullcalendar/list": "~6.1.8",
+        "@fullcalendar/multimonth": "~6.1.8",
+        "@fullcalendar/timegrid": "~6.1.8"
       }
     },
     "node_modules/function-bind": {
@@ -5917,6 +5995,15 @@
       "integrity": "sha512-sk96pUvpNwDV6PLrnhr68Uu1S5NohsxqLKz0GuracgrDo40BdF/r1RhHnjakUk6Q4Z0OKIybOQ7GevLKGN1iYw==",
       "dev": true
     },
+    "node_modules/preact": {
+      "version": "10.12.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
+      "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -8439,6 +8526,60 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fullcalendar/core": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.8.tgz",
+      "integrity": "sha512-i8JBIvZCWGO9dsMEDcx9bnsQZ9PtGSJdOXGgWbhLaGq2iq41OBdp9g9gM4b/Otv2oK8bL5Gl6CsMmb/HkDtA6Q==",
+      "requires": {
+        "preact": "~10.12.1"
+      }
+    },
+    "@fullcalendar/daygrid": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.8.tgz",
+      "integrity": "sha512-kCZxQFKb9Vqa3CZRX0v7rMSJ2mlTt4gDpyLfiNJKxUAq7W51uKurPaFZWicaXy1ESHVBxKNlbx5uNjBpyu50JQ==",
+      "requires": {}
+    },
+    "@fullcalendar/interaction": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.8.tgz",
+      "integrity": "sha512-r6W4E9ohaA87M2uPSlmpE2WT7Fzu7LN0u2pE6D/tThruCEaAPbN8Pw5+sqclsuyTIL09mg0eSJm/ggJekTabSA==",
+      "requires": {}
+    },
+    "@fullcalendar/list": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.8.tgz",
+      "integrity": "sha512-10N0T/vCtId1cE3JGLpnbAivWVnaWCCkVO7wmbsyr5Y+I939kr/zq4BUNwBoP/xSFVVxx59FETh3iyA+MkV8Fw==",
+      "requires": {}
+    },
+    "@fullcalendar/moment": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/moment/-/moment-6.1.8.tgz",
+      "integrity": "sha512-b/i8smze1msm7/Aoca7oJ9/JTRB9G1I08Qe5z+yTscvdgtWQY6QDGJHNU0h/91p4CO/uSNjg/bOEwIn8k8xqEA==",
+      "requires": {}
+    },
+    "@fullcalendar/moment-timezone": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/moment-timezone/-/moment-timezone-6.1.8.tgz",
+      "integrity": "sha512-YUQ6BQO9+aDnR3smJlElSCfcprtMhPbHe8FmTFjsU0UeQfjtlTdbbs+Clp2WFlbzZu1RjAGJW90PkFv9NBoNIw==",
+      "requires": {}
+    },
+    "@fullcalendar/multimonth": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/multimonth/-/multimonth-6.1.8.tgz",
+      "integrity": "sha512-3F0NlncQTfeE9x5ICxh/M9DaSdY6XjgM1NazY8k+d6ukd1jthHI7vs6j7tXJI9eGUKs3DNNEyzN/LoP06SIyKw==",
+      "requires": {
+        "@fullcalendar/daygrid": "~6.1.8"
+      }
+    },
+    "@fullcalendar/timegrid": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.8.tgz",
+      "integrity": "sha512-3+3KHHCoNcaLs/gQt004hAqICbY5+WAffrZ0ePv+80HFB1OVh8BQ5XXLHSOUbTvXdgtUTcfBHuw9fhO31kt5gA==",
+      "requires": {
+        "@fullcalendar/daygrid": "~6.1.8"
+      }
+    },
     "@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -9685,10 +9826,17 @@
       }
     },
     "fullcalendar": {
-      "version": "3.10.5",
-      "resolved": "https://registry.npmjs.org/fullcalendar/-/fullcalendar-3.10.5.tgz",
-      "integrity": "sha512-JGWpECKgza/344bbF5QT0hBJpx04DZ/7QGPlR1ZbAwrG6Yz6mWEkQd+NnZUh1sK6HCBIPnPRW2x53aJxeLGvvQ==",
-      "requires": {}
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/fullcalendar/-/fullcalendar-6.1.8.tgz",
+      "integrity": "sha512-cbIdnInHVjj3fWqGgurbRuo8EFViVcEKpI2NZpGkzaqpnvN0p1ifKyQ9qnSGS2bKr7733z8Tv8T+CRXfnEWVmw==",
+      "requires": {
+        "@fullcalendar/core": "~6.1.8",
+        "@fullcalendar/daygrid": "~6.1.8",
+        "@fullcalendar/interaction": "~6.1.8",
+        "@fullcalendar/list": "~6.1.8",
+        "@fullcalendar/multimonth": "~6.1.8",
+        "@fullcalendar/timegrid": "~6.1.8"
+      }
     },
     "function-bind": {
       "version": "1.1.1",
@@ -11399,6 +11547,11 @@
       "integrity": "sha512-sk96pUvpNwDV6PLrnhr68Uu1S5NohsxqLKz0GuracgrDo40BdF/r1RhHnjakUk6Q4Z0OKIybOQ7GevLKGN1iYw==",
       "dev": true
     },
+    "preact": {
+      "version": "10.12.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
+      "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg=="
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/package.json b/package.json
index ff23a11763..28acb9495a 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,8 @@
     "tar": "^6.1.11"
   },
   "dependencies": {
+    "@fullcalendar/moment": "^6.1.8",
+    "@fullcalendar/moment-timezone": "^6.1.8",
     "ace-builds": "^1.4.12",
     "autobahn-espo": "github:yurikuzn/autobahn-espo#0.1.0",
     "autonumeric": "^4.6.0",
@@ -51,7 +53,7 @@
     "espo-funnel-chart": "github:yurikuzn/espo-funnel-chart#1.1.0",
     "exif-js": "^2.3.0",
     "flotr2": "github:yurikuzn/flotr2#0.1.3",
-    "fullcalendar": "^3.10.5",
+    "fullcalendar": "^6.1.8",
     "getobject": ">=1.0.0",
     "gridstack": "github:yurikuzn/gridstack.js#5.1.1.e3",
     "handlebars": "^4.7.7",