How to set hourly view only for 24h

[askurdjel]

Hi I try to create gantt chart where in columns I have all day listed for month and time line should be only 24 hours

so for GanttViewOptions I set
start :today (00:00:00)
end: today (23:59:59)

but it always show me entire week not just one day

[msalvadorh]

I'm having the same question, did you resolve this?

[walkerkay]

create custom view
example: http://gantt.ngnice.com/components/custom-view

[countMontec]

Hi, I've created
options = {
viewType: GanttViewType.hour,
mergeIntervalDays: 3,
styles: {
lineHeight: 50
},
};
and
viewOptions: GanttViewOptions = {
start: new GanttDate(new Date('2025-01-09')),
end: new GanttDate(new Date('2025-01-10'))
}

and im using it in ngx-gantt in html template but it doesnt seem to be working. Gantt shows everyting from January 6th (start of current week) up to march 30th. Am i doing something wrong?

Thanks

[caiorsantanna]

gantt.view.ts

import {
  GanttViewType,
  GanttDatePoint,
  GanttDate,
  differenceInMinutes,
  eachDayOfInterval,
  eachHourOfInterval,
  GanttView,
  GanttViewDate,
  GanttViewOptions,
  primaryDatePointTop,
  secondaryDatePointTop,
  zhHantLocale,
} from '@worktile/gantt';

const viewOptions: GanttViewOptions = {
  cellWidth: 80,
  start: new GanttDate().startOfDay(),
  end: new GanttDate().endOfDay(),
  datePrecisionUnit: 'minute',
  addAmount: 1,
  addUnit: 'week',
  dateDisplayFormats: zhHantLocale.views.hour.dateFormats,
  dragPreviewDateFormat: 'HH:mm',
};

export class GanttViewHour extends GanttView {
  public override showWeekBackdrop = true;
  public override showTimeline = true;
  public override viewType = GanttViewType.hour;

  public constructor(start: GanttViewDate, end: GanttViewDate, options?: GanttViewOptions) {
    super(start, end, { ...viewOptions, ...options });
  }

  public viewStartOf(date: GanttDate) {
    return date.startOfDay();
  }

  public viewEndOf(date: GanttDate) {
    return date.endOfDay();
  }

  public getPrimaryWidth() {
    return this.getCellWidth() * 24;
  }

  public getDayOccupancyWidth(): number {
    return this.cellWidth * 60;
  }

  private getHourOccupancyWidth() {
    return this.getDayOccupancyWidth() / 60;
  }

  public getPrimaryDatePoints(): GanttDatePoint[] {
    const days = eachDayOfInterval({ start: this.start.value, end: this.end.value });
    const points: GanttDatePoint[] = [];

    for (let index = 0; index < days.length; index++) {
      const start = this.start.addDays(index);
      const point = new GanttDatePoint(
        start,
        start.format(this.options.dateFormat?.day || this.options.dateDisplayFormats?.primary as string),
        (this.getCellWidth() * 24) / 2 + index * (this.getCellWidth() * 24),
        primaryDatePointTop,
      );
      points.push(point);
    }

    return points;
  }

  public getSecondaryDatePoints(): GanttDatePoint[] {
    const hours = eachHourOfInterval({ start: this.start.value, end: this.end.value });
    const points: GanttDatePoint[] = [];

    for (let index = 0; index < hours.length; index++) {
      const start = new GanttDate(hours[index]);
      const point = new GanttDatePoint(
        start,
        start.format(this.options.dateFormat?.hour || this.options.dateDisplayFormats?.secondary as string),
        index * this.getCellWidth() + this.getCellWidth() / 2,
        secondaryDatePointTop,
        {
          isWeekend: start.isWeekend(),
          isToday: start.isToday(),
        },
      );
      points.push(point);
    }

    return points;
  }

  public override getTodayXPoint(): number {
    const toady = new GanttDate().startOfMinute();
    if (toady.value > this.start.value && toady.value < this.end.value) {
      return this.getXPointByDate(toady);
    }

    return 0;
  }

  public override getDateIntervalWidth(start: GanttDate, end: GanttDate) {
    let result = 0;
    const minutes = differenceInMinutes(end.value, start.value);

    for (let index = 0; index < minutes; index++) {
      result += this.getHourOccupancyWidth() / 60;
    }

    result = minutes >= 0 ? result : -result;

    return Number(result.toFixed(3));
  }

