CODEWITHSUNDEEP
javascriptangularionic-frameworkfullcalendarfullcalendar-4
vgnsh
vgnsh

Reputation: 130

Change the date labels as Day with numbers in full calendar

I am working with FullCalendar V4 along with Ionic -4 and Angular-8 . In week view it shows me 7 days. I want every day to be displayed as Day with number. For example instead of Monday it should be displaying Day 1. Also

I am planning to display only three weeks so there should be Day label starting with Day 1, Day 2 , Day 3 and all the way to display Day 21

Is there a inbuilt method to do this. Or any other approach to do so. Thanks in advance :)

Current Implementation

columnHeaderText(info){
    if(info){
      return 'Day ' + this.count++
    }
  }
<ion-content>
  <full-calendar #calendar 
    [header]="header"
    [defaultView]="defaultView" 
    [plugins]="calendarPlugins" 
    [editable]="editable"
    [events]="events" 
    [eventStartEditable]="eventStartEditable"
    [eventDurationEditable]="eventDurationEditable" 
    [dragRevertDuration]="dragRevertDuration"
    [droppable]="droppable"
    (columnHeaderText)=" columnHeaderText($event)"
    (eventRender)="eventRender($event)"
     
  ></full-calendar>

Upvotes: 1

Views: 1813

Answers (1)

Layera
Layera

Reputation: 234

Maybe you can try something like this? and reset 'count' everytime you change to a new 3 week period 

      var count = 1;
      var calendar = new Calendar(calendarEl, {
       //your settings...
        columnHeaderText: (date) => {
          return 'Day ' + count++},
        }
      }

EDIT

 calendarOptions: any;
 dayCount: number = 1;
 ngOnInit() {
   this.calendarOptions = {
        columnHeaderText: () => {
           return 'Day ' + this.dayCount++
        }
  }

and change in your html to: 

 [columnHeaderText]="calendarOptions.columnHeaderText"

}

Upvotes: 2

Related Questions