change styles year-component

samples/react-calendar/src/webparts/calendar/components/Calendar.tsx

@@ -12,7 +12,7 @@ import { CommunicationColors ,  FluentCustomizations, FluentTheme  } from '@uifa
 import CalendarToolbar from './CustomToolbar';
 import Year from './Year';
 
-import { Calendar as OriCalendar, momentLocalizer  } from 'react-big-calendar';
+import { Calendar as MyCalendar, momentLocalizer  } from 'react-big-calendar';
 
 import {
   Customizer,
@@ -342,7 +342,7 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
               <div>
                 {this.state.isloading ? <Spinner size={SpinnerSize.large} label={strings.LoadingEventsLabel} /> :
                   <div className={styles.container}>
-                    <OriCalendar
+                    <MyCalendar
                       dayPropGetter = {this.dayPropGetter}
                       localizer={localizer}
                       selectable
@@ -376,41 +376,6 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
                         }
                       }
                     />
-                    {/*<BigCalendar
-                      dayPropGetter = {this.dayPropGetter}
-                      localizer={localizer}
-                      selectable
-                      events={this.state.eventData}
-                      startAccessor="EventDate"
-                      endAccessor="EndDate"
-                      eventPropGetter={this.eventStyleGetter}
-                      onSelectSlot={this.onSelectSlot}
-                      components={{
-                        event: this.renderEvent,
-                        toolbar: CalendarToolbar,
-                      }}
-                      onSelectEvent={this.onSelectEvent}
-                      defaultDate={moment().startOf('day').toDate()}
-                      //views={{
-                      //  day: true,
-                      //  week: true,
-                      //  month: true,
-                     //   agenda: true,
-                     //  work_week: false
-                    //  }}
-                      //views={['month','week','day','agenda']}
-                      messages={
-                        {
-                          'today': strings.todayLabel,
-                          'previous': strings.previousLabel,
-                          'next': strings.nextLabel,
-                          'month': strings.monthLabel,
-                          'week': strings.weekLabel,
-                          'day': strings.dayLable,
-                          'showMore': total => `+${total} ${strings.showMore}`,
-                        }
-                      }
-                    />*/}
                   </div>
                 }
               </div>

samples/react-calendar/src/webparts/calendar/components/Year.module.scss

@@ -12,7 +12,6 @@
 
 .monthName {
   color: $ms-color-themeDark;
-  //color: #ccbe88;
   font-weight: bold;
 }
 
@@ -35,16 +34,16 @@
 
 .date.inMonth:hover {
   cursor: pointer;
-  //background: #ccbe88;
   background: $ms-color-themeDark;
+  color: white;
+  font-weight: bold;
 }
 
 .today {
-  //background: #ccbe88;
   background: $ms-color-themeDark;
 }
 
-.date.prev-month,
+.date.prevMonth,
-.date.next-month {
+.date.nextMonth {
   color: grey;
 }

samples/react-calendar/src/webparts/calendar/components/Year.tsx

@@ -44,7 +44,7 @@ function CalendarDate(props) {
 
   if (dateToRender.month() < dateOfMonth.month()) {
     return (
-      <button disabled={true} className={css(styles.date, styles["prev-month"])}>
+      <button disabled={true} className={css(styles.date, styles["prevMonth"])}>
         {dateToRender.date()}
       </button>
     );
@@ -52,7 +52,7 @@ function CalendarDate(props) {
 
   if (dateToRender.month() > dateOfMonth.month()) {
     return (
-      <button disabled={true} className={css(styles.date, styles["next-month"])}>
+      <button disabled={true} className={css(styles.date, styles["nextMonth"])}>
         {dateToRender.date()}
       </button>
     );
@@ -113,8 +113,7 @@ class YearCalendar extends React.Component<IYearCalendarProps, IYearCalendarStat
     return (
       <div className={styles.month}>
         <div className={styles.monthName}>
-          {/*this.state.calendar.currentDate.format('MMMM').toUpperCase()*/}
+          {this.state.calendar.currentDate.format('MMMM').toUpperCase()}
-          {this.state.calendar.currentDate.lang("en").format('MMMM','en').toUpperCase()}
         </div>
         {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, index) => (
           <span key={index} className={styles.day}>
@@ -129,7 +128,7 @@ class YearCalendar extends React.Component<IYearCalendarProps, IYearCalendarStat
                 dateToRender={date}
                 dateOfMonth={this.state.calendar.currentDate}
                 onClick={(e,obj) => {
-                  this.openView(obj.toDate(), "day", e) //open day-view
+                  this.openView(obj.toDate(), "day", e); //open day-view
                   }
                 }
               />
@@ -141,7 +140,7 @@ class YearCalendar extends React.Component<IYearCalendarProps, IYearCalendarStat
   }
 
   private openView = (date, view, e) => {
-    e.preventDefault()
+    e.preventDefault();
     this.props.onDrillDown(date, view);
   }