新页面添加显示滚动条显示

src/views/IM/diagnosis-admin/overviewScheduling.vue

@@ -17,7 +17,7 @@
           filterable
           clearable
           :options="interfaceOptions"
-          :props="props"
+          :props="props" 
           placeholder="选择科室"
           :show-all-levels="false"
           @expand-change="handleItemChange"
@@ -26,8 +26,8 @@
         <el-date-picker
           v-model="dateTime"
           class="serviceSchedule_dateTime"
-          type="datetime"
-          value-format="yyyy-MM-dd HH:mm:dd"
+          type="date"
+          value-format="yyyy-MM-dd"
           placeholder="选择日期时间"
           @change="getNowDate"
         />
@@ -40,13 +40,19 @@
         </el-button>
       </div>
       <div 
-        class="fullCalendar-show"
+        class="fullCalendar-show" 
+        style="width:100%"
       >
-        <FullCalendar
-          ref="fullCalendar"
-          :options="calendarOptions"
-          class="FullCalendar"
-        />
+        <div 
+          class="fullCalendar-show-out" 
+          :style="{width:getWidth}"
+        >
+          <FullCalendar 
+            ref="fullCalendar"
+            :options="calendarOptions"
+            class="FullCalendar"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -102,6 +108,8 @@
           eventColor: '#fff',
           eventBackgroundColor: '#fff',
           events: [],
+          slotMinWidth:50,
+          resourceAreaWidth:'5%',
           allDaySlot: false, // 周，日视图时，all-day 不显示
           slotDuration: '00:05:00',
           slotMinTime: '09:00',
@@ -121,6 +129,7 @@
         loading: false,
         doctorList: [],
         index: 0,
+        getWidth:'100%'
       };
     },
     watch: {},
@@ -216,6 +225,7 @@
                 };
               }
             );
+            this.getWidth = 3000 + 'px';
             this.calendarOptions.events = [].concat(dutyRosterPreList, dutyWorkList);
             const calendarApi = this.$refs.fullCalendar.getApi();
             calendarApi.gotoDate(this.dateTime);
@@ -235,11 +245,13 @@
   width: 100%;
 }
 .agment-box {
-  height: 100%;
+  // height: 100%;
   padding: 0 25px 25px 25px;
   border-radius: 6px;
   flex: 3.8;
   width: 100%;
+  max-height: 1000px;
+  overflow: hidden;
   .serviceSchedule_select {
     width: 100%;
     background: #fff;
@@ -247,7 +259,7 @@
     align-items: center;
     padding: 20px 0 0px 20px;
     .serviceSchedule-cascader {
-      height: 100%;
+      // height: 100%;
       background: #fff;
       margin-right: 15px;
     }
@@ -262,9 +274,12 @@
       align-items: center;
     }
   }
-  .fullCalendar-show{
-    // max-width: 300px !important;
-    overflow-x:scroll;
+   .fullCalendar-show{
+    width: 100%;
+    overflow: scroll;
+    // /deep/ .fc-resource{
+    //   width: 100% !important;
+    // }
   }
   .FullCalendar {
     background: #fff;
@@ -279,10 +294,17 @@
       display: flex;
     }
   }
-}
- /deep/ .fc-col-header-cell{
-      max-width: 80px !important;
-    }
+  //  /deep/.fc-col-header-cell{
+  //   width: 100px !important;
+  // }
+  // /deep/.fc-timegrid-col{
+  //   width: 100px !important;
+  // }
+  //  /deep/.fc-timegrid-col-frame{
+  //    width: 100px !important;
+  // }
+}
+ 
 .w2 {
   /deep/.fc-prev-button {
     background: #f4f4f5;
@@ -291,6 +313,7 @@
   }
 }
  /deep/ .fc-timegrid-col-frame{
+    // width: 100px !important; 
     background: #fff !important;
  }
 .w3 {