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