From f7975f128067b554de938ddb1213e95e9bc9d398 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Fri, 31 May 2024 13:36:23 +0100
Subject: [PATCH] Schedules minor fixes (#4429)

# What this PR does

Schedules minor fixes

## Which issue(s) this PR closes


## Checklist

- [ ] Unit, integration, and e2e (if applicable) tests updated
- [ ] Documentation added (or `pr:no public docs` PR label added if not
required)
- [ ] Added the relevant release notes label (see labels prefixed w/
`release:`). These labels dictate how your PR will
    show up in the autogenerated release notes.
---
 .../src/models/schedule/schedule.ts           |  6 ++---
 .../src/pages/schedule/Schedule.styles.ts     |  6 +++++
 .../src/pages/schedule/Schedule.tsx           | 26 ++++++++++---------
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/grafana-plugin/src/models/schedule/schedule.ts b/grafana-plugin/src/models/schedule/schedule.ts
index 081dd95cfe..61bb21666c 100644
--- a/grafana-plugin/src/models/schedule/schedule.ts
+++ b/grafana-plugin/src/models/schedule/schedule.ts
@@ -538,7 +538,7 @@ export class ScheduleStore extends BaseStore {
     const startMoment = this.rootStore.timezoneStore.calendarStartDate;
 
     const days =
-      getTotalDaysToDisplay(scheduleView || this.scheduleView, this.rootStore.timezoneStore.calendarStartDate) + 1;
+      getTotalDaysToDisplay(scheduleView || this.scheduleView, this.rootStore.timezoneStore.calendarStartDate) + 2;
 
     try {
       const schedule = await this.loadItem(scheduleId);
@@ -614,7 +614,7 @@ export class ScheduleStore extends BaseStore {
   async updateShiftSwaps(scheduleId: Schedule['id'], startMoment: dayjs.Dayjs) {
     const fromString = getFromString(startMoment);
 
-    const days = getTotalDaysToDisplay(this.scheduleView, this.rootStore.timezoneStore.calendarStartDate) + 1;
+    const days = getTotalDaysToDisplay(this.scheduleView, this.rootStore.timezoneStore.calendarStartDate) + 2;
 
     const dayBefore = startMoment.subtract(1, 'day');
 
@@ -658,7 +658,7 @@ export class ScheduleStore extends BaseStore {
   async updatePersonalEvents(userPk: ApiSchemas['User']['pk'], startMoment: dayjs.Dayjs, isUpdateOnCallNow = false) {
     const fromString = getFromString(startMoment);
 
-    const days = getTotalDaysToDisplay(ScheduleView.OneWeek, this.rootStore.timezoneStore.calendarStartDate) + 1;
+    const days = getTotalDaysToDisplay(ScheduleView.OneWeek, this.rootStore.timezoneStore.calendarStartDate) + 2;
 
     const dayBefore = startMoment.subtract(1, 'day');
 
diff --git a/grafana-plugin/src/pages/schedule/Schedule.styles.ts b/grafana-plugin/src/pages/schedule/Schedule.styles.ts
index 077d1ac22b..73328590c4 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.styles.ts
+++ b/grafana-plugin/src/pages/schedule/Schedule.styles.ts
@@ -47,5 +47,11 @@ export const getScheduleStyles = (theme: GrafanaTheme2) => {
       margin: 50px auto;
       text-align: center;
     `,
+
+    datePicker: css`
+      position: absolute;
+      z-index: 1060;
+      top: 0;
+    `,
   };
 };
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index ff8625d6a9..703627adc7 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -333,18 +333,20 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                               this.setState({ calendarStartDatePickerIsOpen: !calendarStartDatePickerIsOpen });
                             }}
                           />
-                          <DatePicker
-                            isOpen={calendarStartDatePickerIsOpen}
-                            value={store.timezoneStore.calendarStartDate.toDate()}
-                            onChange={(newDate) => {
-                              store.timezoneStore.setCalendarStartDate(
-                                getCalendarStartDate(dayjs(newDate), scheduleView)
-                              );
-                              this.handleDateRangeUpdate();
-                              this.setState({ calendarStartDatePickerIsOpen: false });
-                            }}
-                            onClose={() => this.setState({ calendarStartDatePickerIsOpen: false })}
-                          />
+                          <div className={styles.datePicker}>
+                            <DatePicker
+                              isOpen={calendarStartDatePickerIsOpen}
+                              value={store.timezoneStore.calendarStartDate.toDate()}
+                              onChange={(newDate) => {
+                                store.timezoneStore.setCalendarStartDate(
+                                  getCalendarStartDate(dayjs(newDate), scheduleView)
+                                );
+                                this.handleDateRangeUpdate();
+                                this.setState({ calendarStartDatePickerIsOpen: false });
+                              }}
+                              onClose={() => this.setState({ calendarStartDatePickerIsOpen: false })}
+                            />
+                          </div>
                         </HorizontalGroup>
                         <HorizontalGroup>
                           <RadioButtonGroup