react-desktop-calendar

Check for Documentation:

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'

Simple Calendar

 <BharatDesktopCalendar 
  onDayClick={(date) => { this.setState({SelectDays:[date]}) }}
  SingleSelectedDays={this.state.SelectDays}
  />

showOutsideDays

     <BharatDesktopCalendar 
          showOutsideDays={true}
          />

showWeekNumbers

     <BharatDesktopCalendar 
          showWeekNumbers={true}
          showOutsideDays={true}
          />

todayButton

    <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)}
          />

Multiple months

     <BharatDesktopCalendar 
          showWeekNumbers={true}
          showOutsideDays={true}
          canChangeMonth={false}
          numberOfMonths={2}
          />

Display days as selected

      <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}
          />

Selecting multiple days

     <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}
          />

Select a range of days

      <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={() => { }}
          />

Selecting an entire week

    <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={() => { }}
          />

Render Html View

    <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>
            }
          ]}
          />

Display days as disabled

        <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) }}
          />

Disable days of Weeks

     <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 }}
          />

Add content to day cells

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'
            }}
          />

Default Props:

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