Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

0.26 #589

Merged
merged 119 commits into from
Sep 3, 2018
Merged

0.26 #589

merged 119 commits into from
Sep 3, 2018

Conversation

mattlewis92
Copy link
Owner

@mattlewis92 mattlewis92 commented Jun 10, 2018

Highlights:

  • date-fns is now no longer required, you can use moment instead (or write your own date adapter!). It should work making with other timezones a lot easier as date-fns doesn't support this, plus for folks already using moment it should make their bundle sizes smaller
  • the drag and drop library was upgraded which fixes loads of long standing bugs, mainly around dragging elements inside scrollable containers + highlighting text while dragging
  • day and week view events are now able to be dragged outside the calendar view
  • tooltips are now positioned automatically
  • the week view now displays a grid of times in each day column
  • the days in a week can be customised so you can create a smaller week view

Available now for testing at:

npm i angular-calendar@rc

Full changelog with breaking changes:

Bug Fixes

  • allow events that end on different days to be dragged (df339b9)
  • handle scrolling the page while dragging evwnts (9fe2a0f)
  • make sure events that are being resized are always on top (ce8063d)
  • month-view: stop events overflowing on ie11 (10ff7d5), closes #501
  • mark package as having side effects (b20f821), closes #529
  • day-view: allow events with no end date to be resized (b00d57c), closes #614
  • day-view: always default eventSnapSize to hour segment height (8908759), closes #514
  • day-view: disable pointer events whilst resizing (56dc132)
  • day-view: dont remove events that start and end at the same time (d2223d5)
  • day-view: make sure segmentHeight is passed to a custom template (79dd846), closes #514
  • day-view: prevent segment double hover when dragging (1fd9089)
  • event-clicked: clicking actual events now triggers eventClicked (403e127), closes #568
  • moment: change weekViewColumnSubHeader from D MMM to MMM D (a2fff58)
  • prevent text getting selected in safari while dragging events (36fb312)
  • month-view: prevent day clicked from firing when dragging events (c505d38), closes #487
  • resizable: prevent resizing of elements when not on top stack (4bfac45), closes #662
  • week-view: allow resizing events with no end date (ccffe05), closes #614
  • week-view: fix cursor on draggable events (66e9223)
  • week-view: make sure currently resized events are always on top (bb08ec1)
  • week-view: use correct event left positioning (fb4bbb7), closes #675

Features

  • add a CalendarView enum to prevent typos in view names (f634a86)
  • add time grid to the week view (5cfbfc7), closes #593
  • allow event actions template to be customised (2c8a6db), closes #673
  • allow meta to be passed to the event times changed interface (c27b2d8)
  • allow moment to be used as a replacement to date-fns (1c5d32f)
  • expose the full week view on the beforeViewRender output (1185d27), closes #632
  • remove deep module imports (24eb394)
  • remove direct dependency on date-fns (b3c9520)
  • upgrade draggable library (d9e76d4)
  • day-view: allow dragging and dropping all day events (62c41b9), closes #665
  • day-view: allow events to be dragged outside of the view (6641319), closes #532
  • day-view: expose events in beforeViewRender output (44347e2), closes #573
  • day-view: make previous and next view helpers respect excludeDays (50159cc)
  • day-view: remove the mwl-calendar-all-day-event component (c6b095a)
  • event-times-changed: expose type of event (resize, drag or drop) (479c75a)
  • event-title-formatter: expose the pre-formatted title (df62e7a), closes #587
  • month-view: add class to day that's being highlighted (13a688e), closes #630
  • month-view: allow events to be dropped on the open day events list (2454892), closes #523
  • month-view: allow the open day events animation to be overridden (db0c880)
  • upgrade the drag and drop library (ab764ec)
  • tooltip: allow tooltip to be auto positioned (d6d61c4), closes #617
  • week-view: allow events to be dragged outside of the view (e2538a1), closes #516
  • week-view: allow total days in the week to be customised (0b4fcd5)
  • week-view: make the week view title work with no config with i18n (447a269), closes #670

BREAKING CHANGES

  • date-fns is now no longer a direct dependency of this library. To migrate:

Install date-fns with npm:

npm i date-fns

Add the date-fns calendar-utils adapter to the first argument of the CalendarModule.forRoot method:

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    CalendarModule.forRoot({
      provide: DateAdapter,
      useFactory: adapterFactory
    })
  ]
})
export class MyModule {}