  public override getDateByXPoint(x: number) {
    const hourWidth = this.getHourOccupancyWidth();
    const indexOfSecondaryDate = Math.max(Math.floor(x / hourWidth), 0);
    const matchDate = this.secondaryDatePoints[Math.min(this.secondaryDatePoints.length - 1, indexOfSecondaryDate)];
    const minuteWidth = hourWidth / 60;
    const underOneHourMinutes = Math.floor((x % hourWidth) / minuteWidth);
    return matchDate?.start.addMinutes(underOneHourMinutes);
  }
}

---

Then put this on the controller:

import { GanttViewType, registerView } from '@worktile/gantt';

registerView(GanttViewType.hour, GanttViewHour);

public viewType = signal<GanttViewType>(GanttViewType.hour);
public start = signal<number>(dayjs().set('hour', 12).unix());
public end = signal<number>(dayjs().set('hour', 14).unix());

And then on the template:

<ngx-gantt
        [viewType]="viewType()"
        [start]="start()"
        [end]="end()"
        [virtualScrollEnabled]="false"
        [disabledLoadOnScroll]="true">
        <ngx-gantt-table>
          <ngx-gantt-column name="Test" width="300px">
            <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
          </ngx-gantt-column>
        </ngx-gantt-table>
      </ngx-gantt>

[countMontec]

I tried to implement custom gantt view example above with my functionality but havent been able to make it work. Im using gantt-flat (GanttUpper) which has ngx-gantt-root instead of gantt-view from example project because i need to have inline tasks.

My gantt flatt html looks like below (function names changed)

<ngx-gantt-root #root [sideWidth]="130">
  <ng-template #sideTemplate>
    <div class="gantt-flat-side-header">Title</div>
    <div class="gantt-flat-side-body">
      <div class="gantt-group" *ngFor="let group of groups; trackBy: trackBy; let i = index">
        <div class="gantt-group-content" [class.my-odd-class]="i % 2 === 1" (click)="getData($event, group.id)" [ngStyle]="getData(group.id) != '' ? {'cursor': 'pointer'} : {}"
          [style.height.px]="(group.mergedItems.length || 0) * ((styles.lineHeight || 50) + 10) - 10">
          <div>
            {{ group.title }}
            <hr *ngIf="getData(group.id) != ''" class="pink" >
            {{getData(group.id)}}
          </div>
        </div>
      </div>
    </div>
  </ng-template>
  <ng-template #mainTemplate>
    <div class="gantt-main-container">
      <!-- groups -->
      <div class="gantt-main-groups" *ngIf="groups && groups.length > 0" [style.width.px]="view.width">
        <ng-container *ngFor="let group of groups; trackBy: trackBy; let i = index">
          <div class="gantt-main-group" [class.my-odd-class]="i % 2 === 1" style="padding:0"
            [style.height.px]="(group.mergedItems.length || 0) * ((styles.lineHeight || 50) + 10) - 10">
            <ng-container *ngFor="let items of group.mergedItems">
              <div class="gantt-flat-items" [style.height.px]="styles.lineHeight">
                <ng-container *ngFor="let item of items; trackBy: trackBy">
                  <ngx-gantt-bar [item]="item" [template]="barTemplate"
                    (barClick)="barClick.emit($event)"></ngx-gantt-bar>
                </ng-container>
              </div>
            </ng-container>
          </div>
        </ng-container>
      </div>
    </div>
  </ng-template>
</ngx-gantt-root>

In parent component i have

parent.ts

viewOptions: GanttViewOptions = {
cellWidth: 120
};

options = {
viewType: GanttViewType.hour,
styles: {
lineHeight: 25
},
};

parent.html

<app-gantt-flat id="gantt-print" style="zoom:60%" #ganttPrint [items]="items" [groups]="groups"
      (showData)="getData($event)" [viewType]="options.viewType" [start]="start" [end]="end"
      [originalItems]="apiItems" [startDate]="startDate" [styles]="options.styles" [changing]="changingValue"
      [viewOptions]="viewOptions" (barClick)="showDetails($event)">
      <ng-template #group let-group="group">
        {{ group.title }}
      </ng-template>
      <ng-template #bar let-item="item">
        <span>&nbsp;&nbsp;{{ item.title }}</span>
      </ng-template>
    </app-gantt-flat>

Im setting start and end dates dynamically because i need to show chart from picked date up to +1|2|3 days depending on user choice. So if a user chooses current date and duration of 1 day, gantt should only display from 00:00 to 23:59 today.

Also, documentation links are down.