Edit these docs Rate these docs

React Bootstrap Full Calendar

React Full Calendar - Bootstrap 4 & Material Design

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: 'Frankfurt delegation',
              startDate: addHours(addDays(today, 0), 8),
              endDate: addHours(addDays(today, 2), 20),
              color: 'danger'
            },
            {
              id: 'task2',
              title: 'Front end conference',
              startDate: addWeeks(today, 1),
              endDate: addDays(addWeeks(today, 1), 2),
              color: 'success'
            },
            {
              id: 'task3',
              title: 'Feedback',
              startDate: addHours(addDays(startOfWeek(addWeeks(today, 0)), 3), 10),
              endDate: addHours(addDays(startOfWeek(addWeeks(today, 0)), 3), 14),
              color: 'primary'
            },
            {
              id: 'task4',
              title: 'Daily coding challenge',
              startDate: addDays(startOfWeek(addWeeks(today, 0)), 1),
              endDate: addDays(startOfWeek(addWeeks(today, 0)), 8),
              color: 'warning'
            },
            {
              id: 'task5',
              title: 'Meeting',
              startDate: addHours(addDays(startOfWeek(addWeeks(today, 1)), 1), 10),
              endDate: addHours(addDays(startOfWeek(addWeeks(today, 1)), 1), 14),
              color: 'info'
            },
            {
              id: 'task6',
              title: 'Vocation',
              startDate: addDays(startOfWeek(addWeeks(today, 2)), 1),
              endDate: addDays(startOfWeek(addWeeks(today, 2)), 6),
              color: 'secondary'
            }
          ]
        }

        render() {
          return (
            <MDBFullCalendar tasks={this.state.tasks} />
          )
        }
      }


      export default App;

    

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs

React Bootstrap 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">

API Reference: FullCalendar Methods

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