For system.js users you will also need to add the following entries to your systemjs config:

'calendar-utils': 'npm:calendar-utils/bundles/calendar-utils.umd.js',
'calendar-utils/date-adapters/date-fns': 'npm:calendar-utils/date-adapters/date-fns.js',
'angular-calendar/date-adapters/date-fns': 'npm:angular-calendar/date-adapters/date-fns.js'
  • day-view: the allDayEventTemplate option was removed from the day view. To migrate use the eventTemplate input and check if dayEvent.event.allDay is set in the template
  • Week view events will now appear on the bottom time grid. To restore the old behaviour you can set allDay: true on the event to make it appear at the top.

People extending the CalendarWeekViewComponent will probably have to adjust their child component as the template and internal component api has changed significantly.

  • month-view: If using a custom openDayEventsTemplate for the month view you must now wrap your template with:
<div class="cal-open-day-events" [@collapse] *ngIf="isOpen"></div>

and then you must add the collapse animation to the component that contains the open day events <ng-template>:

import { collapseAnimation } from 'angular-calendar';

// add this to your component metadata
animations: [collapseAnimation]
  • tooltip: all tooltips now default to auto positioning, you can use the tooltipPlacement input on all components to override this behaviour though
  • event-clicked: eventClicked now fires whenever the event container instead of the event title is clicked
  • day-view: previously events with no end date that were resized would emit an empty end time, now they will emit a sensible default new end date
  • resizable: only one event at a time can now be resized on the day or week views
  • week-view: if you were extending the week view component then the internal API has changed slightly and you may need to adjust your app
  • month-view: Custom template users will now need to add a "dragActiveClass='cal-drag-active'" anywhere they use an mwlDraggable directive

If using the mwlDraggable directive anywhere else in your app you will need to apply pointer-events: none to the element yourself when it's being dragged. This can be done with the dragActiveClass option

  • day-view: if you were extending the day view component then the internal API has changed slightly and you may need to adjust your app
  • deep module imports angular-calendar/modules/{common,month,week,day} are no longer supported as the package is now treeshakable. To migrate, adjust your imports to be from angular-calendar directly
  • moment: the moment weekViewColumnSubHeader format has changed for consistency with the other date formatters
  • there were some minor breaking changes in the drag and drop library that might affect your app if you were using it outside of the calendar. See the changelog for more info: https://github.com/mattlewis92/angular-draggable-droppable/blob/master/CHANGELOG.md
  • week-view: events with no end date that are resized now assume to have the start date as the end date
  • week-view: the format of the week view title has changed from Week d of yyyy to MMM d - MMM d, yyyy. You can override this by using a custom date formatter.

@codecov-io
Copy link

codecov-io commented Jun 10, 2018

Codecov Report

Merging #589 into master will increase coverage by 0.36%.
The diff coverage is 97.23%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #589      +/-   ##
==========================================
+ Coverage   96.66%   97.03%   +0.36%     
==========================================
  Files          34       40       +6     
  Lines         600      876     +276     
  Branches       62      116      +54     
==========================================
+ Hits          580      850     +270     
+ Misses          1        0       -1     
- Partials       19       26       +7
Impacted Files Coverage Δ
projects/angular-calendar/test/util.ts 100% <ø> (ø)
...ar-calendar/src/modules/day/calendar-day.module.ts 100% <ø> (ø)
...-calendar/src/modules/week/calendar-week.module.ts 100% <ø> (ø)
...modules/common/calendar-date-formatter.provider.ts 100% <ø> (ø)
...alendar/src/modules/month/calendar-month.module.ts 100% <ø> (ø)
...gular-calendar/src/date-adapters/date-fns/index.ts 100% <100%> (ø)
.../common/calendar-native-date-formatter.provider.ts 100% <100%> (ø)
...ndar/src/modules/common/calendar-utils.provider.ts 100% <100%> (ø)
...ules/month/calendar-month-view-header.component.ts 100% <100%> (ø)
...src/modules/common/calendar-next-view.directive.ts 100% <100%> (ø)
... and 46 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6093890...f2bb934. Read the comment docs.

BREAKING CHANGE: date-fns is now no longer a direct dependency of this library. To migrate:

