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-th-cal

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