Global

Methods

CustomCalendar() → {JSX.Element}

A simple light weight fully customizable calendar component.

Properties

Name	Type	Attributes	Default	Description
`props.setDaysProp`	function			A state setter function that updates the list of days to display.
`props.onDateClick`	function			A function that is called when a date is clicked.
`props.onDateMouseEnter`	function			A function that is called when the mouse enters a date.
`props.onDateMouseLeave`	function			A function that is called when the mouse leaves a date.
`props.onPrevMonthClick`	function			A function that is called when the "previous month" button is clicked.
`props.onNextMonthClick`	function			A function that is called when the "next month" button is clicked.
`props.prevMonthButtonIcon`	JSX.Element	<optional>		An optional icon element to use for the "previous month" button.
`props.nextMonthButtonIcon`	JSX.Element	<optional>		An optional icon element to use for the "next month" button.
`props.eventDataProps`	Array.<object>	<optional>		An optional array of event data objects.
`props.eventKeyName`	string	<optional>		An optional key name to use when accessing event data properties.
`props.weekDaysType`	string	<optional>		An optional string representing the type of week days to display.
`props.viewPrevNextMonth`	boolean	<optional>	true	A boolean indicating whether the "previous month" and "next month" dates should be displayed along with the current date.

Source: calendar.tsx, line 10

Returns:

A React element that displays the calendar.

Type:: JSX.Element

Examples

simple calendar display

    import { Calendar } from "callendly";
    <Calendar />

view previous and next month days on the current calendar

    import { Calendar } from "callendly";
    <Calendar  viewPrevNextMonth={true}/>

Get the days data currently displaying

    import { Calendar } from "callendly";
    import { useState } from "react";

    export default function MyCalendar() {
      const [days, setDays] = useState([]);
    
      return (
        <div>
          <Calendar setDaysProp={setDays} />
          <pre>{JSON.stringify(days, null, 2)}</pre>
        </div>
      );
    }

On Date Click

    import { Calendar } from "callendly";
    const handleOnDateClick = (selectedDate : Date) =>{
      console.log("selectedDate is ",selectedDate);
    }
    <Calendar  onDateClick={handleOnDateClick}/>

On Date mouse enter

    import { Calendar } from "callendly";
    const handleOnDateMouseEnter = (dateMouseEnter : Date) =>{
      console.log("Date mouse enter is ",dateMouseEnter);
    }
    <Calendar  onDateMouseEnter={handleOnDateMouseEnter}/>

On Date mouse leave

    import { Calendar } from "callendly";
    const handleOnDateMouseLeave = (dateMouseLeave : Date) =>{
      console.log("Date mouse leave is ",dateMouseLeave);
    }
    <Calendar  onDateMouseLeave={handleOnDateMouseLeave}/>

On previous month button click

    import { Calendar } from "callendly";
    const handleOnPrevMonthClick = () =>{
      console.log("previous month button is clicked");
    }
    <Calendar  onPrevMonthClick={handleOnPrevMonthClick}/>

On next month button click

    import { Calendar } from "callendly";
    const handleOnNextMonthClick = () =>{
      console.log("next month button is clicked");
    }
    <Calendar  onNextMonthClick={handleOnNextMonthClick}/>

Event data is shown in calendar

    import { Calendar } from "callendly";
    //event data needs to be an array of object with a key and value should be of type date
    // The event example below has data on keyName meetingDate
    const eventData = [
      {
        meetingDate: startOfDay(new Date()),
        otherProperty: "some value",
      },
      {
        meetingDate: startOfDay(addDays(new Date(), 1)),
        otherProperty: "some value",
      },
      {
        meetingDate: startOfDay(addDays(new Date(), 2)),
        otherProperty: "some value",
      },
      {
        meetingDate: startOfDay(addDays(new Date(), 3)),
        otherProperty: "some value",
      },
      {
        meetingDate: startOfDay(addDays(new Date(), 4)),
        otherProperty: "some value",
      },
    ];
    //pass the eventData and the eventKeyName on which your event is present. Here it is meetingDate
    <Calendar eventDataProps={eventData} eventKeyName="meetingDate"/>

Week days type

    import { Calendar } from "callendly";
    <Calendar  weekDaysType={"small"}/>
    //weekDaysType can be two values : "small" or "medium"
    //Default is medium
    //small = [S, M, T, W, T, F, S]
    //medium = [Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday]