https://chandraa001.github.io/ChandraaReactStorybook/?path=/story/react-react-desktop-calendar--simplecalendar
react-desktop-calendar Details:
import {BharatDesktopCalendar} from 'react-desktop-calendar';
//CSS
import 'react-desktop-calendar/dist/react-desktop-calendar.css'
OR
//SCSS
import 'react-desktop-calendar/dist/react-desktop-calendar.Scss'
<BharatDesktopCalendar
onDayClick={(date) => { this.setState({SelectDays:[date]}) }}
SingleSelectedDays={this.state.SelectDays}
/>
<BharatDesktopCalendar
showOutsideDays={true}
/>
<BharatDesktopCalendar
showWeekNumbers={true}
showOutsideDays={true}
/>
<BharatDesktopCalendar
showWeekNumbers={true}
month={new Date()}
showOutsideDays={true}
todayButton={'Go To Today'}
onTodayButtonClick={(month)=>{ console.log('Month Call====>>',month)}}
/>
Prevent months navigation
<BharatDesktopCalendar
showWeekNumbers={true}
showOutsideDays={true}
canChangeMonth={false}
/>
Restrict months navigation
<BharatDesktopCalendar
showWeekNumbers={true}
showOutsideDays={true}
month={new Date()}
fromMonth={new Date()}
toMonth={ addMonths(new Date(),3)}
/>
<BharatDesktopCalendar
showWeekNumbers={true}
showOutsideDays={true}
canChangeMonth={false}
numberOfMonths={2}
/>
<BharatDesktopCalendar
showWeekNumbers={true}
showOutsideDays={true}
canChangeMonth={false}
SingleSelectedDays={[new Date, addDays(new Date(),1), addDays(new Date(),3), addDays(new Date(),5)]}
/>
Save selected days in state
<BharatDesktopCalendar
showWeekNumbers={true}
showOutsideDays={true}
canChangeMonth={false}
onDayClick={(date) => { this.setState({SelectDays:[date]}) }}
SingleSelectedDays={this.state.SelectDays}
/>
<BharatDesktopCalendar
showWeekNumbers={true}
showOutsideDays={true}
canChangeMonth={false}
onDayClick={(date) => {
let here = [...this.state.multipleDays];
here.push(date)
this.setState({multipleDays:here})
}}
SingleSelectedDays={this.state.multipleDays}
/>
<BharatDesktopCalendar
month={new Date(2017, 3)}
numberOfMonths={2}
showWeekNumbers
showOutsideDays
RangeSelectedDays={this.state.RangeSelectDays}
onDayClick={(date) => {
let shareDate = this.state.RangeSelectDays
if(shareDate[0].Start===null){
shareDate[0].Start = date
}else if(shareDate[0].End===null){
shareDate[0].End = date
}
this.setState({RangeSelectDays:shareDate})
}}
onDayMouseEnter={() => { }}
onDayMouseLeave={() => { }}
/>
Select days on mouse enter
<BharatDesktopCalendar
month={new Date(2017, 3)}
numberOfMonths={2}
showWeekNumbers
showOutsideDays
RangeSelectedDays={this.state.MouseRangeSelectDays}
onDayClick={(date) => {
let shareDate = this.state.MouseRangeSelectDays
if(shareDate[0].Start===null){
shareDate[0].Start = date
this.setState({MouseRangeSelectDays:shareDate})
}
}}
onDayMouseEnter={(date) => {
let shareDate = this.state.MouseRangeSelectDays
if(shareDate[0].Start!==null && isAfter(date,shareDate[0].Start)){
shareDate[0].End = date
this.setState({MouseRangeSelectDays:shareDate})
}
}}
onDayMouseLeave={() => { }}
/>
<BharatDesktopCalendar
month={new Date(2017, 3)}
showWeekNumbers
onWeekClick={(Week, date) => {
this.setState({
WeekRangeSelectDays: [{
RangeWork: true,
Start: date[0].date,
End: date[6].date
}]
})
}}
showOutsideDays
RangeSelectedDays={this.state.WeekRangeSelectDays}
onDayClick={(date) => {
this.setState({
WeekRangeSelectDays: [{
RangeWork: true,
Start: startOfWeek(date),
End: endOfWeek(date)
}]
})
}}
onDayMouseEnter={() => { }}
onDayMouseLeave={() => { }}
/>
<BharatDesktopCalendar
canChangeMonth={false}
numberOfMonths={2}
renderHtmlBelowMonth={[
{
Date:new Date(),
Html:<ul>
<li>hrjk</li>
<li>zgfxdd</li>
</ul>
},
{
Date: addMonths(new Date(),1),
Html:<ul>
<li>hrjk</li>
<li>zgfxdd</li>
</ul>
}
]}
/>
<BharatDesktopCalendar
month={new Date(2017, 3)}
showOutsideDays
onDayClick={(date) => { console.log('============>>>>', date) }}
onDayMouseEnter={() => { console.log('on mouse enter===>>>>') }}
onDayMouseLeave={() => { console.log('mouse leave=====>>>>') }}
disabledDays={[new Date(2017, 3, 12), new Date(2017, 3, 2)]}
disableRangeDays={{ after: new Date(2017, 3, 20), before: new Date(2017, 3, 25) }}
/>
<BharatDesktopCalendar
month={new Date(2017, 3)}
showOutsideDays
onDayClick={(date) => { console.log('============>>>>', date) }}
onDayMouseEnter={() => { console.log('on mouse enter===>>>>') }}
onDayMouseLeave={() => { console.log('mouse leave=====>>>>') }}
VisibleDaysOfWeekRange={{ from: 0, to: 6 }}
/>
Switch between years and months
function YearMonthForm({ date, localeUtils, onChange }) {
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const years = [];
for (let i = fromMonth.getFullYear(); i <= toMonth.getFullYear(); i += 1) {
years.push(i);
}
const handleChange = function handleChange(e) {
const { year, month } = e.target.form;
onChange(new Date(year.value, month.value));
};
return (
<form className="BharatWork-Header">
<select name="month" onChange={handleChange} value={date.getMonth()}>
{months.map((month, i) => (
<option key={month} value={i}>
{month}
</option>
))}
</select>
<select name="year" onChange={handleChange} value={date.getFullYear()}>
{years.map(year => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
</form>
);
}
<BharatDesktopCalendar
month={this.state.TodaysDate}
fromMonth={fromMonth}
toMonth={toMonth}
captionElement={
<YearMonthForm
date={this.state.TodaysDate}
localeUtils={this.state.TodaysDate}
onChange={this.handleYearMonthChange}
/>
}
ChangeMonthDay={(day) => { this.setState({ TodaysDate: day }) }}
onDayClick={(date) => { console.log('============>>>>', date) }}
onDayMouseEnter={() => { console.log('on mouse enter===>>>>') }}
onDayMouseLeave={() => { console.log('mouse leave=====>>>>') }}
VisibleDaysOfWeekRange={{ from: 0, to: 6 }}
/>
</div>
Customize navbar and weekdays
function Navbar({ date, onPreviousClick, onNextClick }) {
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const prev = months[getMonth(subMonths(date, 1))];
const next = months[getMonth(addMonths(date, 1))];
const styleLeft = {
float: 'left',
};
const styleRight = {
float: 'right',
};
const styleHeader = {
position: 'relative'
}
return (
<div style={styleHeader}>
<button style={styleLeft} onClick={() => { onPreviousClick() }}>
← {prev.slice(0, 3)}
</button>
<button style={styleRight} onClick={() => { onNextClick() }}>
{next.slice(0, 3)} →
</button>
</div>
);
}
<BharatDesktopCalendar
month={this.state.TodaysDate}
fromMonth={fromMonth}
toMonth={toMonth}
canChangeMonth
navbarElement={<Navbar date={this.state.TodaysDate}
onPreviousClick={() => { this.setState({ TodaysDate: subMonths(this.state.TodaysDate, 1) }) }}
onNextClick={() => { this.setState({ TodaysDate: addMonths(this.state.TodaysDate, 1) }) }}
/>}
ChangeMonthDay={(day) => { this.setState({ TodaysDate: day }) }}
onDayClick={(date) => { console.log('============>>>>', date) }}
onDayMouseEnter={() => { console.log('on mouse enter===>>>>') }}
onDayMouseLeave={() => { console.log('mouse leave=====>>>>') }}
VisibleDaysOfWeekRange={{ from: 0, to: 6 }}
/>
import lefticon from './lib/styles/Img/Bharatleft-arrow.svg';
import righticon from './lib/styles/Img/Bharatright-arrow.svg';
const WeekValue = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
const currentYear = new Date().getFullYear();
const fromMonth = new Date(currentYear, 0);
const toMonth = new Date(currentYear + 10, 11);
const EventDisplay = [
{
Date: new Date(2021, 7, 1),
EventName: ['Mirko', 'Gianni']
},
{
Date: new Date(2021, 7, 3),
EventName: ['Elena']
},
{
Date: new Date(2021, 7, 10),
EventName: ['Claudia']
},
{
Date: new Date(2021, 7, 21),
EventName: ['Maria', 'Luigi']
}
]
<BharatDesktopCalendar
month={this.state.TodaysDate}
fromMonth={fromMonth}
toMonth={toMonth}
NavigationLeftIcon={lefticon}
NavigationRightIcon={righticon}
WeekValue={WeekValue}
onDayClick={(date) => { console.log('============>>>>', date) }}
onDayMouseEnter={() => { console.log('on mouse enter===>>>>') }}
onDayMouseLeave={() => { console.log('mouse leave=====>>>>') }}
VisibleDaysOfWeekRange={{ from: 0, to: 6 }}
Events={EventDisplay}
numberOfMonths={2}
renderHtmlBelowMonth={[{
Date: new Date(),
Html: <ul><li>her</li><li>ber</li></ul>
}]}
CellCss={{
height: 50,
width: 60,
position: 'relative'
}}
EventCss={{
fontSize: '0.8em', textAlign: 'left'
}}
/>
Name |
Type |
Default |
Required |
Description |
WeekValue |
Array |
['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] |
No |
Array Of Weekobject |
onDayClick |
Function |
undefined |
Yes |
Give The Event Of Date Click Function |
SingleSelectedDays |
Array |
undefined |
Yes |
Set The Array Of Date |
showOutsideDays |
Boolean |
false |
No |
Show Or Hide Outside Days |
showWeekNumbers |
Boolean |
false |
No |
Show Or Hide Week Numbers |
month |
Date |
new Date() |
Yes |
Set Current Active Month |
todayButton |
String |
'' |
No |
Label Of Today Button |
onTodayButtonClick |
Function |
undefined |
No |
Give The Event Of Today Date On Click Function |
canChangeMonth |
Boolean |
true |
No |
To Handle Month Navigation |
fromMonth |
Date |
undefined |
No |
Range Of Month |
toMonth |
Date |
undefined |
No |
Range Of Month |
numberOfMonths |
Number |
1 |
Yes |
To Show Number Of Month |
RangeSelectedDays |
Array |
[] |
No |
Range Of Selected Days |
renderHtmlBelowMonth |
Array |
[] |
No |
Set Array Of Data Show Below Month |
Events |
Array |
undefined |
No |
Set The Events in Array to Show in calendar |
disabledDays |
Array |
[] |
No |
Set The Array Of Date To Be Disable |
disableRangeDays |
Object |
{} |
No |
Set The Object Of Disable Days In Range |
VisibleDaysOfWeekRange |
Object |
{ from: 0, to: 6 } |
No |
Number Of Days Visible In Week Range |
captionElement |
Object |
undefined |
No |
Set The Object For Caption Element |
ChangeMonthDay |
Function |
undefined |
No |
Change The Month Function |
navbarElement |
Object |
undefined |
No |
Object Of Navigation Bar |
CellCss |
Object |
{} |
No |
Css For Calendar Cell |
EventCss |
Object |
{} |
No |
Css For Event |
NavigationLeftIcon |
String |
'' |
Yes |
Path Of Image |
NavigationRightIcon |
String |
'' |
Yes |
Path Of Image |