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.


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:

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

  @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;
Answer posted by Dan Letecky [DayPilot]
7 months ago.

To set the initial date selection, please use the select() method in ngAfterViewInit():

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 {,;

See also:

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