one week calendar view

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?

Reply | Reply with quote

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.

[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

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
151006	Jan 28,2020 05:17 AM UTC	Jan 30,2020 07:26 AM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US