diff --git a/packages/grafana-ui/src/components/TimePicker/TimePickerCalendar.tsx b/packages/grafana-ui/src/components/TimePicker/TimePickerCalendar.tsx
index f0cd06e3595..d5e333c56dc 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimePickerCalendar.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimePickerCalendar.tsx
@@ -28,6 +28,14 @@ export class TimePickerCalendar extends PureComponent<Props> {
     onChange(newDate);
   };
 
+  onDrilldown = (props: any) => {
+    // this is to prevent clickout side wrapper from triggering when drilling down
+    if (window.event) {
+      // @ts-ignore
+      window.event.stopPropagation();
+    }
+  };
+
   render() {
     const { value, roundup, timeZone } = this.props;
     let date = stringToDateTimeType(value, roundup, timeZone);
@@ -44,6 +52,7 @@ export class TimePickerCalendar extends PureComponent<Props> {
         className="time-picker-calendar"
         tileClassName="time-picker-calendar-tile"
         onChange={this.onCalendarChange}
+        onDrillDown={this.onDrilldown}
         nextLabel={<span className="fa fa-angle-right" />}
         prevLabel={<span className="fa fa-angle-left" />}
       />
diff --git a/packages/grafana-ui/src/components/TimePicker/_TimePicker.scss b/packages/grafana-ui/src/components/TimePicker/_TimePicker.scss
index 398cac9925c..cc63a2cd196 100644
--- a/packages/grafana-ui/src/components/TimePicker/_TimePicker.scss
+++ b/packages/grafana-ui/src/components/TimePicker/_TimePicker.scss
@@ -111,8 +111,9 @@ $arrowPadding: $arrowPaddingToBorder * 3;
 }
 
 .time-picker-calendar {
-  border: 1px solid $popover-border-color;
+  border: 1px solid $input-border-color;
   color: $black;
+  width: 260px;
 
   .react-calendar__navigation__label,
   .react-calendar__navigation__arrow,
@@ -150,6 +151,7 @@ $arrowPadding: $arrowPaddingToBorder * 3;
       background: $panel-editor-viz-item-bg-hover;
       border: $panel-editor-viz-item-border-hover;
       color: $text-color-strong;
+      position: relative;
     }
   }