Scheduler view on mobile

[Arturo Martinez]

I want to mantain the web view of the scheduler when im on the mobile:

I get this colapsed/expanded groups when on mobile

scheduler HTML

<ejs-schedule

#scheduleObj

width='100%'

cssClass='timeline-resource-grouping'

height='auto'

allowSwiping="false"

[selectedDate]="selectedDate"

[group]="group"

[workDays]="workDays"

[eventSettings]="eventSettings"

[timeScale]="timeScale"

[currentView]="currentView"

(actionComplete)="onActionComplete($event)"

(renderCell)="onRenderCell($event)"

(dataBound)="onDataBound()"

(popupOpen)="onPopupOpen($event)"

(dragStart)="onDragStart($event)"

(dragStop)="onDragStop($event)"

(eventRendered)="onEventRendered($event)"

(resizeStart)="onResizeStart($event)"

(resizeStop)="onResizeStop($event)"

[quickInfoOnSelectionEnd] = "true"

>

<ng-template #dateHeaderTemplate let-data>

<div class="date-text"></div>

<div [innerHTML]="getDateHeaderText(data.date)"></div>

</ng-template>

<ng-template #resourceHeaderTemplate let-data let-index>

<div style="height: 100%; display: flex; align-items: center; justify-content: start;">

<div [matMenuTriggerFor]="menu" class="btn btn-icon btn-custom btn-icon-muted">

<img class="thumbnail" *ngIf="isChildNode(data)" [src]="getIconClass(data.resourceData.text)" alt="{{data.resourceData.ImageName}}" style="height: 57px; width: 30px;" />

</div>

<mat-menu #menu="matMenu">

<ng-container *ngFor="let estatus of estatusArray">

<button (click)="onStatusChange(data.resourceData.text, estatus.Descripcion)" mat-menu-item>

<span>{{estatus.Descripcion}}</span>

</button>

</ng-container>

</mat-menu>

{{data.resourceData.text}}

</div>

</ng-template>

<e-resources>

<e-resource

field='ProjectId'

title='Choose Project'

[dataSource]='tipoHabGroupDataSource'

[allowMultiple]='allowMultiple'

name='Type'

textField='text'

idField='id'

colorField='color'

>

</e-resource>

<e-resource

field='TaskId'

title='Category'

[dataSource]='habitacionPorTipoDataSource'

[allowMultiple]='allowMultiple'

name='Rooms'

textField='text'

idField='id'

groupIDField='groupId'

colorField='color'

>

</e-resource>

</e-resources>

<e-views>

<e-view option="TimelineDay" [interval]="dayInterval"></e-view>

<e-view option="TimelineWeek"></e-view>

<e-view option="TimelineWorkWeek"></e-view>

<e-view option="TimelineMonth"></e-view>

</e-views>

</ejs-schedule>

[Ashokkumar Karuppasamy]

Hi Arturo Martinez,

You can achieve this requirement by setting the enableCompactView property of the Schedule component to false. This will allow you to see the web layout in the same view as on mobile. Please refer to the attached code snippet and sample demonstration for the solution. Let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/webview-fk5ik4?file=src%2Fapp.component.ts

  public group: GroupModel = {

    resources: ['Projects', 'Categories'], enableCompactView: false

  };

 

Regards,

Ashok