Skip to content

Commit

Permalink
feat(day-view): merge the week and day view components
Browse files Browse the repository at this point in the history
BREAKING CHANGE:

The day and week view have now merged. For most users this should be a seamless migration, however there are some edge cases that you may need to take account for:

Any custom styles you used for the day view will need to be adjusted. The `cal-day-view-theme` sass mixin is now gone as all the styles are shared between the week and day view.

The `eventWidth` option is removed, events now fill the available width.

If using `[daysInWeek]="1"` on the week view, the date and title formatters for the day view will be used instead.

The week view now has a border top applied to the top of the component container, rather than the top of the day headers container.

The `getDayView` and `getDayViewHourGrid` functions have been removed from the `CalendarUtils` service.

The following interfaces from `calendar-utils` were renamed: `DayViewHourSegment` -> `WeekViewHourSegment`, `DayViewHour` -> `WeekViewHour`, `DayViewEvent` -> `WeekViewTimeEvent`

The day view scheduler demo is now based off the week view instead, please check the updated demo code for how to migrate: https://mattlewis92.github.io/angular-calendar/#/day-view-scheduler

If using a custom template for the `hourSegmentTemplate`, you must pass `let-isTimeLabel="isTimeLabel"` as a local variable and then change `<div class="cal-time">` to `<div class="cal-time" *ngIf="isTimeLabel">`

Closes #889
  • Loading branch information
mattlewis92 committed Sep 4, 2019
1 parent 48f349a commit 2760fc6
Show file tree
Hide file tree
Showing 19 changed files with 187 additions and 1,265 deletions.
6 changes: 3 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@
"dependencies": {
"angular-draggable-droppable": "^4.3.2",
"angular-resizable-element": "^3.2.4",
"calendar-utils": "^0.5.0",
"calendar-utils": "^0.6.0",
"positioning": "^2.0.0"
},
"sideEffects": [
Expand Down
1 change: 0 additions & 1 deletion projects/angular-calendar/src/angular-calendar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,5 @@
@mixin cal-theme($overrides) {
@include cal-month-view-theme($overrides);
@include cal-week-view-theme($overrides);
@include cal-day-view-theme($overrides);
@include cal-tooltip-theme($overrides);
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,7 @@ import {
GetWeekViewHeaderArgs,
WeekDay,
GetWeekViewArgs,
GetDayViewArgs,
DayView,
GetDayViewHourGridArgs,
DayViewHour,
WeekView,
getDayView,
getDayViewHourGrid,
getMonthView,
getWeekViewHeader,
getWeekView
Expand All @@ -33,12 +27,4 @@ export class CalendarUtils {
getWeekView(args: GetWeekViewArgs): WeekView {
return getWeekView(this.dateAdapter, args);
}

getDayView(args: GetDayViewArgs): DayView {
return getDayView(this.dateAdapter, args);
}

getDayViewHourGrid(args: GetDayViewHourGridArgs): DayViewHour[] {
return getDayViewHourGrid(this.dateAdapter, args);
}
}
12 changes: 6 additions & 6 deletions projects/angular-calendar/src/modules/common/util.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import {
CalendarEvent,
DayViewEvent,
DayViewHour,
DayViewHourSegment,
WeekViewTimeEvent,
WeekViewHour,
WeekViewHourSegment,
validateEvents as validateEventsWithoutLog,
ViewPeriod,
WeekDay,
Expand Down Expand Up @@ -40,15 +40,15 @@ export const trackByWeekDayHeaderDate = (index: number, day: WeekDay) =>

export const trackByHourSegment = (
index: number,
segment: DayViewHourSegment
segment: WeekViewHourSegment
) => segment.date.toISOString();

export const trackByHour = (index: number, hour: DayViewHour) =>
export const trackByHour = (index: number, hour: WeekViewHour) =>
hour.segments[0].date.toISOString();

export const trackByDayOrWeekEvent = (
index: number,
weekEvent: WeekViewAllDayEvent | DayViewEvent
weekEvent: WeekViewAllDayEvent | WeekViewTimeEvent
) => (weekEvent.event.id ? weekEvent.event.id : weekEvent.event);

const MINUTES_IN_HOUR = 60;
Expand Down

This file was deleted.

This file was deleted.

Loading

0 comments on commit 2760fc6

Please sign in to comment.