@syncfusion/ej2-angular-calendars 20.4.54 → 21.1.35-ngcc

package/schematics/utils/lib-details.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pkgName = '@syncfusion/ej2-angular-calendars';
-exports.pkgVer = '^20.4.54';
+exports.pkgVer = '^21.1.35';
 exports.moduleName = 'CalendarModule, DatePickerModule, TimePickerModule, DateRangePickerModule, DateTimePickerModule';
-exports.themeVer = '~20.4.54';
+exports.themeVer = '~21.1.35';

package/schematics/utils/lib-details.ts

@@ -1,4 +1,4 @@
 export const pkgName = '@syncfusion/ej2-angular-calendars';
-export const pkgVer = '^20.4.54';
+export const pkgVer = '^21.1.35';
 export const moduleName = 'CalendarModule, DatePickerModule, TimePickerModule, DateRangePickerModule, DateTimePickerModule';
-export const themeVer = '~20.4.54';
+export const themeVer = '~21.1.35';

package/src/calendar/calendar-all.module.d.ts

@@ -1,13 +1,7 @@
 import { ValueProvider } from '@angular/core';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "./calendar.module";
 export declare const IslamicService: ValueProvider;
 /**
  * NgModule definition for the Calendar component with providers.
  */
 export declare class CalendarAllModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarAllModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<CalendarAllModule, never, [typeof i1.CommonModule, typeof i2.CalendarModule], [typeof i2.CalendarModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<CalendarAllModule>;
 }

package/src/calendar/calendar.component.d.ts

@@ -1,7 +1,6 @@
 import { ElementRef, ViewContainerRef, Renderer2, Injector } from '@angular/core';
 import { IComponentBase } from '@syncfusion/ej2-angular-base';
 import { Calendar } from '@syncfusion/ej2-calendars';
-import * as i0 from "@angular/core";
 export declare const inputs: string[];
 export declare const outputs: string[];
 export declare const twoWays: string[];
@@ -39,6 +38,4 @@ export declare class CalendarComponent extends Calendar implements IComponentBas
     ngAfterContentChecked(): void;
     registerEvents: (eventList: string[]) => void;
     addTwoWay: (propList: string[]) => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent, "ejs-calendar", never, { "calendarMode": "calendarMode"; "cssClass": "cssClass"; "dayHeaderFormat": "dayHeaderFormat"; "depth": "depth"; "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "enabled": "enabled"; "firstDayOfWeek": "firstDayOfWeek"; "isMultiSelection": "isMultiSelection"; "keyConfigs": "keyConfigs"; "locale": "locale"; "max": "max"; "min": "min"; "serverTimezoneOffset": "serverTimezoneOffset"; "showTodayButton": "showTodayButton"; "start": "start"; "value": "value"; "values": "values"; "weekNumber": "weekNumber"; "weekRule": "weekRule"; }, { "focus": "focus"; "blur": "blur"; "change": "change"; "created": "created"; "destroyed": "destroyed"; "navigated": "navigated"; "renderDayCell": "renderDayCell"; "valueChange": "valueChange"; "valuesChange": "valuesChange"; }, never, never>;
 }

package/src/calendar/calendar.module.d.ts

@@ -1,11 +1,5 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./calendar.component";
-import * as i2 from "@angular/common";
 /**
  * NgModule definition for the Calendar component.
  */
 export declare class CalendarModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<CalendarModule, [typeof i1.CalendarComponent], [typeof i2.CommonModule], [typeof i1.CalendarComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<CalendarModule>;
 }

package/src/datepicker/datepicker-all.module.d.ts

@@ -1,13 +1,7 @@
 import { ValueProvider } from '@angular/core';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "./datepicker.module";
 export declare const MaskedDateTimeService: ValueProvider;
 /**
  * NgModule definition for the DatePicker component with providers.
  */
 export declare class DatePickerAllModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerAllModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DatePickerAllModule, never, [typeof i1.CommonModule, typeof i2.DatePickerModule], [typeof i2.DatePickerModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DatePickerAllModule>;
 }

package/src/datepicker/datepicker.component.d.ts

@@ -1,7 +1,6 @@
 import { ElementRef, ViewContainerRef, Renderer2, Injector } from '@angular/core';
 import { IComponentBase } from '@syncfusion/ej2-angular-base';
 import { DatePicker } from '@syncfusion/ej2-calendars';
