Skip to content

radialapps/xunk-calendar

Repository files navigation

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/

Build Status

demo Maintainability Codacy Badge

GitHub version GitHub license Dependencies Dev Dependencies

npm version

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).