search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

How to select a date range dynamically and highlight it?

Asked by Giorgio
7 months ago.

Hi,

I would need to select a range of dates when loading the component, I would not like to select all month, day or all week. But I would need to select 3 days .. I have tried various ways but without success. I have tried using the following configurations at the onInit but without success. I enclose code:

HTML:
   <div class="{{className}}" [style]="style">
      <daypilot-navigator [config]="config" (dateChange)="changeDate()" #navigator></daypilot-navigator>
    </div>

TYPESCRIPT:
  @Input() set config(config: DayPilot.NavigatorConfig) {
    const date = new DayPilot.Date('2022/05/08');
    const dateEnd = new DayPilot.Date('2022/06/01');
    this.config = {
      showMonths: 3,
      skipMonths: 3,
      freeHandSelectionEnabled: true,
      selectMode: 'Day',
      selectionStart: date,
      selectionEnd: dateEnd
    };
    this.pConfig = config;
    this.cdr.detectChanges();
  }
Answer posted by Dan Letecky [DayPilot]
7 months ago.

To set the initial date selection, please use the select() method in ngAfterViewInit():
https://api.daypilot.org/daypilot-navigator-select/

When you add the selectionStart, selectionEnd properties to the config they will be re-applied when you change the config. Moreover, at this moment it's not possible to set a custom date range this way.

Setting custom start and end using select() is supported in the latest sandbox build (2022.2.5270):

ngAfterViewInit(): void {
  this.navigator.control.select(DayPilot.Date.today(), DayPilot.Date.today().addDays(1));
}

See also:
https://release.daypilot.org/changes/js/

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.