Package Exports

ngx-mat-tui-calendar
ngx-mat-tui-calendar/bundles/ngx-mat-tui-calendar.umd.js
ngx-mat-tui-calendar/fesm2015/ngx-mat-tui-calendar.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-mat-tui-calendar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngx-mat-tui-calendar

This project is an Angular, Material Design wrapper for the Toast UI Calendar, published via .

Material Design theming
Material Design buttons and dialog
Responsive to mobile devices
Dark mode in progress...

This repo contains two projects:

the source code for the npm library ngx-mat-tui-calendar, located in projects/ngx-mat-tui-calendar
the demo app, located in src

The top-level angular.json and package.json files are used for building both projects.

This repo was generated with Angular CLI version 12.2.3. Angular ^12.2 requires node ^v14.15 (npm ^v6.14).

Online Demo

https://ngx-mat-tui-calendar-demo.netlify.app/

UI

Month View

Week View

Day View

Event Editing Dialog

Usage

Getting started

Install via npm:

npm i --save ngx-mat-tui-calendar --legacy-peer-deps

which will add ngx-mat-tui-calendar, as well as all of its dependencies to your package.json file.

Next import the module into your app's app.module.ts:

import {NgxMatTuiCalendarModule} from 'ngx-mat-tui-calendar';

Then add NgxMatTuiCalendarModule to your list of NgModule imports, in app.module.ts

Insert the following HTML into your app's template file

<mat-tui-calendar></mat-tui-calendar>

Set up an Angular theme. For example add the following line to the top of your src/styles.scss file

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Quickstart Repo

A demonstration of the simple usage described above can be found at repo https://github.com/ron2015schmitt/ngx-mat-tui-calendar-quickstart

Demo Repo

A more extensive demonstration of usage can be found at repo https://github.com/ron2015schmitt/ngx-mat-tui-calendar-demo

Documentation

ngx-mat-tui-calendar

Selector: ngx-mat-tui-calendar

  <ngx-mat-tui-calendar #tuiCalendar 
    (userCreatedSchedule)="onUserCreatedSchedule($event)"
    (userUpdatedSchedule)="onUserUpdatedSchedule($event)"
    (userDeletedSchedule)="onUserDeletedSchedule($event)"
    [options]="options"
  >

Properties

Name	Description
@Input()
options: CalendarOptions	The options object for the calendar.
@Output()
userCreatedSchedule: EventEmitter	Event emitter that emits when the user creates a new "schedule" (ie calendar task).
@Output()
userUpdatedSchedule: EventEmitter	Event emitter that emits when the user updates a "schedule" (ie calendar task).
@Output()
userDeletedSchedule: EventEmitter	Event emitter that emits when the user deletes a "schedule" (ie calendar task).

Options

export interface CalendarOptions {
  ioptions: IOptions, // IOptions is defined in the tui-calendar package
  darkMode: boolean,  // not yet implemented. default is false
  themeClass?: string,
  buttons: {       // this sets visibility of buttons.  default is true
    previous?: boolean,
    next?: boolean,
    today?: boolean,
    longPrevious?: boolean,
    longNext?: boolean,
    month?: boolean,
    week?: boolean,
    day?: boolean,
  };
}

Development

Getting started

git clone https://github.com/ron2015schmitt/ngx-mat-tui-calendar
cd ngx-mat-tui-calendar
npm install --legacy-peer-deps
ng build  
ng serve

Point your browser to http://localhost:4200/

library package for ngx-mat-tui-calendar

The code that makes up the npm package is located in folder projects/ngx-mat-tui-calendar.

After making changes, increment the version in projects/ngx-mat-tui-calendar/package.json. We use the convention that the major version number corresponds to the major version of Angular used. The minor and patch versions are specific to this package.

The top-level angular.json file defines the build process for the library. The top-level package.json must include all the peer dependencies in projects/ngx-mat-tui-calendar/package.json.

API

The API is defined in projects/ngx-mat-tui-calendar/src/public-api.ts.

Build

Run ng build to build the library project. The build artifacts will be stored in the dist/ngx-mat-tui-calendar directory.

README

The main README file (README.md) and the package README file (projects/ngx-mat-tui-calendar/README.md) must be manually kept in sync: if you change one, then copy the change to the other.

Publish package to https://npmjs.com/

Change directories to the dist/ngx-mat-tui-calendar directory and run the following:

npm login
npm publish

publish source to github

Commit your changes and push to github.com. Then create a tab and release on github that matches the npm version number.

Demo App

Development server

The demo app is defined by the top-level package.json file, the top-level angular.json file and the contents of the src folder.

Run ng serve demo for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

However, if you change the library files, in directory projects/ngx-mat-tui-calendar, you need to

Rebuild the library using ng build
Kill the dev server by typing Ctrl-C in the terminal where you are running ng serve demo
Run ng serve demo to restart the dev server

Step 2 is usually necessary! You will get spurious errors without killing and restarting the server.