From 8a56c6a9f9042a10e5cae178edf2ea68c087585a Mon Sep 17 00:00:00 2001
From: Graeme Ainsworth <roguegraeme@gmail.com>
Date: Wed, 27 Apr 2022 21:44:57 +1200
Subject: [PATCH 1/2] Add ViewMode Year

---
 example/src/App.tsx                      |  4 +-
 example/src/components/view-switcher.tsx |  7 +++-
 src/components/calendar/calendar.tsx     | 53 ++++++++++++++++++++++--
 src/helpers/date-helper.ts               |  9 ++++
 src/types/public-types.ts                |  1 +
 5 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index b1115f2..c4faaaf 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -10,7 +10,9 @@ const App = () => {
   const [tasks, setTasks] = React.useState<Task[]>(initTasks());
   const [isChecked, setIsChecked] = React.useState(true);
   let columnWidth = 65;
-  if (view === ViewMode.Month) {
+  if (view === ViewMode.Year) {
+    columnWidth = 350;
+  } else if (view === ViewMode.Month) {
     columnWidth = 300;
   } else if (view === ViewMode.Week) {
     columnWidth = 250;
diff --git a/example/src/components/view-switcher.tsx b/example/src/components/view-switcher.tsx
index cac872c..2f98e6e 100644
--- a/example/src/components/view-switcher.tsx
+++ b/example/src/components/view-switcher.tsx
@@ -46,7 +46,12 @@ export const ViewSwitcher: React.SFC<ViewSwitcherProps> = ({
       >
         Month
       </button>
-
+      <button
+        className="Button"
+        onClick={() => onViewModeChange(ViewMode.Year)}
+      >
+        Year
+      </button>
       <div className="Switch">
         <label className="Switch_Toggle">
           <input
diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index ceba3a3..f4f546e 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -32,6 +32,50 @@ export const Calendar: React.FC<CalendarProps> = ({
   fontFamily,
   fontSize,
 }) => {
+  const getCalendarValuesForYear = () => {
+    const topValues: ReactChild[] = [];
+    const bottomValues: ReactChild[] = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    for (let i = 0; i < dateSetup.dates.length; i++) {
+      const date = dateSetup.dates[i];
+      const bottomValue = date.getFullYear();
+      bottomValues.push(
+        <text
+          key={date.getFullYear()}
+          y={headerHeight * 0.8}
+          x={columnWidth * i + columnWidth * 0.5}
+          className={styles.calendarBottomText}
+        >
+          {bottomValue}
+        </text>
+      );
+      if (
+        i === 0 ||
+        date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()
+      ) {
+        const topValue = date.getFullYear().toString();
+        let xText: number;
+        if (rtl) {
+          xText = (6 + i + date.getFullYear() + 1) * columnWidth;
+        } else {
+          xText = (6 + i - date.getFullYear()) * columnWidth;
+        }
+        topValues.push(
+          <TopPartOfCalendar
+            key={topValue}
+            value={topValue}
+            x1Line={columnWidth * i}
+            y1Line={0}
+            y2Line={headerHeight}
+            xText={xText}
+            yText={topDefaultHeight * 0.9}
+          />
+        );
+      }
+    }
+    return [topValues, bottomValues];
+  };
+
   const getCalendarValuesForMonth = () => {
     const topValues: ReactChild[] = [];
     const bottomValues: ReactChild[] = [];
@@ -268,10 +312,13 @@ export const Calendar: React.FC<CalendarProps> = ({
   let topValues: ReactChild[] = [];
   let bottomValues: ReactChild[] = [];
   switch (dateSetup.viewMode) {
-    case ViewMode.Month:
-      [topValues, bottomValues] = getCalendarValuesForMonth();
+    case ViewMode.Year:
+      [topValues, bottomValues] = getCalendarValuesForYear();
       break;
-    case ViewMode.Week:
+    case ViewMode.Month:
+        [topValues, bottomValues] = getCalendarValuesForMonth();
+        break;
+      case ViewMode.Week:
       [topValues, bottomValues] = getCalendarValuesForWeek();
       break;
     case ViewMode.Day:
diff --git a/src/helpers/date-helper.ts b/src/helpers/date-helper.ts
index c141459..a1d8244 100644
--- a/src/helpers/date-helper.ts
+++ b/src/helpers/date-helper.ts
@@ -81,6 +81,12 @@ export const ganttDateRange = (tasks: Task[], viewMode: ViewMode) => {
     }
   }
   switch (viewMode) {
+    case ViewMode.Year:
+      newStartDate = addToDate(newStartDate, -1, "year");
+      newStartDate = startOfDate(newStartDate, "year");
+      newEndDate = addToDate(newEndDate, 1, "year");
+      newEndDate = startOfDate(newEndDate, "year");
+      break;
     case ViewMode.Month:
       newStartDate = addToDate(newStartDate, -1, "month");
       newStartDate = startOfDate(newStartDate, "month");
@@ -130,6 +136,9 @@ export const seedDates = (
   const dates: Date[] = [currentDate];
   while (currentDate < endDate) {
     switch (viewMode) {
+      case ViewMode.Year:
+        currentDate = addToDate(currentDate, 1, "year");
+        break;
       case ViewMode.Month:
         currentDate = addToDate(currentDate, 1, "month");
         break;
diff --git a/src/types/public-types.ts b/src/types/public-types.ts
index af7da95..4157038 100644
--- a/src/types/public-types.ts
+++ b/src/types/public-types.ts
@@ -6,6 +6,7 @@ export enum ViewMode {
   /** ISO-8601 week */
   Week = "Week",
   Month = "Month",
+  Year = "Year"
 }
 export type TaskType = "task" | "milestone" | "project";
 export interface Task {

From 06ccceee3516f76dceaa1a1206402c711ea77a0e Mon Sep 17 00:00:00 2001
From: Graeme Ainsworth <roguegraeme@gmail.com>
Date: Wed, 27 Apr 2022 22:00:37 +1200
Subject: [PATCH 2/2] Update readme

---
 README.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 1350f9b..c4f0be7 100644
--- a/README.md
+++ b/README.md
@@ -82,12 +82,12 @@ npm start
 
 ### DisplayOption
 
-| Parameter Name | Type    | Description                                                                                           |
-| :------------- | :------ | :---------------------------------------------------------------------------------------------------- |
-| viewMode       | enum    | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month. |
-| viewDate       | date    | Specifies display date and time for display.                                                          |
-| locale         | string  | Specifies the month name language. Able formats: ISO 639-2, Java Locale.                              |
-| rtl            | boolean | Sets rtl mode.                                                                                        |
+| Parameter Name | Type    | Description                                                                                                 |
+| :------------- | :------ | :---------------------------------------------------------------------------------------------------------- |
+| viewMode       | enum    | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, Year. |
+| viewDate       | date    | Specifies display date and time for display.                                                                |
+| locale         | string  | Specifies the month name language. Able formats: ISO 639-2, Java Locale.                                    |
+| rtl            | boolean | Sets rtl mode.                                                                                              |
 
 ### StylingOption