react-datepickerDemo Live

Installation

npm install @ijavad805/react-datepicker

Usage

import{Datepicker}from'@ijavad805/react-datepicker';// simplefunctionAppSimple(){return<Datepicker/>;}// full optionsfunctionApp(){return(<Datepickerfooter={(moment,setValue)=>{return(<><divonClick={()=>{if(setValue)setValue(moment());}}>              Today</div></>);}}closeWhenSelectADay={true}// booleandayEffects={[{day:'2022-09-12',color:'red',dotColor:'red',title:'What ever you want',},]}disabled={false}// disable inputdisabledDate={(day)=>day===moment()}// today should be disabledformat={'YYYY-MM-DD'}input={<inputplaceholder="Select a date"/>}// whatever you wantonOpen={()=>{console.log('datepicker is open');}}lang={'en'}// en and faloading={false}// show loading in datepicker if is openmodeTheme={'dark'}// dark and lighttheme={'blue'}// blue , orange , red , green , yellowdefaultValue={moment()}adjustPosition={'auto'}// auto, right-top, left-top, right-bottom, left-bottom, modalonChange={(val:any)=>{console.log(val.format());}}/>);}

Calendar ( VERSION 1 )Demo

Calendar Properties

IEvent Interface

constApp=()=>{return(<Calendarlang="en"theme="blue"events={[{id:1,// it should uniquetitle:'Test',date:'2023-09-16',className:'test',dotColor:'#000',disabled:false,icon:'$',// also you can use componentstyle:{// what ever you want},},]}onDropEvent={(item:IEvent)=>{// for enabling drag and drop option you should pass this functionconsole.log(item);}}onClickEvent={(item:IEvent)=>console.log(item)}onDoubleClickEvent={(item:IEvent)=>console.log(item)}style={{height:600,}}onDateClick={(date:moment.Moment)=>console.log(date)}/>);};

Report issues