Angular-calendar: Time-view in Week-view. (Week-Time matrix)

[daneshmandi]

Is your feature request related to a problem? Please describe.

I am looking for a way to show the week view and the day view in one view. Better say, seeing the time of each event in the weekly view on the left side of the weekly view as well.

Describe the solution you'd like

As a picture speaks thousands of words. Here is an example of what I mean:

https://preview.ibb.co/nyT5aJ/matrix_view.jpg

Describe your use case for implementing this feature

I need to show the time of each event for weekly view.

Additional context
Add any other context or screenshots about the feature request here.

[daneshmandi]

@mattlewis92 Hello, I need this feature for my project and I understand that this is an open source project and you are generously enough by spending your own time on it. But I would like to support the implementation of this feature if you could give me a quote (price and hours) that would take to implement this feature. Thanks!

[mattlewis92]

@daneshmandi so I recently started a new job and they need this feature as well, so I'll be working on getting it in shortly (probably next week as I've got an 11 hour plane ride with nothing else to do). The idea is that the current view will exist for all events marked as allDay, and then below will appear a grid of times and events for each day, similar to the day view but in 7 columns, and you'll be able to drag, drop and resize events on that view. Will update this ticket when it's done so that you can test it 👍

[daneshmandi]

@mattlewis92 That's great! Thank you! Congrats on your new job as well! 👍
Do you think that the number of days shown on this grid could be flexible like 7, 5 or 3 at a time ? I have seen this feature in Google Calendar. This is a nice to have but not necessary though.

[mattlewis92]

Yup, it'll respect the existing excludeDays option: https://mattlewis92.github.io/angular-calendar/#/exclude-days

[daneshmandi]

Great! But I didn't mean excluding, I mean showing flexible number of days in a view. In some case when you have a dense schedule you may want to focus on 3,5,7 days at a time.

[mschleicher]

@daneshmandi I just want to point out that diegofsza already implemented a week view.
You can find his project at https://github.com/Innqube/angular-calendar-week-hours-view
Maybe that helps.

[daneshmandi]

@mschleicher Cool! Thanks for mentioning it.

[AhHa45]

@mschleicher were you able to successfully integrate it into your project from npm?
I wasn't I had errors like missing ngModule declaration.

Angular 6

[mschleicher]

@AhHa45 Sorry no I never used diegofszas week view. However I'm currently developing an horizontal week view and have some npm package issues too. I'm still looking into it...

[mattlewis92]

Hey folks, this is now available on the latest beta, install instructions and how to migrate are here: https://github.com/mattlewis92/angular-calendar/pull/589 I would appreciate any feedback before I cut a final release! 😄

[daneshmandi]

@mattlewis92 That's awesome. I will test it today. Thank you very much. :)

[daneshmandi]

@mattlewis92 I have integrated this view to my app by installing the beta version.

So far so good, I am very impressed by the implementation. It works great and as expected. So far, I have seen only 2 issues that might not be related to this but I will mention them anyway.

1- After replacing the V 25.2 with the beta I had a build issue complaining about Ng Module regarding week-view which deleting the entire node_modules folder and a fresh npm install fixed the issue.

2- Clicking on event in the week-view sometimes doesn't raise eventClicked event. This happens only the first time the event is clicked. the second time it works. I don't see this issue in other views but not sure this is related to my template or it is a bug with this view. Here is my weekViewEventTemplate:

<ng-template #weekViewEventTemplate let-weekEvent="weekEvent" let-locale="locale" let-eventClicked="eventClicked" let-tooltipPlacement="tooltipPlacement" let-tooltipTemplate="tooltipTemplate" let-tooltipAppendToBody="tooltipAppendToBody" let-tooltipDisabled="tooltipDisabled"><div class="cal-event" (mwlClick)="eventClicked.emit({ event: weekEvent.event })" >...</div></ng-template>

and the view is as:

<mwl-calendar-week-view *ngSwitchCase="'week'" [viewDate]="ViewDate" [refresh]="refresh" [events]="ScheduledEvents" (dayClicked)="OnDayClick($event.day.date)" (eventClicked)="OnCalendarEvent('Clicked', $event.event)" [eventTemplate]="weekViewEventTemplate" (eventTimesChanged)="OnDrop($event)"> </mwl-calendar-week-view>

Thanks again for this awesome feature.

[mattlewis92]

@daneshmandi Thanks for testing it! Unfortunately I can't reproduce the clicking issue you described, it works every time for me on the first click. Sometimes it can happen if you drag the mouse by >= 1 pixels when its pressed down, because then it thinks a drag event has occurred.

[daneshmandi]

@mattlewis92 hmm. in that case do you think it would be possible to have settable drag threshold ?

[mattlewis92]

Yeah it's what we use in our app to workaround this issue, it's pretty straightforward to add

[mattlewis92]

Filed a reminder for myself here: https://github.com/mattlewis92/angular-calendar/issues/678

[jimdeane]

betacalendar.zip

@mattlewis92 I've just been trying out the new Week view and (due to being a noob i expect) i am getting a strange result.

I have attached the project (one of the example ones) a screenshot of the result.

Can you shed some light ion what I'm doing wrong?

Thanks - Jim

[mattlewis92]

@jimdeane It's because you're referencing the stylesheet from the old version:

<link href="https://unpkg.com/[email protected]/css/angular-calendar.css" rel="stylesheet">

should be

<link href="https://unpkg.com/[email protected]/css/angular-calendar.css" rel="stylesheet">

[jimdeane]

@ thanks, works great!!

[rubenheymans]

awesome, lost a lot of time building this myself but now I can also integrate drag and drop!
Is it also possible to update the day view so it also shows a header like in the weekview?

[mattlewis92]

@rubenheymans you can add a fake header above the day view component or set the daysInWeek option to 1 on the week view: https://stackblitz.com/edit/angular-hdpk64?file=demo/template.html (I will probably refactor the day view in the next version to just be a tiny wrapper around the week view with this flag set to 1)