diff --git a/apps/common/main/lib/view/Calendar.js b/apps/common/main/lib/view/Calendar.js
new file mode 100644
index 000000000..7e433f35b
--- /dev/null
+++ b/apps/common/main/lib/view/Calendar.js
@@ -0,0 +1,292 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+*/
+/**
+ * Calendar.js
+ *
+ * Created by Julia Svinareva on 18/10/19
+ * Copyright (c) 2019 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+if (Common === undefined)
+ var Common = {};
+
+define([
+ 'common/main/lib/component/Window',
+ 'underscore'
+], function (base, _) {
+ 'use strict';
+
+ Common.Views.Calendar = Common.UI.Window.extend(_.extend({
+
+ // Window
+
+ initialize: function (options) {
+ var _options = {};
+
+ _.extend(_options, {
+ closable: false,
+ width: 192,
+ height: 214,
+ header: false,
+ modal: false,
+ alias: 'Common.Views.Calendar',
+ firstNumber: 0, // 0 or 6
+ cls: 'calendar-window'
+ }, options);
+
+ this.template = options.template || [
+ ''
+ ].join('');
+
+ this.monthNames = [this.textJanuary, this.textFebruary, this.textMarch, this.textApril, this.textMay, this.textJune, this.textJuly, this.textAugust, this.textSeptember, this.textOctober, this.textNovember, this.textDecember];
+ this.dayNamesShort = [this.textShortSunday, this.textShortMonday, this.textShortTuesday, this.textShortWednesday, this.textShortThursday, this.textShortFriday, this.textShortSaturday];
+
+
+
+ _options.tpl = _.template(this.template)(_options);
+
+ Common.UI.Window.prototype.initialize.call(this, _options);
+
+ return this;
+ },
+ render: function () {
+ Common.UI.Window.prototype.render.call(this);
+
+ var me = this,
+ window = this.$window;
+
+ window.css({
+ height: '',
+ minHeight: '',
+ overflow: 'hidden',
+ position: 'absolute',
+ zIndex: '990'
+ });
+
+ var body = window.find('.body');
+ if (body) {
+ body.css('position', 'relative');
+ }
+
+ me.btnPrev = new Common.UI.Button({
+ cls: 'btn-toolbar',
+ iconCls: 'mmerge-prev',
+ });
+ me.btnPrev.render(me.$window.find('#prev-arrow'));
+
+ me.btnNext = new Common.UI.Button({
+ cls: 'btn-toolbar',
+ iconCls: 'mmerge-next',
+ });
+ me.btnNext.render(me.$window.find('#next-arrow'));
+
+ me.topTitle = _.template([
+ '' + me.monthNames[0] + ' ',
+ '' + 2019 + ' '
+ ].join(''));
+ me.$window.find('.calendar-header .title').html(me.topTitle);
+
+ var dayNamesTemplate = '';
+ me.dayNamesShort.forEach(function (item) {
+ dayNamesTemplate += '' + item + ' ';
+ });
+ me.$window.find('.calendar-header .bottom-row').html(_.template(dayNamesTemplate));
+
+ },
+
+ getCalendarPopover: function (options) {
+ if (!this.popover)
+ this.popover = new Common.Views.Calendar(options);
+ return this.popover;
+ },
+
+ showCalendarPopover: function (animate, loadText, focus, showText) {
+ this.options.animate = animate;
+
+ Common.UI.Window.prototype.show.call(this);
+ if (this.scroller) {
+ this.scroller.update({minScrollbarLength: 40, alwaysVisibleY: true});
+ }
+ },
+
+ setLeftTop: function (posX, posY) {
+ if (!this.$window)
+ this.render();
+
+ if (_.isUndefined(posX) && _.isUndefined(posY))
+ return;
+
+ var calendarView = $('#id-popover'),
+ editorView = $('#editor_sdk'),
+ editorBounds = null,
+ sdkBoundsHeight = 0,
+ sdkBoundsTop = 0,
+ sdkBoundsLeft = 0,
+ sdkPanelRight = '',
+ sdkPanelRightWidth = 0,
+ sdkPanelLeft = '',
+ sdkPanelLeftWidth = 0,
+ sdkPanelThumbs = '', // for PE
+ sdkPanelThumbsWidth = 0, // for PE
+ sdkPanelTop = '',
+ sdkPanelHeight = 0,
+ leftPos = 0,
+ windowWidth = 0,
+ outerHeight = 0,
+ topPos = 0,
+ sdkBoundsTopPos = 0;
+
+ if (calendarView && editorView && editorView.get(0)) {
+ editorBounds = editorView.get(0).getBoundingClientRect();
+ if (editorBounds) {
+ //sdkBoundsHeight = editorBounds.height - this.sdkBounds.padding * 2;
+
+ this.$window.css({maxHeight: sdkBoundsHeight + 'px'});
+
+ //this.sdkBounds.width = editorBounds.width;
+ //this.sdkBounds.height = editorBounds.height;
+
+ // LEFT CORNER
+
+ if (!_.isUndefined(posX)) {
+
+ sdkPanelRight = $('#id_vertical_scroll');
+ if (sdkPanelRight.length) {
+ sdkPanelRightWidth = (sdkPanelRight.css('display') !== 'none') ? sdkPanelRight.width() : 0;
+ } else {
+ sdkPanelRight = $('#ws-v-scrollbar');
+ if (sdkPanelRight.length) {
+ sdkPanelRightWidth = (sdkPanelRight.css('display') !== 'none') ? sdkPanelRight.width() : 0;
+ }
+ }
+
+ //this.sdkBounds.width -= sdkPanelRightWidth;
+
+ sdkPanelLeft = $('#id_panel_left');
+ if (sdkPanelLeft.length) {
+ sdkPanelLeftWidth = (sdkPanelLeft.css('display') !== 'none') ? sdkPanelLeft.width() : 0;
+ }
+ sdkPanelThumbs = $('#id_panel_thumbnails');
+ if (sdkPanelThumbs.length) {
+ sdkPanelThumbsWidth = (sdkPanelThumbs.css('display') !== 'none') ? sdkPanelThumbs.width() : 0;
+ //this.sdkBounds.width -= sdkPanelThumbsWidth;
+ }
+
+ //leftPos = Math.min(sdkBoundsLeft + posX + this.arrow.width, sdkBoundsLeft + this.sdkBounds.width - this.$window.outerWidth() - 25);
+ leftPos = posX;
+ //leftPos = Math.max(sdkBoundsLeft + sdkPanelLeftWidth + this.arrow.width, leftPos);
+
+ /*if (!_.isUndefined(leftX)) {
+ windowWidth = this.$window.outerWidth();
+ if (windowWidth) {
+ if ((posX + windowWidth > this.sdkBounds.width - this.arrow.width + 5) && (this.leftX > windowWidth)) {
+ leftPos = this.leftX - windowWidth + sdkBoundsLeft - this.arrow.width;
+ arrowView.removeClass('left').addClass('right');
+ } else {
+ leftPos = sdkBoundsLeft + posX + this.arrow.width;
+ }
+ }
+ }*/
+
+ this.$window.css('left', leftPos + 'px');
+ }
+
+ // TOP CORNER
+
+ if (!_.isUndefined(posY)) {
+ /*sdkPanelTop = $('#id_panel_top');
+ sdkBoundsTopPos = sdkBoundsTop;
+ if (sdkPanelTop.length) {
+ sdkPanelHeight = (sdkPanelTop.css('display') !== 'none') ? sdkPanelTop.height() : 0;
+ sdkBoundsTopPos += this.sdkBounds.paddingTop;
+ } else {
+ sdkPanelTop = $('#ws-h-scrollbar');
+ if (sdkPanelTop.length) {
+ sdkPanelHeight = (sdkPanelTop.css('display') !== 'none') ? sdkPanelTop.height() : 0;
+ }
+ }*/
+
+ //this.sdkBounds.height -= sdkPanelHeight;
+
+ outerHeight = this.$window.outerHeight();
+
+ //topPos = Math.min(sdkBoundsTop + sdkBoundsHeight - outerHeight, this.arrowPosY + sdkBoundsTop - this.arrow.height);
+ topPos = posY;
+ //topPos = Math.max(topPos, sdkBoundsTopPos);
+
+ this.$window.css('top', topPos + 'px');
+ }
+ }
+ }
+ },
+
+ textJanuary: 'January',
+ textFebruary: 'February',
+ textMarch: 'March',
+ textApril: 'April',
+ textMay: 'May',
+ textJune: 'June',
+ textJuly: 'July',
+ textAugust: 'August',
+ textSeptember: 'September',
+ textOctober: 'October',
+ textNovember: 'November',
+ textDecember: 'December',
+ textShortSunday: 'Su',
+ textShortMonday: 'Mo',
+ textShortTuesday: 'Tu',
+ textShortWednesday: 'We',
+ textShortThursday: 'Th',
+ textShortFriday: 'Fr',
+ textShortSaturday: 'Sa'
+
+ }, Common.Views.Calendar || {}))
+});
\ No newline at end of file
diff --git a/apps/common/main/resources/less/calendar.less b/apps/common/main/resources/less/calendar.less
new file mode 100644
index 000000000..9ba98c372
--- /dev/null
+++ b/apps/common/main/resources/less/calendar.less
@@ -0,0 +1,49 @@
+@calendar-bg-color: #446995;
+
+.calendar-window {
+ border-radius: 0;
+ box-shadow: none;
+ border: 1px solid @calendar-bg-color;
+}
+.calendar-popover {
+ width: 190px;
+ height: 214px;
+ .btn {
+ background-color: transparent;
+ border: none;
+ height: 24px;
+ width: 24px;
+ margin-top: 5px;
+ .icon {
+ width: 24px;
+ height: 24px;
+ display: block;
+ position: relative;
+ }
+ }
+ .calendar-header {
+ height: 50px;
+ background-color: @calendar-bg-color;
+ color: #FFFFFF;
+ .top-row {
+ display: flex;
+ justify-content: space-between;
+ }
+ .bottom-row {
+ display: flex;
+ justify-content: space-between;
+ padding: 0 10px;
+ }
+ .title {
+ padding-top: 6px;
+ font-size: 13px;
+ label {
+ font-weight: bold;
+ &:not(:last-of-type) {
+ margin-right: 6px;
+ }
+ }
+
+ }
+ }
+}
\ No newline at end of file
diff --git a/apps/documenteditor/main/resources/less/app.less b/apps/documenteditor/main/resources/less/app.less
index 4f7c8b1cc..167e28fa3 100644
--- a/apps/documenteditor/main/resources/less/app.less
+++ b/apps/documenteditor/main/resources/less/app.less
@@ -118,6 +118,7 @@
@import "../../../../common/main/resources/less/toolbar.less";
@import "../../../../common/main/resources/less/language-dialog.less";
@import "../../../../common/main/resources/less/winxp_fix.less";
+@import "../../../../common/main/resources/less/calendar.less";
// App
// --------------------------------------------------