-import * as i0 from "@angular/core";
 export declare const inputs: string[];
 export declare const outputs: string[];
 export declare const twoWays: string[];
@@ -42,6 +41,4 @@ export declare class DatePickerComponent extends DatePicker implements IComponen
     ngAfterContentChecked(): void;
     registerEvents: (eventList: string[]) => void;
     addTwoWay: (propList: string[]) => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent, "ejs-datepicker", never, { "allowEdit": "allowEdit"; "calendarMode": "calendarMode"; "cssClass": "cssClass"; "dayHeaderFormat": "dayHeaderFormat"; "depth": "depth"; "enableMask": "enableMask"; "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "enabled": "enabled"; "firstDayOfWeek": "firstDayOfWeek"; "floatLabelType": "floatLabelType"; "format": "format"; "htmlAttributes": "htmlAttributes"; "isMultiSelection": "isMultiSelection"; "keyConfigs": "keyConfigs"; "locale": "locale"; "maskPlaceholder": "maskPlaceholder"; "max": "max"; "min": "min"; "openOnFocus": "openOnFocus"; "placeholder": "placeholder"; "readonly": "readonly"; "serverTimezoneOffset": "serverTimezoneOffset"; "showClearButton": "showClearButton"; "showTodayButton": "showTodayButton"; "start": "start"; "strictMode": "strictMode"; "value": "value"; "values": "values"; "weekNumber": "weekNumber"; "weekRule": "weekRule"; "width": "width"; "zIndex": "zIndex"; }, { "blur": "blur"; "change": "change"; "cleared": "cleared"; "close": "close"; "created": "created"; "destroyed": "destroyed"; "focus": "focus"; "navigated": "navigated"; "open": "open"; "renderDayCell": "renderDayCell"; "valueChange": "valueChange"; }, never, never>;
 }

package/src/datepicker/datepicker.module.d.ts

@@ -1,11 +1,5 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./datepicker.component";
-import * as i2 from "@angular/common";
 /**
  * NgModule definition for the DatePicker component.
  */
 export declare class DatePickerModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DatePickerModule, [typeof i1.DatePickerComponent], [typeof i2.CommonModule], [typeof i1.DatePickerComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DatePickerModule>;
 }

package/src/daterangepicker/daterangepicker-all.module.d.ts

@@ -1,11 +1,5 @@
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "./daterangepicker.module";
 /**
  * NgModule definition for the DateRangePicker component with providers.
  */
 export declare class DateRangePickerAllModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePickerAllModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DateRangePickerAllModule, never, [typeof i1.CommonModule, typeof i2.DateRangePickerModule], [typeof i2.DateRangePickerModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DateRangePickerAllModule>;
 }

package/src/daterangepicker/daterangepicker.component.d.ts

@@ -1,7 +1,6 @@
 import { ElementRef, ViewContainerRef, Renderer2, Injector } from '@angular/core';
 import { IComponentBase } from '@syncfusion/ej2-angular-base';
 import { DateRangePicker } from '@syncfusion/ej2-calendars';
-import * as i0 from "@angular/core";
 export declare const inputs: string[];
 export declare const outputs: string[];
 export declare const twoWays: string[];
@@ -54,6 +53,4 @@ export declare class DateRangePickerComponent extends DateRangePicker implements
     ngAfterContentChecked(): void;
     registerEvents: (eventList: string[]) => void;
     addTwoWay: (propList: string[]) => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePickerComponent, "ejs-daterangepicker", never, { "allowEdit": "allowEdit"; "calendarMode": "calendarMode"; "cssClass": "cssClass"; "dayHeaderFormat": "dayHeaderFormat"; "depth": "depth"; "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "enabled": "enabled"; "endDate": "endDate"; "firstDayOfWeek": "firstDayOfWeek"; "floatLabelType": "floatLabelType"; "format": "format"; "htmlAttributes": "htmlAttributes"; "keyConfigs": "keyConfigs"; "locale": "locale"; "max": "max"; "maxDays": "maxDays"; "min": "min"; "minDays": "minDays"; "openOnFocus": "openOnFocus"; "placeholder": "placeholder"; "presets": "presets"; "readonly": "readonly"; "separator": "separator"; "serverTimezoneOffset": "serverTimezoneOffset"; "showClearButton": "showClearButton"; "start": "start"; "startDate": "startDate"; "strictMode": "strictMode"; "value": "value"; "weekNumber": "weekNumber"; "weekRule": "weekRule"; "width": "width"; "zIndex": "zIndex"; }, { "blur": "blur"; "change": "change"; "cleared": "cleared"; "close": "close"; "created": "created"; "destroyed": "destroyed"; "focus": "focus"; "navigated": "navigated"; "open": "open"; "renderDayCell": "renderDayCell"; "select": "select"; "startDateChange": "startDateChange"; "endDateChange": "endDateChange"; "valueChange": "valueChange"; }, ["start", "end", "childPresets"], never>;
 }

