xunk-calendar

XunkCalendar

XunkCalendar is a simple calendar component with material design designed for Angular 6+ and Angular Material (might work with earlier versions too!). It allows creation of a heatmap for dates (with strange syntax, since this was designed for a specific project). Check the demo app's source for how to do this. A live demo can be found at https://radialapps.github.io/xunk-calendar/

Installation

The package is hosted on npm, so you can install it just by

npm install xunk-calendar

Usage

First, import XunkCalendarModule into app.module. You may then use the component as

<xunk-calendar [selectedDate]="selDate"></xunk-calendar>

selectedDate binds to a JSON object of the following format (say for 2018-02-16):

{
  date: 16,
  month: 1,
  year: 18
}

Note that month starts with 0, but date starts with 1. To quickly make the initial selected date to today, you may do

selDate = XunkCalendarModule.getToday();

Dependencies

The component makes use of mat-icon and mat-button from @angular/material. You may need other dependencies in package.json to build the module.

Known Issues

Currently, the selectedDate object has to be initialized properly, and a minimal initialization looks like

public selDate = { date:1, month:1, year:1 };

ngOnInit() {
  this.selDate = XunkCalendarModule.getToday();
}

Contributing

Contributing is free! You are welcome to criticize, help write code, file bugs or give me a lesson on how to properly comment code! If there is one thing, since circleci's build will test for it, it is absolutely imperative to lint your code (with ng lint).