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.
grafana · May 31, 2024 · f7975f1 · f7975f1
1 parent 08d1e00
commit f7975f1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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