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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

one week calendar view

Thread ID:





151006 Jan 28,2020 05:17 AM UTC Jan 30,2020 07:26 AM UTC Angular - EJ 2 3
Tags: Calendar
jose lara
Asked On January 28, 2020 05:17 AM UTC

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

Do you have anything similar? 

Sureshkumar P [Syncfusion]
Replied On 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. 
<ejs-calendar #calendar [isMultiSelection]="multiSelection" [values]="dates" ></ejs-calendar> 
 public year: number = new Date().getFullYear(); 
  public month: number = new Date().getMonth(); 
  // enable the multiselection feature  
  public multiSelection: boolean = true; 
  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 
Sureshkumar P 

jose lara
Replied On 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

Sureshkumar P [Syncfusion]
Replied On 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/ . 
Sureshkumar P 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon