CalendarPicker

Early development stage calendarpicker webComponent created with StencilJS.

Using this component

Node Modules

• Run npm install ox-calendar-picker --save
• Put a script tag similar to this <script src='node_modules/ox-calendar-picker/dist/calendarpicker.js'></script> in the head of your index.html
• Add IonicIcons <script src="https://unpkg.com/ionicons@4.2.5/dist/ionicons.js"></script>
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

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

Import to your angular6 project.

• Run npm install ox-calendar-picker --save
• Add this to your angular.json architect > build > assets
  • { "glob": "**/*", "input": "node_modules/ox-calendar-picker/dist", "output": "./assets/ox-calendar-picker" }
• Import in index.html
  • <script src='assets/ox-calendar-picker/calendarpicker.js'></script>
• Add IonicIcons <script src="https://unpkg.com/ionicons@4.2.5/dist/ionicons.js"></script>
• Import in app.module
  • import {calendarpicker} from 'ox-calendar-picker/dist/calendarpicker';
• Enable custom Elements in app.module
  • schemas: [CUSTOM_ELEMENTS_SCHEMA],

Components options:

MultipleDays selection

Set to TRUE by default, enable user to select multiple days.

  <calendar-picker  multiple-days=false></calendar-picker>

Get Selected days

Example: Angular

<calendar-picker (selectedDaysUpate)="daysUpdated($event)"  multiple-days=true></calendar-picker>

Example: Javacript

<calendar-picker id="calendar"  multiple-days=true></calendar-picker>

  var elem = document.getElementById('calendar');
  elem.addEventListener('selectedDaysUpate', ev =>{
    console.log("Calendar updated", ev.detail);
  })

Developers!

To start building a new web component using Stencil, clone this repo to a new directory:

git clone https://github.com/oxigenao/CalendarPickerWebComponent calendar-picker
cd my-component
git remote rm origin

and run:

npm install
npm start

To watch for file changes during develop, run:

npm run dev

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test