React Bootstrap Full Calendar

React Full Calendar - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React Bootstrap full calendar plugin is an extension that allows you to create calendar functionality.

Thanks to this plugin you will be able to easily create new events, manage current events, move existing events between other days, and integrate with your Google Calendar.

To see the list of all properties and methods of the plugin see "API" tab on this page.

Basic Example

A few predefined events allowing you to see how the plugin looks like.

        
            
          import React, { Component } from 'react';
          import MDBFullCalendar from 'mdb-react-calendar';
          import { addHours, addDays, addWeeks, startOfWeek } from 'date-fns';

          const today = new Date();

          class App extends Component {
            state = {
              tasks: [
                {
                  id: 'task1',
                  title: 'Today',
                  startDate: new Date().setHours(0, 0, 0),
                  endDate: new Date().setHours(23, 59, 59),
                  color: 'danger',
                  dark: true,
                  link: true,
                  to: 'test',
                },
                {
                  id: 'task2',
                  title: 'Today',
                  startDate: new Date().setDate(2),
                  endDate: new Date().setDate(15),
                  color: 'info',
                  link: true,
                  to: 'test1',
                },
                {
                  id: 'task3',
                  title: 'Task name',
                  startDate: new Date().setDate(2),
                  endDate: new Date().setDate(15),
                  color: 'warning',
                  dark: true,
                  link: true,
                  to: 'test2',
                },
              ],
            };
          
            render() {
              const arrOfObjects = [
                { color: 'elegant-color', title: 'Test', dark: true },
                { color: 'danger-color', title: 'Test1', dark: false },
                { color: 'warning-color', title: 'Meeting', dark: false },
                { color: 'success-color', title: 'Home', dark: false },
                { color: 'info-color', title: 'Lunch', dark: false },
                { color: 'default-color', title: 'Something', dark: false },
                { color: 'primary-color', title: 'Pool', dark: false },
                { color: 'secondary-color', title: 'Footbal', dark: true },
              ];
          
              return <MDBFullCalendar colors={arrOfObjects} tasks={this.state.tasks} btnSizes='sm' />;
            }
          }


          export default App;

React Full Calendar - API

In this section you will find advanced information about the Full Calendar plugin. You will find out which modules are required, what are the possibilities of configuring the plugin, and what events and methods you can use to work with it.

Download

This plugin requires a purchase.

Buy React Calendar Plugin

Imports 

        
            
          import React from 'react'; 
          import MDBFullCalendar from 'mdb-react-calendar';
        
        
    
        
            
          "mdbreact": "^4.15.0", 
          "react-router-dom": "^5.0.1"

Usage

To start using Full Calendar, just simply render the component. You can use the plugin as controlled component: attach your tasks data from state and update it with onChange method.

Plugin uses date-fns package for DateTime formating. 

        
            
          tasks: [ { id: String, title: String, startDate: instanceOf(Date),
          endDate: instanceOf(Date), color: String ('info' | 'success' | 'warning' |
          'danger' | 'primary' | 'secondary') }, ... ]

API Reference: FullCalendar Properties

The table below shows the configuration options of the FullCalendar component.

Name Type Default Description Example
addTaskTitle String Add task Default label for Add task button in task dialog. <FullCalendar addTaskTitle="OK" />
alertModalMsg String Task's endDate must be after startDate! Message displayed when the user set wrong end date. <FullCalendar alertModalMsg="You can do better!" />
confirmDeleteMsg String Are you sure you want to delete this task? Message displayed when the user wants to delete task. <FullCalendar confirmDeleteMsg="Shall I do it?" />
controlLabels Array(String) ['Today', 'Month', 'Week', 'List'] Labels of control buttons. <FullCalendar controlLabels={['Dziś', 'Miesiąc', 'Tydzień', 'Lista']} />
editTaskTitle String Edit task Title of edit task modal. <FullCalendar editTaskTitle="Make some edition" />
listFormat String hh:mma DateTime format of the list view; plugin uses date-fns <FullCalendar listFormat="HH:mm" />
locale Object enLocale date-fns locale for DateTime formats (day & month names). import enLocale from 'date-fns/locale/en'; <FullCalendar locale={enLocale} />
modalControlLabels Array(String) ['Delete', 'Close', 'Add'] Labels of modal control buttons. <FullCalendar modalControlLabels={['Remove', 'Back', 'Do it!']} />
modalFormLabels Array(String) ['Title', 'Start', 'End', 'Color'] Labels of modal form inputs. <FullCalendar modalFormLabels={['Title', 'Start', 'End', 'Color']} />
startDate instanceOf(Date) new Date() Sets the start/today global date of the calendar. <FullCalendar startDate={new Date()} />
tasks Array(Object) [] List of tasks stored in an object structure; see Usage section <FullCalendar tasks={this.state.tasks} />
weekFormat String ha DateTime format of the week view; plugin uses date-fns <FullCalendar weekFormat="HH:mm" />
disableEvents boolean false Set to true to make calendar read-only. <FullCalendar disableEvents />
btnSizes string '' Set sizes to switch buttons. <FullCalendar btnSizes="sm" />
btnSizesClassName string '' Set className to switch buttons. <FullCalendar btnSizesClassName="yourClass" />
btnSizesColorsMonthWeekList array '' Set colors to switch month/week buttons. <FullCalendar btnSizesColorsMonthWeekList={['danger','warning', 'primary']} />
btnSizesColorsToday array '' Set colors to switch today buttons. <FullCalendar btnSizesColorsToday={['danger','warning', 'primary']} />

API Reference: FullCalendar Methods

Name Parameters Description Example
onChange Returns updated list of tasks. <FullCalendar onChange={this.handleTasksUpdate} >