https://github.com/radialapps/xunk-calendar

A simple calendar component for Angular 8+ and Angular Material
https://github.com/radialapps/xunk-calendar

angular angular-components angular-material angular5 calendar-component material

Last synced: 10 months ago
JSON representation

A simple calendar component for Angular 8+ and Angular Material

• Host: GitHub
• URL: https://github.com/radialapps/xunk-calendar
• Owner: radialapps
• License: mit
• Created: 2018-02-16T17:47:31.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T02:19:13.000Z (over 3 years ago)
• Last Synced: 2025-05-19T16:49:30.157Z (11 months ago)
• Topics: angular, angular-components, angular-material, angular5, calendar-component, material
• Language: TypeScript
• Homepage: https://radialapps.github.io/xunk-calendar/
• Size: 2.64 MB
• Stars: 3
• Watchers: 0
• Forks: 2
• Open Issues: 31
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 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](https://travis-ci.org/radialapps/xunk-calendar.svg?branch=master)](https://travis-ci.org/radialapps/xunk-calendar)

[![demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://radialapps.github.io/xunk-calendar/)

[![Maintainability](https://api.codeclimate.com/v1/badges/83af59f2a3f6e593e4dc/maintainability)](https://codeclimate.com/github/radialapps/xunk-calendar/maintainability)

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/3b4ce4ee34a74d428aed7826c70f7c47)](https://www.codacy.com/app/pulsejet/xunk-calendar?utm_source=github.com&utm_medium=referral&utm_content=radialapps/xunk-calendar&utm_campaign=Badge_Grade)

[![GitHub version](https://badge.fury.io/gh/radialapps%2Fxunk-calendar.svg)](https://badge.fury.io/gh/radialapps%2Fxunk-calendar)

[![GitHub license](https://img.shields.io/github/license/radialapps/xunk-calendar.svg)](https://github.com/radialapps/xunk-calendar/blob/master/LICENSE)

[![Dependencies](https://david-dm.org/radialapps/xunk-calendar/status.svg)](https://david-dm.org/radialapps/xunk-calendar)

[![Dev Dependencies](https://david-dm.org/radialapps/xunk-calendar/dev-status.svg)](https://david-dm.org/radialapps/xunk-calendar?type=dev)

[![npm version](https://badge.fury.io/js/xunk-calendar.svg)](https://badge.fury.io/js/xunk-calendar)

# Installation

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

```Bash

npm install xunk-calendar

```

# Usage

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

```HTML

```

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

```javascript

{

  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

```typescript

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

```typescript

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