Display a Calendar View in Angular Using Moment Js

user_9940730 0
Viewed 1366

I am trying to create a calendar view from scratch using angular. I had done with displaying all dates of the month dynamically. My problem here is I need to show different background colors for the weekend dates such as Friday and Saturday using Moment I had searched on the internet I could not find any resource to help me with this. In addition to that, I need to display the days inside the first row and not as a separate row in my calendar view. My appcomponent.html code

<div class="flex-container flex-center">
    <button
        mat-icon-button
        matTooltip="Previous Month"
        [matTooltipPosition]="'above'"
        class="iconsSize ml-1 my-auto"
        (click)="previousmonth()"
    >
        <mat-icon>
            chevron_left
        </mat-icon>
    </button>
    <h4><b>{{date.format('MMMM ')}}{{date.format('YYYY ')}}</b></h4> 
    <span class="material-icons" style="padding: 7px; font-size: 20px;">
        event
    </span>
    <button
        mat-icon-button
        matTooltip="Next Month"
        [matTooltipPosition]="'above'"
        class="iconsSize ml-1 my-auto"
        (click)="nextmonth()"
    >
        <mat-icon>
            chevron_right
        </mat-icon>
    </button> 
</div>
    <div class="container-fluid">
       <div class="flex-container flex-wrap p-3 m-2">
        <div *ngFor ="let day of daysarr">
            <div class="calendar-days flex-container flex-center">{{day}}</div>
        </div>
    </div>
   </div>

My appcomponent.ts file

export class AppComponent implements OnInit {
  public date = moment();
  public daysarr;



  constructor() { }

  ngOnInit(): void {
    this.daysarr = this.createCalendar(this.date);
  }
  createCalendar(month)
  {
    let firstDay = moment(month).startOf('M');
    let days = Array.apply(null,{length: month.daysInMonth()+1})
               .map(Number.call, Number)
               .slice(1);
    for(let n=0; n < firstDay.weekday(); n++)
    {
      days.unshift(null);

    }
    return days;
  }
  public nextmonth()
  {
    this.date.add(1,'M');
    this.daysarr = this.createCalendar(this.date);
  }
  public previousmonth()
  {
    this.date.subtract(1,'M');
    this.daysarr = this.createCalendar(this.date);

  }

}

appcomponent.css

.calendar-days {
        width: 155px;
        height: 120px;
        background: #fff;
        border: 1px solid #ccc;
        padding: 3px;
    }
.flex-container {
        display: -webkit-flex;
        display: flex;
    }
.flex-center {
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

My output: enter image description here

The Output I need is: enter image description here

momentjs angular typescript
2 Answers

Hope that the below code can help you. But for the further, you might consider using the date picker

.calendar-days {
  width: 155px;
  height: 120px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 3px;

  &.previous-month,
  &.next-month {
    color: grey;
  }

  &.weekend {
    background-color: rgb(245, 245, 245);
  }

}

.flex-container {
  display: -webkit-flex;
  display: flex;
}

.flex-center {
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

And adjust html

<div class="flex-container flex-center">
  <button
    mat-icon-button
    matTooltip="Previous Month"
    [matTooltipPosition]="'above'"
    class="iconsSize ml-1 my-auto"
    (click)="previousmonth()"
  >
    <mat-icon>
      chevron_left
    </mat-icon>
  </button>
  <h4><b>{{date.format('MMMM ')}}{{date.format('YYYY ')}}</b></h4>
  <span class="material-icons" style="padding: 7px; font-size: 20px;">
        event
    </span>
  <button
    mat-icon-button
    matTooltip="Next Month"
    [matTooltipPosition]="'above'"
    class="iconsSize ml-1 my-auto"
    (click)="nextmonth()"
  >
    <mat-icon>
      chevron_right
    </mat-icon>
  </button>
</div>
<div *ngFor="let calendarItem of calendar; let i = index">
  <div class="flex-container flex-center">
    <div class="calendar-days" [class.weekend]="day.isWeekend" [ngClass]="day.className" *ngFor="let day of calendarItem">
      <div *ngIf="i === 0">{{day.dayName}}</div>
      {{day.day}}
    </div>
  </div>
</div>

Finally, in ts component

interface CalendarItem {
  day: string;
  dayName: string;
  className: string;
  isWeekend: boolean;
}
export class AppComponent implements OnInit {
  date = moment();
  calendar: Array<CalendarItem[]> = [];

  ngOnInit(): void {
    this.calendar = this.createCalendar(this.date);
  }

  createCalendar(month: moment.Moment) {
    const daysInMonth = month.daysInMonth();
    const startOfMonth = month.startOf('months').format('ddd');
    const endOfMonth = month.endOf('months').format('ddd');
    const weekdaysShort = moment.weekdaysShort();
    const calendar: CalendarItem[] = [];

    const daysBefore = weekdaysShort.indexOf(startOfMonth);
    const daysAfter = weekdaysShort.length - 1 - weekdaysShort.indexOf(endOfMonth);

    const clone = month.startOf('months').clone();
    if (daysBefore > 0) {
      clone.subtract(daysBefore, 'days');
    }

    for (let i = 0; i < daysBefore; i++) {
      calendar.push(this.createCalendarItem(clone, 'previous-month'));
      clone.add(1, 'days');
    }

    for (let i = 0; i < daysInMonth; i++) {
      calendar.push(this.createCalendarItem(clone, 'in-month'));
      clone.add(1, 'days');
    }

    for (let i = 0; i < daysAfter; i++) {
      calendar.push(this.createCalendarItem(clone, 'next-month'));
      clone.add(1, 'days');
    }


    return calendar.reduce((pre: Array<CalendarItem[]>, curr: CalendarItem) => {
      if (pre[pre.length - 1].length < weekdaysShort.length) {
        pre[pre.length - 1].push(curr);
      } else {
        pre.push([curr]);
      }
      return pre;
    }, [[]]);
  }

  createCalendarItem(data: moment.Moment, className: string) {
    const dayName = data.format('ddd');
    return {
      day: data.format('DD'),
      dayName,
      className,
      isWeekend: dayName === 'Sun' || dayName === 'Sat'
    };
  }

  public nextmonth() {
    this.date.add(1, 'months');
    this.calendar = this.createCalendar(this.date);
  }

  public previousmonth() {
    this.date.subtract(1, 'months');
    this.calendar = this.createCalendar(this.date);
  }
}
user_30906850

If you want to color specific days, you can use (I'm assuming your day object is a momentJs object):

<div [ngClass]="{ 'weekend': (day.day() === 5) || (day.day() === 6) }"
     class="calendar-days flex-container flex-center">
     {{day}}
</div>

and then add weekend class to your css:

.weekend {
  background-color: gray
}
user_31869410
Related