React Reminder Calendar

An events calendar component built for React and made for modern browsers.

Installation

npm install --save react-reminder-calendar

Basic Sample

import ReminderCalendar from "react-remindar-calendar/dist"

const data = [
    {
        title: "TODAY, NOV 4",
        items: [
            {
                title: "Dinner with Richard",
                subTitle: "Richards House",
                icon: "fa fa-map-pin",
                startTime: "12:00",
                endTime: "13:00",
                isAllDay: false,
                allDayTitle: "All Day",
                separatorColor: "#26bdc6",
                style: {},
                infoViewComponent: null,
                rightViewComponent: null
            },
            {
                title: "Online meeting",
                subTitle: "Zoom",
                icon: "",
                startTime: "18:00",
                endTime: "19:30",
                isAllDay: false,
                allDayTitle: "All Day",
                separatorColor: "#a326c6",
                style: {},
                infoViewComponent: <div style={{fontSize: 12}}><small><b>Zoom Link</b>  <kbd>https://zoom.us/udyt4RE</kbd></small></div>,
                rightViewComponent: null
            }
        ],
        rightButton: {
            title: "+",
            show: true,
            props: {
                className: "",
                style: {backgroundColor: '#ccc', border: 'none', width: 22, height: 22}
            }
        }
    },
    {
        title: "TOMORROW, NOV 5",
        items: [
            {
                title: "Join the Summit",
                subTitle: "City Center",
                icon: "fa fa-map-pin",
                startTime: "10:00",
                endTime: "13:00",
                isAllDay: true,
                allDayTitle: "All Day",
                separatorColor: "#69c626",
                style: {},
                infoViewComponent: null,
                rightViewComponent: null
            },
            {
                title: "Enroll the online course",
                subTitle: "Udemy",
                icon: "",
                startTime: "18:00",
                endTime: "19:30",
                isAllDay: false,
                allDayTitle: "All Day",
                separatorColor: "#e5245a",
                style: {},
                infoViewComponent: null,
                rightViewComponent: null
            }
        ],
        rightButton: {
            title: "+",
            show: true,
            props: {
                className: "",
                style: {backgroundColor: '#ccc', border: 'none', width: 22, height: 22}
            }
        }
    }
]

class App extends React.Component {

    handleItemClick = (dateSection, item, index) => {
        
    }

    handleRightButtonClick = (dateSection, index) => {
        
    }
    
    render(){
        return(
            <ReminderCalendar
                shadow
                dateSections={data}
                onItemClick={this.handleItemClick}
                onDateSectionRightButtonClick={this.handleRightButtonClick}
            />
        )
    }
}

Props of ReminderCalendar

Name	Type/Default	Description
shadow	false
dateSections	array	A javascript object array, please see Props of DateSection Items
customDateSectionRightButton	Component	If you set this, default right button will be overrided.

Props of DateSection Items

Name	Default	Description
title	string
rightButton	object or Component	title show and props
items	array	Please see Props of Item

Props of Item

Name	Default	Description
title	string
subTitle	string
icon	string
startTime	string
endTime	string
isAllDay	boolean false
allDayTitle	string
separatorColor	string
style	object
infoViewComponent	Component
rightViewComponent	Component

Events

Name	Description
onItemClick	function with returns dateSection item and index
onDateSectionRightButtonClick	function with returns dateSection and index

Styling

• View src/index.css for styling examples.

Contributing

Feel free to make a PR :) They are always welcome