NgxSimpleCalendar

This library was generated with Angular CLI version 8.2.4.

Introduction

Ngx-simple-calendar is an open source, light-weight, highly customizable calendar component for Angular. Allows users to customize day, month templates with event objects of their choosing, providing a simple API.

StackBlitz sample project example: https://stackblitz.com/edit/angular-ngx-simple-calendar

Usage

First install the package with yarn or npm

npm install ngx-simple-calendar

Then import the NgxSimpleCalendarModule

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
  
import { AppComponent } from './app.component';  
import {NgxSimpleCalendarModule} from 'ngx-simple-calendar'; 
  
@NgModule({  
  declarations: [AppComponent],  
  imports: [BrowserModule, NgxSimpleCalendarModule],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule { }

Use in your components

---app.component.html

<div class="container">  
 <ngx-simple-calendar></ngx-simple-calendar>  
</div>

----app.component.scss---

.container {  
  position: relative;  
  height: 40rem;  
  width: 40rem;  
  margin: 2rem;  
}

IMPORTANT : For Positioning and dimentions: The wrapper component must have relative positioning, and have determined dimensions.

Custom templates

Here I will list the possibility of customized templates for certain features of the calendar. These are all optional and override the default templates in the component, giving the variables provided by the component for that day.

For days in month

Defining an ng-template with #day inside the component lets you have access to the following properties, which will allow you to make your own custom templates, with custom components as well, as days in the calendar.

	Type	Meaning
number	number	The number of the day in current month view
month	number	The number of the month in the year. 0-indexed.
year	number	The year of the current month view
today	boolean	Is this day in the month, today's date ?
weekend	boolean	Is this day in the month, a weekend day ?
activeMonth	boolean	Does this day in the month view, belong to current month viewed ?
startDateTime	Date	Date javascript object of day start
endDateTime	Date	Date javascript object of day end

---app.component.html----

 <ngx-simple-calendar [options]="options2" [events]="events">  
	     <ng-template #day 
	     let-date="number" let-events="events" let-active="today" let-weekend="weekend"> 
	      
			 <div class="round-date" [class.active]="active" [class.weekend]="weekend">  
			     <span>{{date}}</span>  
			     <div class="events">  
				     <div class="event" 
				     [style.background-color]="event.data.color" 
				     *ngFor="let event of events" 
				     [title]="event.data.name + event.data.description"></div>  
				 </div>  
			</div>  
			
	     </ng-template>  
 </ngx-simple-calendar>

---app.component.scss---

.round-date {
	  position: absolute;  // The wrapper is positioned relative, so...
      top: 0;  
      bottom: 0;  
      left: 0;  
      right: 0;  
      display: flex;  
      flex-direction: column;   
      background-color: #f5f5f5;  
      border: 1px solid #dedede;  
      border-radius: 25%;  
      padding: 0.55rem; 
      margin: 0.5rem; 
      &.active {  
	      border: 2px dashed #adadad;  
	      background: #eaeaea;  
     }  
     &.weekend {  
	      background: #ffe8e8;  
     }
 }  
 .....

For Days of the week

Defining an ng-template with #weekDays inside the component lets you have access to the following properties:

	Type	Meaning
id	number	Id of day of the week. 0-Sunday...6-Saturday
translationKey	string	Translation key for translating
name	string	Name in english

For Top bar with month-year and navigating functions

Defining an ng-template with #topBar inside the component lets you have access to the following properties:

	Type	Meaning
month	CalendarMonth	Month of currentView properties as listed above
year	number	Year
setNextMonth	Function	Function to call when wanting to change current month view to the next
setPreviousMonth	Function	Function to call when wanting to change current month view to the previous

Options

The following keys on the Input property options add customizations to the calendar.

	Type	Meaning
outline	boolean	Have bordered days in calendar
evenDayDimensions	boolean	The days on the calendar to be 1:1 aspect ratio.

Events

The following keys on the Input property array events add events to the calendar.

	Type	Meaning	required
startDateTime	Date	Start date-time of event	yes
endDateTime	Date	End date-time of event	no
data	any	Any data that is to be associated to event	no

How to use events:

Events binds to an array of CalendarEvent objects defined above.

• startDateTime is required and signifies the start of the event
• endDateTime is not required, and when it is not given, when the event will only be added to the day (accessible through template of #day ) that holds the given startDateTime (Like a whole day event)
• When both are given the event is added to the given interval of day, meaning if the interval is between more days, it will be added on all days on which it is a part of (accessible through template of #day )
• When wanting to update events, just reassign events on the binded property, then the calendar will update it's view and data. Check stackblitz example for help..

Plans for Future Versions

• Extended API for non-template/default variation. ( For events first and foremost)
• Year picker, today navigation.
• Aspect ratio API and Positioning and dimensions (Mainly for ease of use)
• General API improvements and extensions. (Backwards compatible, without breaking-changes)