Fixed #2748 - Calendar month and year picker Improvement

primefaces · Apr 13, 2022 · d8e5374 · d8e5374
1 parent 94b640a
commit d8e5374
Show file tree

Hide file tree

Showing 46 changed files with 2,445 additions and 603 deletions.
diff --git a/components/lib/calendar/Calendar.css b/components/lib/calendar/Calendar.css
@@ -1,6 +1,7 @@
 .p-calendar {
     position: relative;
     display: inline-flex;
+    max-width: 100%;
 }
 
 .p-calendar .p-inputtext {
@@ -50,9 +51,9 @@
 }
 
 .p-datepicker-inline {
-    display: inline-flex;
-    flex-direction: column;
+    display: inline-block;
     position: static;
+    overflow-x: auto;
 }
 
 /* Header */
@@ -81,6 +82,15 @@
     display: flex;
 }
 
+.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
+    flex: 1 1 auto;
+}
+
+/* Multiple Month DatePicker */
+.p-datepicker-multiple-month .p-datepicker-group-container {
+    display: flex;
+}
+
 /* DatePicker Table */
 .p-datepicker table {
 	width: 100%;
@@ -146,3 +156,14 @@
     min-width: 80vw;
     transform: translate(-50%, -50%);
 }
+
+/* Year Picker */
+.p-yearpicker-year {
+    width: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+}
diff --git a/components/lib/calendar/Calendar.d.ts b/components/lib/calendar/Calendar.d.ts
@@ -25,6 +25,11 @@ interface CalendarChangeParams {
     target: CalendarChangeTargetOptions;
 }
 
+interface CalendarMonthChangeParams {
+    month: number;
+    year: number;
+}
+
 interface CalendarViewChangeParams {
     originalEvent: React.SyntheticEvent;
     value: Date;
@@ -133,6 +138,7 @@ export interface CalendarProps {
     ariaLabelledBy?: string;
     transitionOptions?: CSSTransitionProps;
     dateTemplate?(e: CalendarDateTemplateParams): React.ReactNode;
+    decadeTempate?(yearValues: number[]): React.ReactNode;
     headerTemplate?(): React.ReactNode;
     footerTemplate?(): React.ReactNode;
     monthNavigatorTemplate?(e: CalendarMonthNavigatorTemplateParams): React.ReactNode;
@@ -143,6 +149,7 @@ export interface CalendarProps {
     onInput?(event: React.FormEvent<HTMLInputElement>): void;
     onSelect?(e: CalendarSelectParams): void;
     onChange?(e: CalendarChangeParams): void;
+    onMonthChange(e: CalendarMonthChangeParams): void
     onViewDateChange?(e: CalendarViewChangeParams): void;
     onTodayButtonClick?(event: React.MouseEvent<HTMLButtonElement>): void;
     onClearButtonClick?(event: React.MouseEvent<HTMLButtonElement>): void;