diff --git a/frontend/src/Calendar/Day/CalendarDay.js b/frontend/src/Calendar/Day/CalendarDay.js
deleted file mode 100644
index 685846766..000000000
--- a/frontend/src/Calendar/Day/CalendarDay.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import classNames from 'classnames';
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import React from 'react';
-import * as calendarViews from 'Calendar/calendarViews';
-import CalendarEventConnector from 'Calendar/Events/CalendarEventConnector';
-import styles from './CalendarDay.css';
-
-function CalendarDay(props) {
- const {
- date,
- time,
- isTodaysDate,
- events,
- view,
- onEventModalOpenToggle
- } = props;
-
- return (
-
- {
- view === calendarViews.MONTH &&
-
- {moment(date).date()}
-
- }
-
- {
- events.map((event) => {
- return (
-
- );
- })
- }
-
-
- );
-}
-
-CalendarDay.propTypes = {
- date: PropTypes.string.isRequired,
- time: PropTypes.string.isRequired,
- isTodaysDate: PropTypes.bool.isRequired,
- events: PropTypes.arrayOf(PropTypes.object).isRequired,
- view: PropTypes.string.isRequired,
- onEventModalOpenToggle: PropTypes.func.isRequired
-};
-
-export default CalendarDay;
diff --git a/frontend/src/Calendar/Day/CalendarDay.tsx b/frontend/src/Calendar/Day/CalendarDay.tsx
new file mode 100644
index 000000000..36a2f02cc
--- /dev/null
+++ b/frontend/src/Calendar/Day/CalendarDay.tsx
@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import moment from 'moment';
+import React from 'react';
+import * as calendarViews from 'Calendar/calendarViews';
+import CalendarEventConnector from 'Calendar/Events/CalendarEventConnector';
+import CalendarEvent from 'typings/CalendarEvent';
+import styles from './CalendarDay.css';
+
+interface CalendarDayProps {
+ date: string;
+ time: string;
+ isTodaysDate: boolean;
+ events: CalendarEvent[];
+ view: string;
+ onEventModalOpenToggle(...args: unknown[]): unknown;
+}
+
+function CalendarDay(props: CalendarDayProps) {
+ const { date, time, isTodaysDate, events, view, onEventModalOpenToggle } =
+ props;
+
+ const ref = React.useRef(null);
+
+ React.useEffect(() => {
+ if (isTodaysDate && view === calendarViews.MONTH && ref.current) {
+ ref.current.scrollIntoView();
+ }
+ }, [time, isTodaysDate, view]);
+
+ return (
+
+ {view === calendarViews.MONTH && (
+
+ {moment(date).date()}
+
+ )}
+
+ {events.map((event) => {
+ return (
+
+ );
+ })}
+
+
+ );
+}
+
+export default CalendarDay;
diff --git a/frontend/src/Calendar/Events/CalendarEvent.js b/frontend/src/Calendar/Events/CalendarEvent.js
index b7e23a835..dfa73a888 100644
--- a/frontend/src/Calendar/Events/CalendarEvent.js
+++ b/frontend/src/Calendar/Events/CalendarEvent.js
@@ -25,6 +25,7 @@ class CalendarEvent extends Component {
title,
titleSlug,
genres,
+ date,
monitored,
certification,
hasFile,
@@ -33,8 +34,7 @@ class CalendarEvent extends Component {
showMovieInformation,
showCutoffUnmetIcon,
fullColorEvents,
- colorImpairedMode,
- date
+ colorImpairedMode
} = this.props;
const isDownloading = !!(queueItem || grabbed);
@@ -148,17 +148,18 @@ CalendarEvent.propTypes = {
inCinemas: PropTypes.string,
physicalRelease: PropTypes.string,
digitalRelease: PropTypes.string,
+ date: PropTypes.string.isRequired,
monitored: PropTypes.bool.isRequired,
certification: PropTypes.string,
hasFile: PropTypes.bool.isRequired,
grabbed: PropTypes.bool,
queueItem: PropTypes.object,
- showMovieInformation: PropTypes.bool.isRequired,
- showCutoffUnmetIcon: PropTypes.bool.isRequired,
- fullColorEvents: PropTypes.bool.isRequired,
- timeFormat: PropTypes.string.isRequired,
- colorImpairedMode: PropTypes.bool.isRequired,
- date: PropTypes.string.isRequired
+ // These props come from the connector, not marked as required to appease TS for now.
+ showMovieInformation: PropTypes.bool,
+ showCutoffUnmetIcon: PropTypes.bool,
+ fullColorEvents: PropTypes.bool,
+ timeFormat: PropTypes.string,
+ colorImpairedMode: PropTypes.bool
};
CalendarEvent.defaultProps = {
diff --git a/frontend/src/typings/CalendarEvent.ts b/frontend/src/typings/CalendarEvent.ts
new file mode 100644
index 000000000..16ba28d6f
--- /dev/null
+++ b/frontend/src/typings/CalendarEvent.ts
@@ -0,0 +1,5 @@
+import Movie from 'Movie/Movie';
+
+type CalendarEvent = Movie;
+
+export default CalendarEvent;