Kollia NPM | npm.io

Kollia

Deeply customizable UI Components for react.js applications.

installation

To install this library, you can run:

npm install kollia or yarn add kollia

Usage

Here's an example of basic usage:

    import React from 'react';
    import { DatePicker } from 'kollia';

    function MyApp() {
        return (
            <div>
                <DatePicker 
                    title="Avaibility" 
                    setItemLabelValue={() => "€ 500"} 
                    onSelect={value => console.log(value)} />
            </div>
        );
    }

Documentation

DatePicker

Prop	Type	Default	Description
title	string	n/a	Title of the component
lengend	string[]	"Unavailable","Available"	Lengends text
className	string	n/a	Custom class name(s) that will be added
onSelect	(value: {startDate: Date, endDate: Date}) => void	n/a
setItemLabelValue	(date: Date) => string	n/a	function called to add custom label to each date (we have to return the label as a string)
textColor	string	#1A2B48	Color of the text in the calendar
headerColor	string	#5E6D77	color of the header text (day's names)
enableColor	{borderColor: string; color: string; textColor: string}	{borderColor: #dadcdd; color: #5191FA; textColor: #fff}	color config of the enabled dates
disableColor	{borderColor: string; color: string; textColor: string}	{borderColor: #dadcdd; color: #fff; textColor: #dadcdd}	color config of the disabled dates
activeColor	string	#FA5636	color of the current date
hiddenColor	string	n/a	set color here to display date that are not in the current month
selectedColor	{color: string; backgroundColor: string}	{color: #fff; backgroundColor: #5191FA}	colors config of the selected dates
outerBorderColor	string	#dadcdd	border color of the calendar
innerBorderColor	string	#dadcdd	border color of each date in the calendar
headerBorderColor	string	#dadcdd	border color of the header bar
innerBorderRadius	number	5	border radius of each date in the calendar
outerBorderRadius	number	5	border width of the calendar
innerBorderWidth	number	1	border width of each date in the calendar
headerBorderWidth	number	1	border width of the header bar
disabledDates	Date[]	n/a	list of date to enable or disable dependind of the value of the `enableOnly` props
enableOnly	boolean	false	if true enable only the date provided in `disabledDates` props. All other dates will be disabled