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:

1. the source code for the npm library ngx-mat-tui-calendar, located in projects/ngx-mat-tui-calendar
2. 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

StackBlitz

This project requires StackBlitz v2 and is forthcoming...

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

1. Rebuild the library using ng build
2. Kill the dev server by typing Ctrl-C in the terminal where you are running ng serve demo
3. 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.