We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

one week calendar view

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

Do you have anything similar? 

3 Replies

SP Sureshkumar P Syncfusion Team January 28, 2020 07:02 AM UTC

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 
 
 
 
Regards, 
Sureshkumar P 



JL jose lara January 29, 2020 03:35 AM UTC

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


SP Sureshkumar P Syncfusion Team January 30, 2020 07:26 AM UTC

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. 
 
 
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 


Loader.
Live Chat Icon For mobile
Up arrow icon