package/src/daterangepicker/daterangepicker.module.d.ts

@@ -1,12 +1,5 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./daterangepicker.component";
-import * as i2 from "./presets.directive";
-import * as i3 from "@angular/common";
 /**
  * NgModule definition for the DateRangePicker component.
  */
 export declare class DateRangePickerModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DateRangePickerModule, [typeof i1.DateRangePickerComponent, typeof i2.PresetDirective, typeof i2.PresetsDirective], [typeof i3.CommonModule], [typeof i1.DateRangePickerComponent, typeof i2.PresetDirective, typeof i2.PresetsDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DateRangePickerModule>;
 }

package/src/daterangepicker/presets.directive.d.ts

@@ -1,6 +1,5 @@
 import { ViewContainerRef } from '@angular/core';
 import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
-import * as i0 from "@angular/core";
 /**
  * 'e-presets' directive represent a presets of angular daterangepicker
  * It must be contained in a daterangepicker component(`ej-daterangepicker`).
@@ -29,8 +28,6 @@ export declare class PresetDirective extends ComplexBase<PresetDirective> {
      */
     start: any;
     constructor(viewContainerRef: ViewContainerRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<PresetDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PresetDirective, "e-presets>e-preset", never, { "end": "end"; "label": "label"; "start": "start"; }, {}, never>;
 }
 /**
  * Preset Array Directive
@@ -38,6 +35,4 @@ export declare class PresetDirective extends ComplexBase<PresetDirective> {
  */
 export declare class PresetsDirective extends ArrayBase<PresetsDirective> {
     constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<PresetsDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PresetsDirective, "ejs-daterangepicker>e-presets", never, {}, {}, ["children"]>;
 }

package/src/datetimepicker/datetimepicker-all.module.d.ts

@@ -1,11 +1,5 @@
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "./datetimepicker.module";
 /**
  * NgModule definition for the DateTimePicker component with providers.
  */
 export declare class DateTimePickerAllModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerAllModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DateTimePickerAllModule, never, [typeof i1.CommonModule, typeof i2.DateTimePickerModule], [typeof i2.DateTimePickerModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DateTimePickerAllModule>;
 }

package/src/datetimepicker/datetimepicker.component.d.ts

@@ -1,7 +1,6 @@
 import { ElementRef, ViewContainerRef, Renderer2, Injector } from '@angular/core';
 import { IComponentBase } from '@syncfusion/ej2-angular-base';
 import { DateTimePicker } from '@syncfusion/ej2-calendars';
-import * as i0 from "@angular/core";
 export declare const inputs: string[];
 export declare const outputs: string[];
 export declare const twoWays: string[];
@@ -42,6 +41,4 @@ export declare class DateTimePickerComponent extends DateTimePicker implements I
     ngAfterContentChecked(): void;
     registerEvents: (eventList: string[]) => void;
     addTwoWay: (propList: string[]) => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "ejs-datetimepicker", never, { "allowEdit": "allowEdit"; "calendarMode": "calendarMode"; "cssClass": "cssClass"; "dayHeaderFormat": "dayHeaderFormat"; "depth": "depth"; "enableMask": "enableMask"; "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "enabled": "enabled"; "firstDayOfWeek": "firstDayOfWeek"; "floatLabelType": "floatLabelType"; "format": "format"; "htmlAttributes": "htmlAttributes"; "isMultiSelection": "isMultiSelection"; "keyConfigs": "keyConfigs"; "locale": "locale"; "maskPlaceholder": "maskPlaceholder"; "max": "max"; "min": "min"; "openOnFocus": "openOnFocus"; "placeholder": "placeholder"; "readonly": "readonly"; "scrollTo": "scrollTo"; "serverTimezoneOffset": "serverTimezoneOffset"; "showClearButton": "showClearButton"; "showTodayButton": "showTodayButton"; "start": "start"; "step": "step"; "strictMode": "strictMode"; "timeFormat": "timeFormat"; "value": "value"; "values": "values"; "weekNumber": "weekNumber"; "weekRule": "weekRule"; "width": "width"; "zIndex": "zIndex"; }, { "blur": "blur"; "change": "change"; "cleared": "cleared"; "close": "close"; "created": "created"; "destroyed": "destroyed"; "focus": "focus"; "navigated": "navigated"; "open": "open"; "renderDayCell": "renderDayCell"; "valueChange": "valueChange"; }, never, never>;
 }

