chase0213/ng-infinite-calendar

Infinite scrollable calendar for angular

ng-infinite-calendar

Installation

To install this library, run:

$ npm install extdate ng-infinite-calendar --save

NOTE: extdate is a simple and lite extension of Date object in javascript, which ng-infinite-calendar uses internally.

Consuming your library

You can import your library in any Angular application by running:

$ npm install extdate ng-infinite-calendar

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the module
import { InfiniteCalendarModule } from 'ng-infinite-calendar';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify the module as an import
    InfiniteCalendarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the module is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use the module component in app.component.html -->
<h1>
  {{title}}
</h1>
<infinite-calendar></infinite-calendar>

Inputs and Outputs

Several inputs and outputs are provided. See docs for details.

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

Publish

To publish this library, run:

$ npm run build && cd dist && npm publish

License

MIT © chase0213

ng-infinite-calendar's Issues

Property "hovering"

Proposal:

Do you really need the event (mouseover)="onMouseoverDate($event, date)" ?

What is the expected behavior?

.cell {
    &:hover {
      background: rgba(#ffff9f, .4);
    }
}

What is the current behavior?

.cell {
    // hovered day
    &.hovered {
      background: rgba(#ffff9f, .4);
    }
}

What are the steps to reproduce?

Mouse pointer over the cell.

What is the use-case or motivation for changing an existing behavior?

Simplification of code.

Which versions of package, node, npm or other packages are affected?

0.1.4

Is there anything else we should know?

nothing

Set up CI

[doc] update README.md

[bug] event in a day not shown on the calendar

Bug, feature request, or proposal:

bug

What is the expected behavior?

Event from 2017/8/29/00:00:00 to 2017/8/29/03:00:00 should be shown on 8/29 on the calendar.

What is the current behavior?

If I set an event like the following, nothing shown.

    {
      title: '1st release day!',
      body: 'the first release day of ng-infinite-calendar!',
      beginAt: (new ExtDate(2017, 8, 29, 0, 0, 0)),
      endAt: (new ExtDate(2017, 8, 29, 3, 0, 0)),
      data: {},
    },

What are the steps to reproduce?

What is the use-case or motivation for changing an existing behavior?

Which versions of package, node, npm or other packages are affected?

Is there anything else we should know?

The month label is wrong when infinite-calendar component first appeared

Bug, feature request, or proposal:

bug

What is the expected behavior?

When the component is loaded for the first time, the label of month should be pointing to the middle date.

What is the current behavior?

The label is pointing to the first date of "virtual" container.

What are the steps to reproduce?

Reload your browser, and see the label on the top-left corner of the component.

What is the use-case or motivation for changing an existing behavior?

Which versions of package, node, npm or other packages are affected?

v0.1.6

Is there anything else we should know?

Parameterize the date formats.

Proposal:

Parameterize the date formats.

What is the expected behavior?

01/2019
Jan-2019
Janeiro-2019

What is the current behavior?

<span class="current-day-indicator">
    {{ midDayOnCurrentWindow.strftime("%Y/%m") }}
</span>

What are the steps to reproduce?

What is the use-case or motivation for changing an existing behavior?

Multi languages.

Which versions of package, node, npm or other packages are affected?

0.1.4

Is there anything else we should know?

ptBR: {
    dayOfWeek: {
        default: ['Domingo', 'Segunda-Feira', 'Terça-Feira', 'Quarta-Feira', 'Quinta-Feira', 'Sexta-Feira', 'Sábado'],
        short: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab']
    },
    months: {
        default: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
        short: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
    }
}

[demo] create demo page for ng-infinite-calendar

Fix short names of countries in i18n.ts

Bug, feature request, or proposal:

proposal

What is the expected behavior?

export const I18n = {
  enUS: {
    dayOfWeek: {
      default: [
...

What is the current behavior?

export const I18n = {
  en: {
    dayOfWeek: {
      default: [
...

What are the steps to reproduce?

See https://github.com/chase0213/ng-infinite-calendar/blob/master/src/i18n.ts

What is the use-case or motivation for changing an existing behavior?

en is ambiguous because enUS, enGB and more exist.

Which versions of package, node, npm or other packages are affected?

0.1.4

Is there anything else we should know?

nothing

[doc] add issue template