one week calendar view

[jose lara]

Hi, I am looking for something like this - https://demo.mobiscroll.com/angular/calendar/week-view#

Do you have anything similar? 

[Sureshkumar P]

Hi Jose, 

 

Greetings from Syncfusion support. 

 

Yes, we can able to achieve weekly calendar by using our isMultiSelection and values property. 

 

Kindly refer the below code block. 

 

[component.html] 

 

<ejs-calendar #calendar [isMultiSelection]="multiSelection" [values]="dates" ></ejs-calendar> 

 

[component.ts] 

 

 public year: number = new Date().getFullYear(); 

  public month: number = new Date().getMonth(); 

  // enable the multiselection feature  

  public multiSelection: boolean = true; 

   

  @ViewChild("calendar") 

  public calendarObj: CalendarComponent; 

 

  // given the selectable dates  

  public dates: Date[] = [ 

    new Date(this.year, this.month, 26), 

    new Date(this.year, this.month, 27), 

    new Date(this.year, this.month, 28), 

    new Date(this.year, this.month, 29), 

    new Date(this.year, this.month, 30), 

    new Date(this.year, this.month, 31) 

  ]; 

 

 

We have created a sample based on your requirement. please find the sample here: https://stackblitz.com/edit/angular-xtblxu-jxtgna?file=index.html  

 

To know more about our multiselect and values property please refer the below documentation links 

 

isMultiSelection: https://ej2.syncfusion.com/angular/documentation/api/calendar/#ismultiselection  

 

values: https://ej2.syncfusion.com/angular/documentation/api/calendar/#values  

 

Regards, 

Sureshkumar P 

[jose lara]

sorry, I don't want to select multiple days at a time. I am looking for a calendar only DISPLAYING ONE WEEK (7 days) at a time. Please see the attached image. 

Attachment: one_week_5aa01816.zip

[Sureshkumar P]

Hi Jose, 

 

As we said earlier, we have no option to showcase only a single week as your mentioned in image. but we can able to achieve by using multiselect, min and max properties. If you want to hide the other week which you want, then you can set the min and max property to achieve this.  Otherwise you can make use of our documentation link to achieve your requirement. 

 

Weekly calendar sample: https://ej2.syncfusion.com/documentation/calendar/how-to/select-a-sequence-of-dates-in-calendar/  

 

Here we have made the sample in javascript platform. We suggest you use this logic in your application https://ej2.syncfusion.com/angular/documentation/calendar/how-to/select-a-sequence-of-dates-in-calendar/ . 

 

Regards, 

Sureshkumar P