Color weekends on Month view

[Arturo Martinez]

Can i set a gray color for all the Weekends on the monthly view? (aka Sunday, Saturday).
Right now all columns are white and i cant see which days are weekends

[Ashokkumar Karuppasamy]

Hi Arturo Martinez,

Thanks for reaching out us!

You can achieve your requirement of displaying different weekend background colors in the Month View by overriding the Schedule Month View style. The attached code snippet and sample demonstrate the solution. Please try it and let us know if you need any further assistance.

Sample: Schedule-month-view-sample (forked) - StackBlitz

[app.component.ts]

  styles: [

    `

.e-schedule .e-month-view .e-work-cells:not(.e-work-days) {

  background-color: gray;

}

  `],

Screenshot:



Regards,
Ashok

[Arturo Martinez]

i tried overriding the style as your example shown but its not geting applyed
am I Missing Something?

<div class="control-section">

<div class="col-lg-12 content-wrapper">

<ejs-schedule

#scheduleObj

width='100%'

cssClass='timeline-resource-grouping'

height='100%'

allowSwiping="false"

[showTimeIndicator]="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"

(actionBegin)="onMovileActionBegin($event)"

>

<ng-template #eventSettingsTemplate let-data>

<div class='template-wrap'>

<div style="width: 100%; font-weight: bolder;" class="subject">{{data.Subject}}</div>

<div style="width: 100%; font-weight: bolder;" class="some-image"><img class="image" src="https://ej2.syncfusion.com/angular/demos/assets/schedule/images/margaret.png" /> {{data.Saldo | currency:'MX' : 'symbol' : '1.0-0' }}</div>

</div>

</ng-template>

<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 [ngStyle]="{

'height': isChildNode(data) ? '100%' : null,

'display': 'flex',

'align-items': 'center',

'justify-content': 'start'

}">

<div [ngStyle]="{ 'display': isChildNode(data) ? 'flex' : 'none'}" [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>

<label style="margin-left: 8px;">{{data.resourceData.text}}</label>

</div>

</ng-template>

<!-- Rates on Cells instead of header

<ng-template #cellTemplate let-data>

<div class="templatewrap" *ngIf="isInitialized" [innerHTML]="getDailyRates(data)"></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="TimelineMonth"></e-view>

</e-views>

</ejs-schedule>

</div>

</div>

[Ashokkumar Karuppasamy]

Hi Arturo Martinez,

Thanks for the update. In our last update, we had overridden the styles in the Month View. However, in the code snippet you shared, you are using the Timeline Month View. Therefore, we suggest using the schedule renderCell event. In this event, you can customize the background color for weekends or adjust it based on your needs. The attached code snippet and sample demonstration are provided below. Please try the suggested solution and let us know if you need any further assistance.

Sample: schedule-timeline-month-view-samples (forked) - StackBlitz

[app.component.html]

    <ejs-schedule #scheduleObj width='100%' cssClass='timeline-resource-grouping' height='650px' (renderCell)="onRenderCell($event)"

      [selectedDate]="selectedDate" [group]="group" [workDays]="workDays" [eventSettings]="eventSettings">

[app.component.ts]

  onRenderCell(args: any) {

    if (this.scheduleObj.currentView === 'TimelineMonth') {

      if (args.elementType === "dateHeader" || args.elementType === "monthCells" || args.elementType === 'resourceGroupCells') {

        let date = new Date(args.date);

        let day = date.getDay(); // 0 = Sunday, 6 = Saturday

        if (day === 0 || day === 6) {

          // Check if the date is Saturday or Sunday

          args.element.style.backgroundColor = 'grey';

            args.element.classList.add("weekend");

        }

    }

    }

Screenshot:

Regards,
Ashok