diff --git a/types/react-calendar-timeline/index.d.ts b/types/react-calendar-timeline/index.d.ts
index 9591945b64..44ea7eadba 100644
--- a/types/react-calendar-timeline/index.d.ts
+++ b/types/react-calendar-timeline/index.d.ts
@@ -1,8 +1,9 @@
 // Type definitions for react-calendar-timeline v0.26.6
 // Project: https://github.com/namespace-ee/react-calendar-timeline
 // Definitions by: Rajab Shakirov <https://github.com/radziksh>
-//				         Alex Maclean <https://github.com/acemac>
-//				         Andrii Los <https://github.com/rip21>
+//                 Alex Maclean <https://github.com/acemac>
+//                 Andrii Los <https://github.com/rip21>
+//                 Jon Caruana <https://github.com/joncar>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.5
 
@@ -10,15 +11,17 @@ import * as React from 'react';
 import { Moment } from 'moment';
 
 declare module 'react-calendar-timeline' {
+    type Id = number | string;
+
     export interface TimelineGroupBase {
-        id: number;
+        id: Id;
         title: React.ReactNode;
         rightTitle?: React.ReactNode;
     }
 
     export interface TimelineItemBase<DateType> {
-        id: number;
-        group: number;
+        id: Id;
+        group: Id;
         title?: React.ReactNode;
         start_time: DateType;
         end_time: DateType;
@@ -96,7 +99,7 @@ declare module 'react-calendar-timeline' {
     }
 
     export interface ItemRendererGetItemPropsReturnType {
-        key: number;
+        key: Id;
         ref: React.Ref<any>;
         className: string;
         onMouseDown: React.MouseEventHandler;
@@ -112,14 +115,14 @@ declare module 'react-calendar-timeline' {
 
     export interface ItemRendererGetResizePropsReturnType {
         left?: {
-            key: number;
             ref: React.Ref<any>;
             className: string;
+            style: React.CSSProperties;
         };
         right?: {
-            key: number;
             ref: React.Ref<any>;
             className: string;
+            style: React.CSSProperties;
         };
     }
 
@@ -138,7 +141,7 @@ declare module 'react-calendar-timeline' {
         getItemProps: (
             props: GetItemsProps,
         ) => {
-            key: number;
+            key: Id;
             ref: React.Ref<any>;
             className: string;
             onMouseDown: React.MouseEventHandler;
@@ -159,7 +162,7 @@ declare module 'react-calendar-timeline' {
 
     export interface OnItemDragObjectBase {
         eventType: 'move' | 'resize';
-        itemId: number;
+        itemId: Id;
         time: number;
     }
 
@@ -194,8 +197,8 @@ declare module 'react-calendar-timeline' {
         keys?: TimelineKeys;
         defaultTimeStart?: Date | Moment;
         defaultTimeEnd?: Date | Moment;
-        visibleTimeStart?: Date | Moment;
-        visibleTimeEnd?: Date | Moment;
+        visibleTimeStart?: Date | Moment | number;
+        visibleTimeEnd?: Date | Moment | number;
         selected?: number[];
         sidebarWidth?: number;
         sidebarContent?: React.ReactNode;
@@ -218,20 +221,20 @@ declare module 'react-calendar-timeline' {
         timeSteps?: TimelineTimeSteps;
         scrollRef?: React.Ref<any>;
         onItemDrag?(itemDragObject: OnItemDragObjectMove | OnItemDragObjectResize): void;
-        onItemMove?(itemId: number, dragTime: number, newGroupOrder: number): void;
-        onItemResize?(itemId: number, endTimeOrStartTime: number, edge: 'left' | 'right'): void;
-        onItemSelect?(itemId: number, e: any, time: number): void;
+        onItemMove?(itemId: Id, dragTime: number, newGroupOrder: number): void;
+        onItemResize?(itemId: Id, endTimeOrStartTime: number, edge: 'left' | 'right'): void;
+        onItemSelect?(itemId: Id, e: any, time: number): void;
         onItemDeselect?(e: React.SyntheticEvent): void;
-        onItemClick?(itemId: number, e: React.SyntheticEvent, time: number): void;
-        onItemDoubleClick?(itemId: number, e: React.SyntheticEvent, time: number): void;
-        onItemContextMenu?(itemId: number, e: React.SyntheticEvent, time: number): void;
-        onCanvasClick?(groupId: number, time: number, e: React.SyntheticEvent): void;
-        onCanvasDoubleClick?(group: CustomGroup, time: number, e: React.SyntheticEvent): void;
-        onCanvasContextMenu?(group: CustomGroup, time: number, e: React.SyntheticEvent): void;
+        onItemClick?(itemId: Id, e: React.SyntheticEvent, time: number): void;
+        onItemDoubleClick?(itemId: Id, e: React.SyntheticEvent, time: number): void;
+        onItemContextMenu?(itemId: Id, e: React.SyntheticEvent, time: number): void;
+        onCanvasClick?(groupId: Id, time: number, e: React.SyntheticEvent): void;
+        onCanvasDoubleClick?(groupId: Id, time: number, e: React.SyntheticEvent): void;
+        onCanvasContextMenu?(groupId: Id, time: number, e: React.SyntheticEvent): void;
         onZoom?(timelineContext: TimelineContext): void;
         moveResizeValidator?(
             action: 'move' | 'resize',
-            itemId: number,
+            itemId: Id,
             time: number,
             resizeEdge: 'left' | 'right',
         ): number;
diff --git a/types/react-calendar-timeline/react-calendar-timeline-tests.tsx b/types/react-calendar-timeline/react-calendar-timeline-tests.tsx
index 3cb986fb35..32056efaf6 100644
--- a/types/react-calendar-timeline/react-calendar-timeline-tests.tsx
+++ b/types/react-calendar-timeline/react-calendar-timeline-tests.tsx
@@ -13,13 +13,13 @@ import Timeline, {
 import * as moment from 'moment';
 import { Moment } from 'moment';
 
-const groups1 = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }] as TimelineGroupBase[];
+const groups1: TimelineGroupBase[] = [{ id: 1, title: 'group 1' }, { id: 'two', title: 'group 2' }];
 
-const items1 = [
+const items1: TimelineItemBase<Moment>[] = [
     { id: 1, group: 1, title: 'item 1', start_time: moment(), end_time: moment().add(1, 'hour') },
-    { id: 2, group: 2, title: 'item 2', start_time: moment().add(-0.5, 'hour'), end_time: moment().add(0.5, 'hour') },
-    { id: 3, group: 1, title: 'item 3', start_time: moment().add(2, 'hour'), end_time: moment().add(3, 'hour') },
-] as TimelineItemBase<Moment>[];
+    { id: 2, group: 'two', title: 'item 2', start_time: moment().add(-0.5, 'hour'), end_time: moment().add(0.5, 'hour') },
+    { id: 'three', group: 1, title: 'item 3', start_time: moment().add(2, 'hour'), end_time: moment().add(3, 'hour') },
+];
 
 class ExampleOfUsingReactCalendarTimeline extends React.Component {
     render() {
@@ -40,12 +40,12 @@ class ExampleOfUsingReactCalendarTimeline extends React.Component {
 type TimelineGroupCustom = TimelineGroup<{ data: string }>;
 type TimelineItemCustom = TimelineItem<{ data: string }, Moment>;
 
-const groups2 = [
+const groups2: TimelineGroupCustom[] = [
     { id: 1, title: 'group 1', data: '1' },
     { id: 2, title: 'group 2', data: '1' },
-] as TimelineGroupCustom[];
+];
 
-const items2 = [
+const items2: TimelineItemCustom[] = [
     { id: 1, group: 1, title: 'item 1', start_time: moment(), end_time: moment().add(1, 'hour'), data: '1' },
     {
         id: 2,
@@ -63,7 +63,7 @@ const items2 = [
         end_time: moment().add(3, 'hour'),
         data: '1',
     },
-] as TimelineItemCustom[];
+];
 
 class ExampleOfUsingReactCalendarTimelineWithCustomGroupAndItemExtension extends React.Component {
     render() {
@@ -126,13 +126,13 @@ const Example: React.FC = () => (
     </Timeline>
 );
 
-const groups = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }] as TimelineGroupBase[];
+const groups: TimelineGroupBase[] = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }];
 
-const items = [
+const items: TimelineItemBase<number>[] = [
     { id: 1, group: 1, title: 'item 1', start_time: 1, end_time: 1 },
     { id: 2, group: 2, title: 'item 2', start_time: 1, end_time: 1 },
     { id: 3, group: 1, title: 'item 3', start_time: 1, end_time: 1 },
-] as TimelineItemBase<number>[];
+];
 
 const defaultTimeStart = moment()
     .startOf('day')