fullcalendar样式改造

fullcalendar里默认是大表格，有日程事件显示在日期上，最近做了一个不一样的日期样式，项目中用了fullcalendar，所以就在此基础上做了一番改造，并把代码记录在这里，便于以后查询，效果如图所示：

 

 代码在此（vue项目）：

.right_small{ width:5.28rem; height:4.5rem; background: #ffffff; border-radius: 0.05rem; padding-left:0.28rem; padding-right:0.28rem; }
/* 日历日程 */
    /* 标题 */
#calendar_index{ width:100%; height:4.5rem; border-bottom:1px solid #f5f4f7; }
.right_calendar{ border-top:1px solid #e52355; position:relative;}
#calendar_index .fc-toolbar.fc-header-toolbar{ margin-top:0.15rem; height:0.6rem; }
#calendar_index .fc-left{ width:50%; border-right:1px solid #f5f4f7; }
#calendar_index .fc-right{ width:50%; line-height: 0.6rem; font-weight:normal; padding-left:0.3rem; }
  /* 标题左侧--今日 */
.today_div{ position:absolute; left:0; top:0; z-index: 999; opacity: 1; background: #ffffff; margin:0.15rem 0 0 0.28rem; text-align: center; }
.today_date{ color:#e52355; font-weight: lighter; font-size: 0.36rem; }
.today_all{ color:#adadad; font-weight: lighter; font-size: 0.14rem; }
  /* 标题右侧--左右键 */
#calendar_index .fc-right h2{ color:#333333; font-weight: lighter; font-size: 0.2rem; margin:0 0.1rem 0 0.1rem; }
#calendar_index .fc-right button{ border-radius: 50%; width:0.2rem; height:0.2rem; text-align: center; margin-top:0.2rem; background: #e8f0ff; }
#calendar_index .fc-right span{ margin-left:-0.09rem!important; color:#5d93ff; line-height: 0.1rem; }
#calendar_index .fc-right>div{ width:100%; display:flex; }
#calendar_index .fc-grid .fc-day-number { float: left;padding: 0 0.02rem;text-align: center;background: red !important; width:100%; height:0.55rem;line-height: 0.55rem; }
#calendar_index .fc-body{ height:2.88rem; }
#calendar_index .fc-day-grid-container{ overflow-x: hidden!important; height: 2.7rem!important; overflow-y: hidden!important; border:none!important; }
   /* table星期标题 */
#calendar_index .fc-widget-header { margin:0!important; text-align: center; height:0.38rem; line-height: 0.38rem; font-size: 0.18rem; font-weight: normal; color:#333333; }

#calendar_index .fc-basic-view .fc-body .fc-row{ height:0.42rem!important; }
#calendar_index .fc-day-number{ float:left!important; }
#calendar_index .fc .fc-row .fc-content-skeleton table, .fc .fc-row .fc-content-skeleton td, .fc .fc-row .fc-helper-skeleton td{ line-height: 0.4rem; border-color:#ffffff!important; }
#calendar_index .fc-today{ background: #ffffff!important; }
/*  */
#calendar_index .fc-past a,#calendar_index .fc-future a{ display:inline-block; background: #ffffff!important; border-radius: 50%; width:0.35rem; height:0.35rem; text-align: center; margin-left:0.1rem; }
#calendar_index .fc-today a{ display:inline-block; background: chartreuse!important; border-radius: 50%; width:0.35rem; height:0.35rem; text-align: center; margin-left:0.1rem;}
#calendar_index .fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead{ border:none!important; }