Merge pull request #3446 from IgniteUI/didimmova/calendar-orientation

feat(calendar): create calendar orientation sample

Author: simeonoff

live-editing/configs/CalendarConfigGenerator.ts

@@ -1,4 +1,5 @@
 import {IgxButtonModule,
+IgxButtonGroupModule,
 IgxCalendarModule,
 IgxCardModule,
 IgxDialogModule,
@@ -102,6 +103,16 @@ export class CalendarConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/scheduling/calendar/"
         }));
 
+        configs.push(new Config({
+            component: 'CalendarSample9Component',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxButtonGroupModule', 'IgxCalendarModule', 'CalendarSample9Component'],
+                ngDeclarations: ['CalendarSample9Component'],
+                ngImports: ['IgxButtonModule', 'IgxButtonGroupModule', 'IgxCalendarModule']
+            }),
+            shortenComponentPathBy: "/scheduling/calendar/"
+        }));
+
         configs.push(new Config({
             component: 'CalendarStylingSampleComponent',
             appModuleConfig: new AppModuleConfig({

src/app/app.module.ts

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule, HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
-    IgxAutocompleteModule, IgxButtonModule, IgxDropDownModule,
+    IgxAutocompleteModule, IgxButtonModule, IgxButtonGroupModule, IgxDropDownModule,
     IgxIconModule, IgxInputGroupModule, IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule, IgxTreeModule
 } from 'igniteui-angular';
 import { AppRoutingModule } from './app-routing.module';
@@ -35,6 +35,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
         BrowserModule,
         BrowserAnimationsModule,
         IgxButtonModule,
+        IgxButtonGroupModule,
         FormsModule,
         HttpClientModule,
         HammerModule,

src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.html

@@ -0,0 +1,31 @@
+<div class="preview__sample">
+    <article class="calendar-wrapper">
+        <igx-calendar [monthsViewNumber]="2" [headerOrientation]="headerOrientation" [orientation]="orientation"></igx-calendar>
+    </article>
+
+    <div class="preview__settings">
+        <small>Header orientation</small>
+        <igx-buttongroup selectionMode="singleRequired">
+            <button
+                igxButton
+                (click)="setHeaderOrientation(ho)"
+                *ngFor="let ho of orientations"
+                [selected]="ho === headerOrientation"
+            >
+                {{ ho }}
+            </button>
+        </igx-buttongroup>
+
+        <small>View orientation</small>
+        <igx-buttongroup selectionMode="singleRequired">
+            <button
+                igxButton
+                (click)="setOrientation(vo)"
+                *ngFor="let vo of orientations"
+                [selected]="vo === orientation"
+            >
+                {{ vo }}
+            </button>
+        </igx-buttongroup>
+    </div>
+</div>

src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.scss

@@ -0,0 +1,51 @@
+$padding: 2rem;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 90px);
+    overflow: hidden;
+}
+
+small {
+    &:not(:first-child) {
+        margin-block-start: 1rem;
+    }
+}
+
+.calendar-wrapper {
+    flex-basis: 100px;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    margin: 20px;
+}
+
+.igx-calendar{
+    box-shadow: 0 1px 3px 0 rgba(0,0,0,.26),
+    0 1px 1px 0 rgba(0,0,0,.12),
+    0 2px 1px -1px rgba(0,0,0,.08);
+}
+
+.preview {
+    display: flex;
+    overflow: hidden;
+    height: 100%;
+
+    &__sample {
+        display: flex;
+        flex-wrap: wrap;
+        overflow: auto;
+        flex: 1;
+    }
+
+    &__settings {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        background: hsla(var(--ig-gray-50));
+        border-left: 1px solid hsla(var(--ig-gray-300));
+        padding: $padding;
+        overflow-x: auto;
+    }
+}

src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.ts

@@ -0,0 +1,28 @@
+import { Component, ViewChild } from '@angular/core';
+import {
+    IgxButtonGroupComponent}
+from 'igniteui-angular';
+
+const orientations = ["horizontal", "vertical"] as const;
+type Orientation = (typeof orientations)[number];
+
+@Component({
+  selector: 'app-calendar',
+  styleUrls: ['./calendar-sample-9.component.scss'],
+  templateUrl: './calendar-sample-9.component.html'
+})
+
+export class CalendarSample9Component {
+    @ViewChild(IgxButtonGroupComponent, { static: true }) public buttonGroup: IgxButtonGroupComponent;
+    protected orientations = Array.from(orientations, (o) => o);
+    protected headerOrientation: Orientation = "horizontal";
+    protected orientation: Orientation = "horizontal";
+
+    protected setHeaderOrientation(orientation: Orientation) {
+        this.headerOrientation = orientation;
+    }
+
+    protected setOrientation(orientation: Orientation) {
+        this.orientation = orientation;
+    }
+}

src/app/scheduling/scheduling-routes-data.ts

@@ -7,6 +7,7 @@ export const schedulingRoutesData = {
     'calendar-sample-6': { displayName: 'Calendar Disabled Dates', parentName: 'Calendar' },
     'calendar-sample-7': { displayName: 'Calendar Special Dates', parentName: 'Calendar' },
     'calendar-sample-8': { displayName: 'Calendar Range Mode', parentName: 'Calendar' },
+    'calendar-sample-9': { displayName: 'Calendar Orientation', parentName: 'Calendar' },
     'calendar-rtl-sample': { displayName: 'Calendar RTL Support', parentName: 'Calendar' },
     'calendar-days-view': { displayName: 'Calendar Days View', parentName: 'Calendar' },
     'calendar-months-view': { displayName: 'Calendar Months View', parentName: 'Calendar' },

src/app/scheduling/scheduling-routing.module.ts

@@ -10,6 +10,7 @@ import { CalendarSample5Component } from './calendar/calendar-sample-5/calendar-
 import { CalendarSample6Component } from './calendar/calendar-sample-6/calendar-sample-6.component';
 import { CalendarSample7Component } from './calendar/calendar-sample-7/calendar-sample-7.component';
 import { CalendarSample8Component } from './calendar/calendar-sample-8/calendar-sample-8.component';
+import { CalendarSample9Component } from './calendar/calendar-sample-9/calendar-sample-9.component';
 import { CalendarRtlSampleComponent } from './calendar/calendar-rtl-sample/calendar-rtl-sample.component';
 import { CalendarStylingSampleComponent } from './calendar/calendar-styling-sample/calendar-styling-sample.component';
 import { CalendarYearsViewComponent } from './calendar/calendar-years-view/calendar-years-view.component';
@@ -90,6 +91,11 @@ export const schedulingRoutes: Routes = [
         data: schedulingRoutesData['calendar-sample-8'],
         path: 'calendar-sample-8'
     },
+    {
+        component: CalendarSample9Component,
+        data: schedulingRoutesData['calendar-sample-9'],
+        path: 'calendar-sample-9'
+    },
     {
         component: CalendarRtlSampleComponent,
         data: schedulingRoutesData['calendar-rtl-sample'],

src/app/scheduling/scheduling.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
-    IgxAutocompleteModule, IgxButtonModule, IgxCalendarModule, IgxCardModule, IgxDatePickerModule,
+    IgxAutocompleteModule, IgxButtonModule, IgxButtonGroupModule, IgxCalendarModule, IgxCardModule, IgxDatePickerModule,
     IgxDateRangePickerModule, IgxDateTimeEditorModule, IgxDialogModule, IgxDropDownModule, IgxIconModule,
     IgxInputGroupModule, IgxSelectModule, IgxSnackbarModule, IgxSwitchModule, IgxTextSelectionModule,
     IgxTimePickerModule, IgxToastModule, IgxToggleModule
@@ -17,6 +17,7 @@ import { CalendarSample5Component } from './calendar/calendar-sample-5/calendar-
 import { CalendarSample6Component } from './calendar/calendar-sample-6/calendar-sample-6.component';
 import { CalendarSample7Component } from './calendar/calendar-sample-7/calendar-sample-7.component';
 import { CalendarSample8Component } from './calendar/calendar-sample-8/calendar-sample-8.component';
+import { CalendarSample9Component } from './calendar/calendar-sample-9/calendar-sample-9.component';
 import { CalendarRtlSampleComponent } from './calendar/calendar-rtl-sample/calendar-rtl-sample.component';
 import { CalendarStylingSampleComponent } from './calendar/calendar-styling-sample/calendar-styling-sample.component';
 import { CalendarYearsViewComponent } from './calendar/calendar-years-view/calendar-years-view.component';
@@ -73,6 +74,7 @@ import { DateRangePickerRangeButtonsComponent } from './daterangepicker/daterang
         CalendarSample6Component,
         CalendarSample7Component,
         CalendarSample8Component,
+        CalendarSample9Component,
         CalendarRtlSampleComponent,
         CalendarMultiViewComponent,
         CalendarStylingSampleComponent,
@@ -116,6 +118,8 @@ import { DateRangePickerRangeButtonsComponent } from './daterangepicker/daterang
         ReactiveFormsModule,
         SchedulingRoutingModule,
         IgxAutocompleteModule,
+        IgxButtonGroupModule,
+        IgxButtonModule,
         IgxCalendarModule,
         IgxCardModule,
         IgxDatePickerModule,