refactor: manual calendar config init objects (#790)

Author: damyanpetev

samples/scheduling/calendar/disabled-dates/src/index.tsx

@@ -1,37 +1,33 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrCalendar, IgrCalendarModule, DateRangeDescriptor, DateRangeType } from 'igniteui-react';
+import { IgrCalendar, DateRangeDescriptor, DateRangeType } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrCalendarModule.register();
-
 export default class CalendarDisabledDates extends React.Component<any, any> {
 
-    //public disabledDates: DateRangeDescriptor[];
-
     constructor(props: any) {
-        super(props);                
+        super(props);
 
         const today = new Date();
         const range = [
             new Date(today.getFullYear(), today.getMonth(), 3),
             new Date(today.getFullYear(), today.getMonth(), 8)
         ];
 
-        const desc: DateRangeDescriptor = new DateRangeDescriptor();
-        desc.dateRange = range;
-        desc.rangeType = DateRangeType.Specific;
-        
-        const dates: DateRangeDescriptor[] = [desc];
+        const desc: DateRangeDescriptor = {
+            dateRange: range,
+            type: DateRangeType.Specific,
+        }
+        const disabledDates = [desc];
 
-        this.state = { disabledDates: dates};        
+        this.state = { disabledDates };
     }
 
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                <IgrCalendar disabledDates={this.state.disabledDates} style={{width: '400px'}}/>                
+                <IgrCalendar disabledDates={this.state.disabledDates} style={{width: '400px'}}/>
             </div>
         );
     }

samples/scheduling/calendar/formatting/src/index.tsx

@@ -11,14 +11,15 @@ IgrRadioModule.register();
 export default class CalendarFormatting extends React.Component<any, any> {
 
     constructor(props: any) {
-        super(props);                
+        super(props);
         this.onRadioChange = this.onRadioChange.bind(this);
 
-        const formatOptions: IgrCalendarFormatOptions = new IgrCalendarFormatOptions();
-        formatOptions.month = 'short';
-        formatOptions.weekday = 'short';
+        const formatOptions: IgrCalendarFormatOptions = {
+            month: 'short',
+            weekday: 'short',
+        }
 
-        this.state = { calendarLocale: "en", calendarFormat: formatOptions };        
+        this.state = { calendarLocale: "en", calendarFormat: formatOptions };
     }
 
     public render(): JSX.Element {
@@ -45,7 +46,7 @@ export default class CalendarFormatting extends React.Component<any, any> {
                 <IgrCalendar weekStart='monday' formatOptions={this.state.calendarFormat} 
                              locale={this.state.calendarLocale}
                              value={new Date()}
-                             style={{width: '400px'}}/>                
+                             style={{width: '400px'}}/>
             </div>
         );
     }

samples/scheduling/calendar/special-dates/src/index.tsx

@@ -1,36 +1,33 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrCalendar, IgrCalendarModule, DateRangeDescriptor, DateRangeType } from 'igniteui-react';
+import { IgrCalendar, DateRangeDescriptor, DateRangeType } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrCalendarModule.register();
-
 export default class CalendarSpecialDates extends React.Component<any, any> {
 
     constructor(props: any) {
-        super(props);                
+        super(props);
 
         const today = new Date();
-
         const range = [
             new Date(today.getFullYear(), today.getMonth(), 3),
             new Date(today.getFullYear(), today.getMonth(), 8)
-        ];    
+        ];
 
-        const desc: DateRangeDescriptor = new DateRangeDescriptor();
-        desc.dateRange = range;
-        desc.rangeType = DateRangeType.Between;
-        
-        const dates: DateRangeDescriptor[] = [desc];
+        const desc: DateRangeDescriptor = {
+            dateRange: range,
+            type: DateRangeType.Between,
+        }
+        const specialDates = [desc];
 
-        this.state = { specialDates: dates};        
+        this.state = { specialDates };
     }
 
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                <IgrCalendar specialDates={this.state.specialDates} style={{width: '400px'}}/>                
+                <IgrCalendar specialDates={this.state.specialDates} style={{width: '400px'}}/>
             </div>
         );
     }