❤
npm
Sign UpSign In

react-desktop-calendar

0.0.8 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i react-desktop-calendar

Weekly Downloads

1

Version

0.0.8

License

ISC

Unpacked Size

49.8 kB

Total Files

6

Last publish

Collaborators

  • chandra001
Try on RunKit
Report malware