Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@acpaas-ui/ngx-agenda

Package Overview
Dependencies
Maintainers
10
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@acpaas-ui/ngx-agenda

The `@acpaas-ui/agenda` module provides the `aui-agenda` component which can be used as a calendar to display events. At the moment the component can only display a month view.

  • 5.0.1
  • latest
  • npm
  • Socket score

Version published
Maintainers
10
Created
Source

@acpaas-ui/ngx-agenda

The @acpaas-ui/agenda module provides the aui-agenda component which can be used as a calendar to display events. At the moment the component can only display a month view.

Installation

npm install @acpaas-ui/agenda --save

Import component in app.module.ts

import { AgendaModule } from '@acpaas-ui/agenda';

@NgModule({
    imports: [
        AgendaModule
    ]
})

Translation

It is possible to translate month and weekday labels through the forChild function.

Mind the order of the days: 0 = sunday, 1 = monday, 2 = tuesday, ... 6 = saturday 0 = January, 1 = February, ... 11 = December

@NgModule({
    imports: [
        AgendaModule.forChild(
            ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
            ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'],
        ),
    ]
})

Basic Usage

The most basic example is to render just the agenda for the current date.

<aui-agenda
    [activeDate]="activeDate"
    [view]="'MONTH'"
></aui-agenda>

activeDate: Date the current date. Example: "2018-01-10" will open the month view on January. "2018-02-20" will open the month view on February.

view: string the active view. For now, only the MONTH view is available.

Define startday of week

It's possible to define which day is the first day of the week. Define the day with a number (0 = sunday, 1 = monday, ...) or use the DAYS enum: (DAYS.MONDAY evaluates to 1) import { DAYS } from @acpaas-ui/agenda.

<aui-agenda
    [startDayOfWeek]="0"
></aui-agenda>

Display events

<aui-agenda
    ...
    [events]="events"
></aui-agenda>

events: Event[] A list of events. An event should have at least a startDate, endDate and 'title.

Display events: template (only for month view)

It's possible to define a template for the event-item in the month view.

<ng-template #itemTemplate let-event="event">
    <aui-icon name="ai-calendar-3"></aui-icon> {{event.title}}
</ng-template>

<aui-agenda
    ...
    [events]="events"
    [monthEventItemTemplate]="itemTemplate"
></aui-agenda>

Define a template with ng-template and define on aui-agenda with monthEventItemTemplate. In the template it is possible to get the event data with let-event="event".

Navigate

There is a callback for navigating in the agenda. Example: when navigating from January to February, the returned value is { start: "2018-01-29...", end: "2018-03-4..."}. This value contains the first and last day of the month view. Be aware that the first and last day are dependant on the configured startDayOfWeek property.

<aui-agenda
    ...
    [events]="events"
    (navigate)="onNavigate($event)"
></aui-agenda>

Select day

There is a callback for clicking on a day. The returned value is a string in YYYY-MM-DD format of the selected day (timezone independent).

<aui-agenda
    ...
    (selectDay)="onSelectDay($event)"
></aui-agenda>

Click on "more items" (month view)

When there are more events than slots for one day, the aui-agenda will display a "more" button with a click callback. The returned value is the Date of the selected day.

<aui-agenda
    ...
    (clickMore)="onClickMore($event)"
></aui-agenda>

Agenda size (month view)

The aui-agenda component is styled based on the available width of the parent container. Using the component in a sidebar should automaticly render the small version of the aui-agenda. Rendering the aui-agenda full-screen should render the big version on desktop and the small version on a small screen.

FAQs

Package last updated on 10 Jun 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc