DatePicker: Add cursor not-allowed style and hover background color (#106451)

* DatePicker add cusor not-allowed style and hover background color

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx

@@ -105,6 +105,7 @@ export const getBodyStyles = (theme: GrafanaTheme2) => {
 
       '&:disabled': {
         color: theme.colors.action.disabledText,
+        cursor: 'not-allowed',
       },
     }),
     body: css({
@@ -153,13 +154,18 @@ export const getBodyStyles = (theme: GrafanaTheme2) => {
           outline: 0,
         },
 
-      [`${hasActiveSelector}, .react-calendar__tile--active, .react-calendar__tile--active:hover`]: {
+      [`${hasActiveSelector}, .react-calendar__tile--active`]: {
         color: theme.colors.primary.contrastText,
         fontWeight: theme.typography.fontWeightMedium,
         background: theme.colors.primary.main,
         border: '0px',
       },
 
+      '.react-calendar__tile:hover:not(.react-calendar__tile--active):not(.react-calendar__tile--rangeEnd):not(.react-calendar__tile--rangeStart)':
+        {
+          backgroundColor: theme.colors.action.hover,
+        },
+
       '.react-calendar__tile--rangeEnd, .react-calendar__tile--rangeStart': {
         padding: 0,
         border: '0px',