package/src/datetimepicker/datetimepicker.module.d.ts

@@ -1,11 +1,5 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./datetimepicker.component";
-import * as i2 from "@angular/common";
 /**
  * NgModule definition for the DateTimePicker component.
  */
 export declare class DateTimePickerModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DateTimePickerModule, [typeof i1.DateTimePickerComponent], [typeof i2.CommonModule], [typeof i1.DateTimePickerComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DateTimePickerModule>;
 }

package/src/timepicker/timepicker-all.module.d.ts

@@ -1,11 +1,5 @@
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "./timepicker.module";
 /**
  * NgModule definition for the TimePicker component with providers.
  */
 export declare class TimePickerAllModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerAllModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TimePickerAllModule, never, [typeof i1.CommonModule, typeof i2.TimePickerModule], [typeof i2.TimePickerModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<TimePickerAllModule>;
 }

package/src/timepicker/timepicker.component.d.ts

@@ -1,7 +1,6 @@
 import { ElementRef, ViewContainerRef, Renderer2, Injector } from '@angular/core';
 import { IComponentBase } from '@syncfusion/ej2-angular-base';
 import { TimePicker } from '@syncfusion/ej2-calendars';
-import * as i0 from "@angular/core";
 export declare const inputs: string[];
 export declare const outputs: string[];
 export declare const twoWays: string[];
@@ -41,6 +40,4 @@ export declare class TimePickerComponent extends TimePicker implements IComponen
     ngAfterContentChecked(): void;
     registerEvents: (eventList: string[]) => void;
     addTwoWay: (propList: string[]) => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TimePickerComponent, "ejs-timepicker", never, { "allowEdit": "allowEdit"; "cssClass": "cssClass"; "enableMask": "enableMask"; "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "enabled": "enabled"; "floatLabelType": "floatLabelType"; "format": "format"; "htmlAttributes": "htmlAttributes"; "keyConfigs": "keyConfigs"; "locale": "locale"; "maskPlaceholder": "maskPlaceholder"; "max": "max"; "min": "min"; "openOnFocus": "openOnFocus"; "placeholder": "placeholder"; "readonly": "readonly"; "scrollTo": "scrollTo"; "showClearButton": "showClearButton"; "step": "step"; "strictMode": "strictMode"; "value": "value"; "width": "width"; "zIndex": "zIndex"; }, { "blur": "blur"; "change": "change"; "cleared": "cleared"; "close": "close"; "created": "created"; "destroyed": "destroyed"; "focus": "focus"; "itemRender": "itemRender"; "open": "open"; "valueChange": "valueChange"; }, never, never>;
 }

package/src/timepicker/timepicker.module.d.ts

@@ -1,11 +1,5 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./timepicker.component";
-import * as i2 from "@angular/common";
 /**
  * NgModule definition for the TimePicker component.
  */
 export declare class TimePickerModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TimePickerModule, [typeof i1.TimePickerComponent], [typeof i2.CommonModule], [typeof i1.TimePickerComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<TimePickerModule>;
 }

package/styles/bootstrap-dark.css

