mattlewis92 / calendar-utils

Utility functions to generate views for calendars

calendar-utils

Utility functions to generate views for calendars

calendar-utils's Issues

Where is the usage details?

no info on npm about how to use this package

Add Right-Side Space to Hour Segments Request

I wanted to request a change that will affect this and the angular-calendar projects. In order to allow the capture of a click/dblclick or the context menu, would you consider having the Events not take up 100% of the Day Column.

This functionality is present on the Angular Scheduler component from Syncfusion and others.

I have been able to adjust line 658 in the calendar-utils.ts file to:

const width = 95 / columnCount;

Changing the 100 to 95 to have the Events calculate to take up 95% of the column space on the Week View. This allows for a right-click or, in my case, a double click on an hour segment in order to open a dialog for that time segment (even when that segment is full with Events).

If a change like this wound not have unintended consequences, this would be a great functionality add. Thanks for the consideration.

Hours array is not correct for a day in which we change to or from DST

In the screenshot below we can see that the second and third entries in the array actually represent the same period of time. This is because there is an extra hour caused by moving from British Summer time to GMT on the 27th of October. This causes the day view to misbehave for days where we move between DST and normal.

Rounding error in getDayView leads to consecutive events appearing as next to eachother

I'm using the angular-calendar library and I've hit the following visual bug:

The event times are 8:10 - 8:15 and 8:15 - 8:20 so the events should not be displayed as overlapping. This only happens with some even times.

Debugging the code lead me to the getDayView method in which the bottom property of the first event seems to have a rounding error which leads to it being treated as if it overlaps with the second event.

Incorrect endOfView

Hi,
the endOfView variable of the 23rd hour and 59th minute shouldn't be 23:59:59?, with the current implementation being 23:59:00.

calendar-utils/src/calendar-utils.ts

Line 944 in a1fd454

const endOfView: Date = setMinutes(

Suggested change

const endOfView: Date = setMinutes(
    setHours(endOfDay(viewDate), sanitiseHours(dayEnd.hour)),
    sanitiseMinutes(dayEnd.minute)
  );

Unable to build using webpack: Error: Invalid name: "calendar-utils/date-adapters/date-fns"

While trying to build my project with webpack, the package normalize-package-data throws the following error:

ERROR in ./node_modules/calendar-utils/date-adapters/date-fns/index.js
Module build failed (from ./node_modules/ify-loader/index.js):
Error: Invalid name: "calendar-utils/date-adapters/date-fns"
at ensureValidName (C:\develop\web\erp\web\node_modules\normalize-package-data\lib\fixer.js:335:15)
at Object.fixNameField (C:\develop\web\erp\web\node_modules\normalize-package-data\lib\fixer.js:215:5)
at C:\develop\web\erp\web\node_modules\normalize-package-data\lib\normalize.js:32:38
at Array.forEach ()
at normalize (C:\develop\web\erp\web\node_modules\normalize-package-data\lib\normalize.js:31:15)
at final (C:\develop\web\erp\web\node_modules\read-package-json\read-json.js:411:5)
at then (C:\develop\web\erp\web\node_modules\read-package-json\read-json.js:160:5)
at ReadFileContext. (C:\develop\web\erp\web\node_modules\read-package-json\read-json.js:332:20)
at ReadFileContext.callback (C:\develop\web\erp\web\node_modules\graceful-fs\graceful-fs.js:90:16)
at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:244:13)
@ ./node_modules/angular-calendar/date-adapters/date-fns/index.js 4:17-65
@ ./public/app/main.ts

The documentation (specifically the Rules for name field section) does state the following:

If name field is given, the value of the name field must be a string. The string may not: contain the following characters: /@\s+%

Request to Add name attribute to EventColor

I am allowing custom color schemes to be associated with events. In order to implement this, I needed to have a color scheme name affiliated with the primary and secondary colors. This helps in the UI because it allows the user to select the color scheme by name and to also create custom ones and assign a name to it so that they can use it for other events.

This is what my interface looks like

export interface ColorScheme {  
  id?: number;
  // color schemes with no owners are the default color schemes
  owner?: number;
  name: string; 
  /* may eventually want to explictly type these as "Color" --
     refer to this link for a start https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/color/color-tests.ts
  */
  primary: string;
  secondary: string;
}

I was wondering if you could support adding a name to the EventColor interface. I am having an issue when going from the CalendarEvent to my local object that is displayed on the UI. Without the "name" field I would have no idea what color scheme is associated with that particular event. I have a workaround in that I could stuff the ColorScheme name in the meta data for the CalendarEvent but it seems as if it would be more appropriate to have it defined explicitly under ColorEvent.

You can see this in action here (the first Calendar) https://stackblitz.com/github/riyadali/townofbabylon/tree/AddCalendarEditable

You'll need to register and login to site (so that you can access the update buttons for an event) ... use any made up email and password. It may take some time to register initially since the service handling the login goes to sleep quite frequently.

There is no rush since I have a workaround.

FYI... Listed below are my default color schemes based on the samples you provided

// Some default color schemes
  redColorScheme : ColorScheme = {
      id: 1,
      name: 'Red',
      primary: '#ad2121',
      secondary: '#FAE3E3'
  };

  yellowColorScheme : ColorScheme = {
      id: 2,
      name: 'Yellow',
      primary: '#e3bc08',
      secondary: '#FDF1BA'
  };
 
  blueColorScheme : ColorScheme = {
      id: 3,
      name: 'Blue',
      primary: '#1e90ff',
      secondary: '#D1E8FF'
  };

