cst-calendar v0.1.0

Calendar component that you can use in any framework or with no framework at all.

Web component tag

<cst-calendar></cst-calendar>

Angular quick start

• Run npm install cst-calendar --prefix ./src/assets
• Put this script tag <script src='assets/node_modules/cst-calendar/dist/cstcalendar.js'></script> in the head of your index.html
• Including the CUSTOM_ELEMENTS_SCHEMA in the module allows the use of the web components in the HTML markup without the compiler producing errors. Here is an example of adding it to AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, SharedModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

• Then you can use the element anywhere in your template, JSX, html etc

React quick start

• Run $ npm install cst-calendar --prefix ./public
• Put this script tag <script src='./node_modules/cst-calendar/dist/cstcalendar.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Vanilla JS

• Run $ npm install cst-calendar --save
• Put this script tag <script src='./node_modules/cst-calendar/dist/cstcalendar.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template

In a stencil-starter app

• Run npm install cst-calendar --save
• Add an import to the npm packages import cst-calendar;
• Then you can use the element anywhere in your template, JSX, html etc

Usage

Angular

<cst-calendar (selectedDate)="getDate($event)" [config]='{"selectedDates":[new Date(2019,3,29),new Date(2019,3,30),new Date(2019,3,17)],"range":false}'></cst-calendar>

React

componentDidMount(){
   let calendarElement = document.querySelector('cst-calendar');
   calendarElement.addEventListener('selectedDate', event => { console.log(event) })
   calendarElement['config'] = {"selectedDates":[new Date(2019,3,29),new Date(2019,3,30),new Date(2019,3,17)],"range":false}
 }
 
 render() {
   return (
     <div className="App">
       <cst-calendar></cst-calendar>
     </div>
   );
 }

Vanilla JS

 <div className="App">
     <cst-calendar></cst-calendar>
 </div>

   <script>
     const element = document.querySelector('cst-calendar');
     element.addEventListener('selectedDate', event => { console.log(event) })
     element['config'] = {"selectedDates":[new Date(2019,3,29),new Date(2019,3,30),new Date(2019,3,17)],"range":false}
   </script>