@@ -344,7 +344,7 @@ ejs-calendar {
 }
 .e-calendar .e-footer-container,
 .e-bigger.e-small .e-calendar .e-footer-container {
-  background-color: #1a1a1a;
+  background-color: transparent;
   border-top: none;
   cursor: default;
   display: inline-block;
@@ -509,10 +509,11 @@ ejs-calendar {
 .e-small .e-calendar .e-header {
   height: 32px;
 }
-.e-small.e-calendar .e-header span,
-.e-small .e-calendar .e-header span {
+.e-small.e-calendar .e-header button span,
+.e-small .e-calendar .e-header button span {
   font-size: 12px;
   padding: 6px;
+  line-height: 14px;
 }
 .e-small.e-calendar .e-header .e-title,
 .e-small .e-calendar .e-header .e-title {
@@ -898,7 +899,7 @@ ejs-calendar {
 *.e-bigger.e-time-wrapper .e-time-icon.e-icons,
 *.e-bigger .e-control-wrapper .e-time-wrapper .e-time-icon.e-icons,
 *.e-control-wrapper.e-bigger.e-time-wrapper .e-time-icon.e-icons {
-  font-size: 16px;
+  font-size: 18px;
 }
 
 .e-bigger .e-timepicker.e-popup .e-list-parent.e-ul,
@@ -1051,7 +1052,7 @@ ejs-calendar {
 .e-bigger .e-input-group-icon.e-date-icon,
 *.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
 *.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 20px;
+  font-size: 18px;
   margin: 0;
 }
 .e-bigger .e-input-group-icon.e-date-icon::before,
@@ -1234,7 +1235,7 @@ ejs-calendar {
 }
 
 .e-bigger .e-input-group-icon.e-range-icon, .e-bigger.e-control-wrapper .e-input-group-icon.e-range-icon, .e-bigger .e-control-wrapper .e-input-group-icon.e-range-icon {
-  font-size: 20px;
+  font-size: 18px;
   margin: 0;
   outline: none;
 }
@@ -1326,8 +1327,8 @@ ejs-calendar {
 .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header .e-day-span {
   direction: ltr;
   font-size: 13px;
-  height: 14px;
-  margin: 0 0 13px 0;
+  height: 20px;
+  margin: 0;
   text-align: center;
   -webkit-user-select: none;
       -ms-user-select: none;
@@ -1345,7 +1346,7 @@ ejs-calendar {
 .e-daterangepicker.e-popup .e-separator,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
   height: 1px;
-  margin: 0 16px;
+  margin: 0;
 }
 .e-daterangepicker.e-popup .e-calendar,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
@@ -1761,7 +1762,7 @@ ejs-calendar {
 
 .e-small .e-daterangepicker.e-popup .e-range-header,
 *.e-small.e-daterangepicker.e-popup .e-range-header {
-  margin: 10px 10px 0 10px;
+  margin: 0;
 }
 .e-small .e-daterangepicker.e-popup .e-range-header .e-start-label, .e-small .e-daterangepicker.e-popup .e-range-header .e-end-label,
 *.e-small.e-daterangepicker.e-popup .e-range-header .e-start-label,
@@ -1779,7 +1780,7 @@ ejs-calendar {
 .e-small .e-daterangepicker.e-popup .e-range-header .e-day-span,
 *.e-small.e-daterangepicker.e-popup .e-range-header .e-day-span {
   font-size: 12px;
-  margin: 0 0 10px 0;
+  margin: 0;
 }
 .e-small .e-daterangepicker.e-popup .e-range-header .e-separator,
 *.e-small.e-daterangepicker.e-popup .e-range-header .e-separator {
@@ -2141,7 +2142,7 @@ ejs-calendar {
 
 .e-bigger.e-datetime-wrapper .e-time-icon.e-icons::before,
 *.e-bigger .e-datetime-wrapper .e-time-icon.e-icons::before {
-  font-size: 20px;
+  font-size: 18px;
 }
 .e-bigger.e-datetime-wrapper .e-input-group-icon.e-time-icon,
 *.e-bigger .e-datetime-wrapper .e-input-group-icon.e-time-icon {

package/styles/bootstrap.css

@@ -510,10 +510,11 @@ ejs-calendar {
 .e-small .e-calendar .e-header {
   height: 32px;
 }
-.e-small.e-calendar .e-header span,
-.e-small .e-calendar .e-header span {
+.e-small.e-calendar .e-header button span,
+.e-small .e-calendar .e-header button span {
   font-size: 12px;
   padding: 6px;
+  line-height: 14px;
 }
 .e-small.e-calendar .e-header .e-title,
 .e-small .e-calendar .e-header .e-title {
@@ -899,7 +900,7 @@ ejs-calendar {
 *.e-bigger.e-time-wrapper .e-time-icon.e-icons,
 *.e-bigger .e-control-wrapper .e-time-wrapper .e-time-icon.e-icons,
 *.e-control-wrapper.e-bigger.e-time-wrapper .e-time-icon.e-icons {
-  font-size: 16px;
+  font-size: 18px;
 }
 
 .e-bigger .e-timepicker.e-popup .e-list-parent.e-ul,
@@ -1053,7 +1054,7 @@ ejs-calendar {
 .e-bigger .e-input-group-icon.e-date-icon,
 *.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
 *.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 20px;
+  font-size: 18px;
   margin: 0;
 }
 .e-bigger .e-input-group-icon.e-date-icon::before,
@@ -1237,7 +1238,7 @@ ejs-calendar {
 }
 
 .e-bigger .e-input-group-icon.e-range-icon, .e-bigger.e-control-wrapper .e-input-group-icon.e-range-icon, .e-bigger .e-control-wrapper .e-input-group-icon.e-range-icon {
-  font-size: 20px;
+  font-size: 18px;
   margin: 0;
   outline: none;
 }
@@ -1348,7 +1349,7 @@ ejs-calendar {
 .e-daterangepicker.e-popup .e-separator,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
   height: 1px;
-  margin: 0 16px;
+  margin: 0;
 }
 .e-daterangepicker.e-popup .e-calendar,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
@@ -1553,6 +1554,11 @@ ejs-calendar {
   max-width: 262px;
 }
 
+.e-bigger .e-daterangepicker.e-popup,
+*.e-bigger.e-daterangepicker.e-popup,
+*.e-device.e-daterangepicker.e-popup {
+  background-color: #fff;
+}
 .e-bigger .e-daterangepicker.e-popup.e-preset-wrapper,
 *.e-bigger.e-daterangepicker.e-popup.e-preset-wrapper,
 *.e-device.e-daterangepicker.e-popup.e-preset-wrapper {
@@ -2144,7 +2150,7 @@ ejs-calendar {
 
 .e-bigger.e-datetime-wrapper .e-time-icon.e-icons::before,
 *.e-bigger .e-datetime-wrapper .e-time-icon.e-icons::before {
-  font-size: 20px;
+  font-size: 18px;
 }
 .e-bigger.e-datetime-wrapper .e-input-group-icon.e-time-icon,
 *.e-bigger .e-datetime-wrapper .e-input-group-icon.e-time-icon {

package/styles/bootstrap4.css

@@ -510,10 +510,11 @@ ejs-calendar {
 .e-small .e-calendar .e-header {
   height: 32px;
 }
-.e-small.e-calendar .e-header span,
-.e-small .e-calendar .e-header span {
+.e-small.e-calendar .e-header button span,
+.e-small .e-calendar .e-header button span {
   font-size: 12px;
   padding: 6px;
+  line-height: 14px;
 }
 .e-small.e-calendar .e-header .e-title,
 .e-small .e-calendar .e-header .e-title {
@@ -1781,13 +1782,14 @@ ejs-calendar {
 .e-bigger .e-daterangepicker.e-device.e-popup .e-range-header,
 *.e-bigger.e-daterangepicker.e-device.e-popup .e-range-header,
 *.e-device.e-daterangepicker.e-device.e-popup .e-range-header {
-  margin: 16px 16px 0 16px;
-  padding: 0;
+  margin: 0;
+  padding: 16px;
 }
 .e-bigger .e-daterangepicker.e-device.e-popup .e-range-header .e-day-span,
 *.e-bigger.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span,
 *.e-device.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span {
   margin: 10px 0;
+  margin-bottom: 0;
 }
 
 .e-small .e-daterangepicker.e-popup .e-range-header,
@@ -2175,7 +2177,7 @@ ejs-calendar {
 
 .e-bigger.e-datetime-wrapper .e-time-icon.e-icons::before,
 *.e-bigger .e-datetime-wrapper .e-time-icon.e-icons::before {
-  font-size: 20px;
+  font-size: 18px;
 }
 .e-bigger.e-datetime-wrapper .e-input-group-icon.e-time-icon,
 *.e-bigger .e-datetime-wrapper .e-input-group-icon.e-time-icon {

package/styles/bootstrap5-dark.css

@@ -59,7 +59,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-header {
   background: none;
   display: table;
-  font-weight: normal;
+  font-weight: 400;
   position: relative;
   text-align: center;
   width: 100%;
@@ -77,7 +77,7 @@ ejs-calendar {
   cursor: pointer;
   display: inline-block;
   font-size: 14px;
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1;
   padding: 5px;
   vertical-align: middle;
@@ -160,12 +160,12 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-other-month > span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-other-year > span.e-day {
   display: inline-block;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-calendar .e-content tr.e-month-hide,
 .e-bigger.e-small .e-calendar .e-content tr.e-month-hide {
   display: none;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-calendar .e-content tr.e-month-hide, .e-calendar .e-content td.e-other-month, .e-calendar .e-content td.e-other-year,
 .e-bigger.e-small .e-calendar .e-content tr.e-month-hide,
@@ -203,7 +203,7 @@ ejs-calendar {
   display: inline-block;
   float: left;
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 700;
   text-align: left;
 }
 .e-calendar .e-header .e-title,
@@ -298,7 +298,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content span.e-day {
   border: none;
   font-size: 14px;
-  font-weight: normal;
+  font-weight: 400;
   height: 32px;
   line-height: 32px;
   width: 32px;
@@ -332,7 +332,7 @@ ejs-calendar {
 .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-decade td > span.e-day {
-  font-weight: normal;
+  font-weight: 400;
   height: 56px;
   line-height: 56px;
   width: 56px;
@@ -439,7 +439,7 @@ ejs-calendar {
 .e-bigger.e-calendar .e-content.e-year span.e-day,
 *.e-bigger .e-calendar .e-content.e-year span.e-day {
   font-size: 16px;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-bigger.e-calendar .e-content.e-month table,
 *.e-bigger .e-calendar .e-content.e-month table {
@@ -534,14 +534,15 @@ ejs-calendar {
 .e-small .e-calendar .e-header {
   height: 22px;
 }
-.e-small.e-calendar .e-header span,
-.e-small .e-calendar .e-header span {
+.e-small.e-calendar .e-header button span,
+.e-small .e-calendar .e-header button span {
   font-size: 12px;
   padding: 0;
+  line-height: 14px;
 }
 .e-small.e-calendar .e-header .e-title,
 .e-small .e-calendar .e-header .e-title {
-  font-size: 13px;
+  font-size: 12px;
   line-height: 22px;
 }
 .e-small.e-calendar.e-rtl .e-header .e-title,
@@ -660,7 +661,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-header .e-next.e-disabled span,
 .e-bigger.e-small .e-calendar .e-header .e-prev.e-disabled span {
   color: #6c757d;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-calendar .e-header .e-next.e-disabled, .e-calendar .e-header .e-prev.e-disabled,
 .e-bigger.e-small .e-calendar .e-header .e-next.e-disabled,
@@ -706,7 +707,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:focus span.e-day {
-  background: #31373d;
+  background: #444c54;
   border: none;
   border-radius: 4px;
   box-shadow: none;
@@ -1108,7 +1109,7 @@ ejs-calendar {
 /*! component icons */
 .e-input-group-icon.e-date-icon,
 *.e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 18px;
+  font-size: 16px;
   margin: 0;
   min-height: 18px;
   min-width: 30px;
@@ -1128,7 +1129,7 @@ ejs-calendar {
 .e-bigger .e-input-group-icon.e-date-icon,
 *.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
 *.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 22px;
+  font-size: 18px;
   margin: 0;
   min-height: 18px;
   min-width: 36px;
@@ -1410,7 +1411,7 @@ ejs-calendar {
 }
 .e-daterangepicker.e-popup .e-range-header .e-change-icon,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header .e-change-icon {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 500;
   text-align: center;
   width: 4%;
@@ -1456,7 +1457,7 @@ ejs-calendar {
   line-height: 24px;
   width: auto;
   float: none;
-  font-weight: normal;
+  font-weight: 400;
   margin-left: 0;
 }
 .e-daterangepicker.e-popup .e-calendar .e-header.e-month, .e-daterangepicker.e-popup .e-calendar .e-header.e-year, .e-daterangepicker.e-popup .e-calendar .e-header.e-decade,
@@ -1572,7 +1573,7 @@ ejs-calendar {
 }
 .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item {
-  font-size: 13px;
+  font-size: 12px;
   height: 36px;
   line-height: 36px;
 }
@@ -1856,6 +1857,7 @@ ejs-calendar {
 *.e-bigger.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span,
 *.e-device.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span {
   margin: 10px 0;
+  margin-bottom: 0;
 }
 
 .e-small .e-daterangepicker.e-popup .e-range-header,
@@ -2002,7 +2004,7 @@ ejs-calendar {
 .e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-range-hover:not(.e-selected):hover span.e-day,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date:not(.e-selected) span.e-day,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date.e-today span.e-day {
-  background-color: #495057;
+  background-color: #6c757d;
   border: none;
   color: #e9ecef;
 }