diff --git a/components/calendar/src/calendar/calendar-table.js b/components/calendar/src/calendar/calendar-table.js
index 08d084a23..c7c51e7ec 100644
--- a/components/calendar/src/calendar/calendar-table.js
+++ b/components/calendar/src/calendar/calendar-table.js
@@ -35,7 +35,7 @@ export const CalendarTable = ({
border: none;
border-collapse: collapse;
width: 100%;
- margin-block: ${spacers.dp4};
+ margin-block: 0 ${spacers.dp4};
}
.calendar-table tr,
.calendar-table td {
diff --git a/components/calendar/src/calendar/calendar.js b/components/calendar/src/calendar/calendar.js
index bde6d6a0c..68d8196c7 100644
--- a/components/calendar/src/calendar/calendar.js
+++ b/components/calendar/src/calendar/calendar.js
@@ -17,6 +17,7 @@ export const Calendar = ({
timeZone,
width = '240px',
cellSize = '32px',
+ pastOnly,
}) => {
const [selectedDateString, setSelectedDateString] = useState(date)
const languageDirection = useResolvedDirection(dir, locale)
@@ -27,6 +28,7 @@ export const Calendar = ({
timeZone,
numberingSystem,
weekDayFormat,
+ pastOnly,
}
const pickerResults = useDatePicker({
@@ -59,6 +61,10 @@ export const Calendar = ({
nextYear: pickerResults.nextYear,
prevMonth: pickerResults.prevMonth,
prevYear: pickerResults.prevYear,
+ navigateToYear: pickerResults.navigateToYear,
+ navigateToMonth: pickerResults.navigateToMonth,
+ months: pickerResults.months,
+ years: pickerResults.years,
languageDirection,
}
}, [cellSize, date, dir, locale, pickerResults, width, languageDirection])
@@ -85,6 +91,8 @@ export const CalendarProps = {
locale: PropTypes.string,
/** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
numberingSystem: PropTypes.string,
+ /** When true, only shows years in the past (current year and earlier) */
+ pastOnly: PropTypes.bool,
/** the timeZone to use */
timeZone: PropTypes.string,
/** the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow) */
diff --git a/components/calendar/src/calendar/navigation-container.js b/components/calendar/src/calendar/navigation-container.js
index 72480e2b1..2c9251e5e 100644
--- a/components/calendar/src/calendar/navigation-container.js
+++ b/components/calendar/src/calendar/navigation-container.js
@@ -5,7 +5,7 @@ import React from 'react'
import i18n from '../locales/index.js'
const wrapperBorderColor = colors.grey300
-const headerBackground = colors.grey050
+const headerBackground = colors.grey100
export const NavigationContainer = ({
languageDirection,
@@ -15,15 +15,30 @@ export const NavigationContainer = ({
nextYear,
prevMonth,
prevYear,
+ navigateToYear,
+ navigateToMonth,
+ months,
+ years,
}) => {
const PreviousIcon =
languageDirection === 'ltr' ? IconChevronLeft16 : IconChevronRight16
const NextIcon =
languageDirection === 'ltr' ? IconChevronRight16 : IconChevronLeft16
- // Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1), which is redundant in practice (like writing AD for gregorian years)
- // there is an ongoing discussion in JS-Temporal polyfill whether the era should be included or not, but for our case, it's safer to remove it
- const currentYearLabel = currYear.label?.toString().replace(/ERA1/, '')
+ const handleYearChange = (e) => {
+ const targetYear = parseInt(e.target.value)
+ navigateToYear(targetYear)
+ }
+
+ const handleMonthChange = (e) => {
+ const selectedMonth = months.find(
+ (month) => month.label === e.target.value
+ )
+
+ if (selectedMonth) {
+ navigateToMonth(selectedMonth.value)
+ }
+ }
return (
<>
@@ -40,8 +55,31 @@ export const NavigationContainer = ({