3

I am currently using an angular-calendar package for the Date view in the UI. I am having trouble getting the date range(start date & end date) of the view, i.e if I am currently in Monthly view, then I want the start date & end date of the monthly view & likewise for the Weekly view(start date of the week & end date of the week). How can I achieve it? I have to make the API calls according to the start date & end date of the calendar view.

Saigal Amatya
  • 383
  • 1
  • 8
  • 22

2 Answers2

1

You can use the moment library like

This Month': [moment().startOf('month'), moment().endOf('month')]
Last Year': [moment().subtract(1, 'years').startOf('years'),
              moment().subtract(1, 'years').endOf('years'),]
Ashish S
  • 638
  • 6
  • 14
  • I want to get the range of dates of a current view (day, week, month) everytime the view changes. How does the usage of moment help here? – SkogensKonung Feb 04 '21 at 16:46
  • @Dawid Can you please a bit more about you query? – Ashish S Feb 05 '21 at 05:09
  • So I would like get the start and the end date of a current calendar view regardless of its span. So for example, when I first open the calendar, I see the view of the current week (1-7.02). I would like to access this range (i.e. the begin and the end date) in order to query a DB for data that corresponds to that time range. Then, when I click on the "month" tab, I would like to get the range 1-28.02. Then, when I click on "day" I would like to get 5.02. When I click on next, Id like to get 6.02 when previous 4.02. In week view, I click next, I get 8-15, when in month, 1-31.03 and so on. – SkogensKonung Feb 05 '21 at 14:26
0

I solve this using " beforeViewRender " property of the "mwl-calendar-month-view" component

You just need to add the directive like this:

<mwl-calendar-month-view
   (beforeViewRender)="beforeViewRender($event)"
>

And you will have access to the start date and end date across the property "period" of the event emitter

beforeViewRender(event): void {
  console.log(event.period.start);
  console.log(event.period.end);
}
Masizo Robles
  • 16
  • 3