0.0.4 • Published 6 years ago
ox-calendar-picker v0.0.4
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
- 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