ngx-simple-calendar v1.0.3

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.

---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:

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:

Options

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

Events

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

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)