npm:th-calendar

README

Thiqah Calendar Reusable Component

Thiqah Calendar Component is a lit-element web component that developed by Thiqah Frontend Team

Installation

1- configure .npmrc create .npmrc file inside your project and add thiqah NPM registry on thiqah TFS to allow your machine from installing our NPM package.

registry=https://tf.thiqah.sa/tfs/DefaultCollection/_packaging/Thiqah.ReusableComponent.FrontEnd/npm/registry/
always-auth=true

2- install package: to install Calendar Reusable Component package run the following command line in your bash or command prompt

npm i th-thCal

Usage in regular web project

Static pages any none JS framework inside your html file,

First, Add jquery inside your project
add vendor and app JS Files at the end of BODY tag:

<script type="text/javascript" src="node_modules/th-calendar/vendors.js"></script>
<script type="text/javascript" src="node_modules/th-calendar/app.js"></script>

add the jquery.calendars.picker.css file from src/assets in your head

<link rel="stylesheet" href="./node_modules/th-calendar/src/assets/css/jquery.calendars.picker.css">

inside your HTML, be sure from passing all needed properties

<main>
  <main>
            <!-- 
                calendar_type = ummalqura | islamic | gregorian
                lang = umalqura => ar | en, islamic => ar | en, gregorian => ar-SA | en
                class_name
                local_numbers
            -->
            <th-calendar lang="ar" calendar_type="ummalqura" local_numbers="1"></th-calendar>
        </main>
</main>

to integrate with the implemented component, listen to its events and update its data

var ThCal = function () {
            this.thCal = document.querySelector('th-calendar');
            this.init();
            this.eventListeners();
        };

        ThCal.prototype.init = function () {};

        ThCal.prototype.eventListeners = function () {
            this.thCal.addEventListener('onSelectedDate', this.selectDate.bind(this));
        };

        ThCal.prototype.selectDate = function (event) {
            console.log(event.detail);
        };

        window.addEventListener('load', (event) => {
            new ThCal();
        });

Usage in Angular web project

install jquery into your application, or add it inside angular.json file.
Add vendors.js and app.js files into angular.json file.

"scripts": [
  "node_modules/th-calendar/vendors.js",
  "node_modules/th-calendar/app.js"
]

import jquery.calendars.picker.css file inside angular.json

"styles": [
  "node_modules/th-calendar/src/assets/css/jquery.calendars.picker.css",
]

Now, import CUSTOM_ELEMENTS_SCHEMA and NO_ERRORS_SCHEMA inside app.nodule.ts and add schemas to @NgModule

import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
@NgModule({
  imports: [
    BrowserModule,
  ],
  declarations: [],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
    NO_ERRORS_SCHEMA
  ]
})

inside component.ts add

import { Component, ElementRef, NgZone } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild("thCal", { static: false }) thCal: ElementRef;
  data;
  
  constructor(
    private elementRef: ElementRef,
    private _ngZone: NgZone) {}
  
  prepareThCal() {
    const myThCal = this.thCal.nativeElement;
    myThCal.addEventListener('onSelectedDate', (event) => {
      this._ngZone.run(() => this.data = console.log(event.detail));
    });
  }
   
   ngAfterViewInit() {
     this.prepareThCal();
    }
 }

inside component.html add the custom element

<main>
  <th-calendar
      #thCal
      lang="ar"
      calendar_type="ummalqura"
      local_numbers="1">
  </th-calendar>
</main>

Component Properties

1- calendar_type Property:-

 - Take STRING value.
 - Default Value => gregorian
 - Value Must be in small Case.
 - Has 3 Values => ( ummalqura | islamic | gregorian )

2- lang Property:-

 - Take STRING value.
 - Default Value => en
 - Value Must be in SMALL Case.
 - if you use **ummalqura** or **islamic**, lang has to values => en | ar
 - if you use **gregorian**, lang values are ar-SA | en

3- date_format Property:-

 - Take STRING value.
 - Default Value => null

4- class_name Property:-

 - Take STRING value.
 - Default Value => null
 - Take any class name

5- local_numbers Property:-

 - Take NUMBER value.
 - Default Value => 0
 - Values => 0 | 1

Events

1- onSelectedDate Event

 - retun an object contains the timeStamp of the selected date and the selected date.

License

THIQAH Frontend Team KSA

Usage no npm install needed!