Missing DayView export

Hi,

I'm facing a update problem where an export statement is now missing.

With this commit, the DayView Interface is no longer exported. If there are no bigger impacts it would be nice to fix this.

a23983f

allDayEvent problem

Change max([event.start, startOfWeekDate]) to max(event.start, startOfWeekDate) and ist will work!

calendar-utils/src/calendar-utils.ts

Line 242 in b2cf0cc

const begin: Date = max([event.start, startOfWeekDate]);

check this issue:
mattlewis92/angular-calendar#1149

Usage with Angular 4 is impossible

This repository requires TypeScript 2.5 but it is used in your angular-calendar component which uses Angular 4 (and therefore TS < 2.4). This is giving us a lot of problems since you used some features of TS 2.4+ (like string-based enums) and we are not able to compile the project anymore.
It works when using TS 2.4 but since the Angular Team does not recommend its usage with NG 4 we really can't use it (this is a commercial project that should go into production soon and cannot afford to have potentially incompatible software).

Can you please fix this or tell us how to keep using your (btw awesome) component with NG 4/TS 2.3?

Error: No provider for CalendarUtils!

I'm using this tutorial which based on your calendar project to have calendar integrated into my ionic 2 app, and I'm running into this error which i think it has something to do with this repo.

how can i solve it plz? is it something like : npm i @CalendarUtils ?

Weekrow from previous month displayed even if no days of the current months are displayed.

I have the problem that I want to render only the weekdays (mon - fri). If the 1. of the selected month falls on sat or sun getMonthView still returns the whole week of the last month.

I'm not sure if that's really a bug or not. If it is I can probably provide a PR in the next few days to fix this but I wanted to check for thoughts or input on this behaviour first.

Thank you.

Missing changelog

Is there a changelog for this project? I would like to upgrade from v0.0.53 but I do not know what has changed.

Rename extends<Direction> to startsWith<Day/Week>

Will be a breaking change

WeekView - support for precise event-spanning

I'm using calendar-utils non-directly - I use it as dependency of angular-calendar package (which is awesome, by the way).
My use-case is that I would like to have precise week view in a way that every event starts and ends in defined time. I successfully made that change in the code - in https://github.com/mattlewis92/calendar-utils/blob/master/src/calendarUtils.ts , line 135 became:

        span = differenceInMinutes(event.end, begin)/1440.0;

and line 149 became:

        const distance: number = differenceInMinutes(event.start, startOfWeek)/1440.0;

and everything works great. Now, I would like to know which are possibilities to add support for this type of week view in angular-calendar? Also, is there some reason behind calculating WeekView from start of day to end of day, instead calculating start and end of event?

Sorry for bad format, this is my first issuing ever.

EDIT: Of course, there is a probably better way than using magic constants in my solution, but as quick-fix, it works well for me.

Issue with typescript version

Hi, I think I got error with Typescript 2.6.1 version. Please check screenshot

Warning for calendarUtils.js after 0.17.1 update

WARNING in ../~/calendar-utils/dist/calendarUtils.js
(Emitted value instead of an instance of Error) Cannot find source file '../src/calendarUtils.ts': Error: Can't resolve '../src/calendarUtils.ts' in 'C:\workspace\node_modules\calendar-utils\dist'
 @ ./~/angular-calendar/dist/esm/src/providers/calendarUtils.provider.js 2:0-110
 @ ./~/angular-calendar/dist/esm/src/index.js
 @ ./src/app/+base/activities/activities.module.ts
 @ ./src async
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

CalendarEvent Schema

How can I change CalendarEvent Schema.
Can you please help to solve this issue.

I want schema like this

title :string,
start : date,
end : date,
myevents : [{name :string,startDate : date, endDate : date}]

is it possible to create schema like this.
Thanks In Advance.

Events placed in the wrong position when moving to and from DST

Hi, this is a bit of a nasty one. Lets say that I have two events occurring as follows:

start "2019-10-26T03:00:00Z"
start "2019-10-27T03:00:00Z"

These two events are plotted in the same position even though they represent different times to the user. Specifically the second event is plotted in the wrong place. This is because the we change (in the uk) from DST on the 27th of October at 2am. What this mean is that specifically for that day - the 27th of October we cannot use the number of minutes from the start of the day to calculate position because one of the hours effectively happens twice.

Very happy to try to help with this but I'm not sure whether you have any thoughts on what the correct solution is?

Re-add removed day view tests

Some of these should be ported to use the getWeekView function: a23983f

Add "timezoneOffset" to DateAdapter instead of getting it from the date object

I'm using a custom DateAdapter to force a specific timezone (in my case UTC without using momentjs), however, due to a few places in this module calling getTimezoneOffset directly from the date object, it breaks on days with a DST change.

Moving it to the DateAdapter will let the library consumer define a timezone.

Please Update date-fns

Unable to build using webpack: Error: Can't resolve 'date-fns/set_year/index'
please update date-fns new update

Universal

Hello,

I've got an error in univeral mode:

C:\development\norboxportal\node_modules\calendar-utils\bundles\calendar-utils.umd.js:10
})(window, function() {
^

ReferenceError: window is not defined

Since it is a dependency of angular-calendar, it breaks my app.

Thank you in advance!

need your previous angular 2 calendar

I have currently doing angular 2 project 75% completed now need your angular 2 calendar I can not upgrade angular 4 because conflict older modules

Add Actions Interface

Add actions array interface. mattlewis92/angular-bootstrap-calendar#386 (comment)