Install date-fns with npm:
```
npm i date-fns
```

Add the date-fns calendar-utils adapter to the first argument of the CalendarModule.forRoot method:

```typescript
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    CalendarModule.forRoot({
      provide: DateAdapter,
      useFactory: adapterFactory
    })
  ]
})
export class MyModule {}
```

For system.js users you will also need to add the following entries to your systemjs config:
```
'calendar-utils': 'npm:calendar-utils/bundles/calendar-utils.umd.js',
'calendar-utils/date-adapters/date-fns': 'npm:calendar-utils/date-adapters/date-fns.js',
'angular-calendar/date-adapters/date-fns': 'npm:angular-calendar/date-adapters/date-fns.js'
```
BREAKING CHANGE: there were some minor breaking changes in the drag and drop library that might affect your app if you were using it outside of the calendar. See the changelog for more info: https://github.com/mattlewis92/angular-draggable-droppable/blob/master/CHANGELOG.md
BREAKING CHANGE: the moment weekViewColumnSubHeader format has changed for consistency with the other date formatters
BREAKING CHANGE: the format of the week view title has changed from `Week d of yyyy` to `MMM d - MMM d, yyyy`. You can override this by using a custom date formatter.

Closes #670
[class.cal-after-hour-start]="!segment.isStart"
[ngClass]="segment.cssClass">
<div class="cal-time" *ngIf="isTimeLabel">
{{ segment.date | calendarDate:'weekViewHour':locale }}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

weekViewHour with locale "de" will make the time segment format like this:
timesegmentformat

but providing a customHourSegmentTemplate changes it to this:

customhoursegmenttemplate

I don't think this is the wished behavior?

Copy link

@AhHa45 AhHa45 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see comments in:
src/modules/week/calendar-week-view-hour-segment.component.ts

@mattlewis92
Copy link
Owner Author

@AhHa45 there were some internal breaking changes while I was developing this, check the most up to date example here: https://github.com/mattlewis92/angular-calendar/blob/0.26/demos/demo-modules/moment/module.ts#L14

With your custom hour segment template it looks like you're not hiding the label, check the latest template source here: https://github.com/mattlewis92/angular-calendar/blob/0.26/src/modules/week/calendar-week-view-hour-segment.component.ts (you need the *ngIf="isTimeLabel" to hide the label if its not a time segment)

@AhHa45
Copy link

AhHa45 commented Aug 8, 2018

Is it possible, that events in the week hours view are not properly placed?
For me they have an offset of ~6px using a custom template and a hourSegmentHeight of 24px . The events template also has an height of 24px.
I wanted to reproduce this issue but I can't get it working on stackblitz.

@mattlewis92
Copy link
Owner Author

@AhHa45 does this help as a starter? https://stackblitz.com/edit/angular-zpkvcd?file=index.html

@AhHa45
Copy link

AhHa45 commented Aug 13, 2018

@mattlewis92 yes thank you: check the 30 min event in the week-view:
https://stackblitz.com/edit/angular-zpkvcd-wtzqeq?file=demo/component.ts

edit: hm never mind...I can't reproduce it. I have to recheck why my templates have an offset.

@patrickbadley
Copy link

Is this ready to go through? Looking forward to a release with the time grid on the week view!

@mattlewis92
Copy link
Owner Author

@patrickbadley yup, there's no more breaking changes or features planned for this release, I just wanted to let some people test out the beta version before making it final 😄

@patrickbadley
Copy link

patrickbadley commented Aug 22, 2018 via email

@mattlewis92 mattlewis92 merged commit f2bb934 into master Sep 3, 2018
@mattlewis92 mattlewis92 deleted the 0.26 branch September 3, 2018 22:16
@ghost
Copy link

ghost commented Nov 29, 2018

Hi @mattlewis92 ,
Is there a more specific example using "openDayEventsTemplate"? I have been unable to get it to use my custom template.
I have added the "animations" to the component metadata and my template looks like this (although I have tried many variations!). The default template is displayed instead of this:
**<div class="cal-open-day-events" [@collapse] *ngIf="activeDayIsOpen"> <ng-template #customOpenDayEventsTemplate let-events="events" let-isOpen="activeDayIsOpen"> <div *ngFor="let event of events" [ngClass]="event?.cssClass"> {{event | json}} </div> </ng-template> </div>**
Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment