React

The complete Calendar solution

Bryntum Calendar is a flexible UI component for React with great user and developer experience. Quickly set up a beautiful, full-featured calendar with day, week, month, year, and agenda views.

View Examples

Download Trial

Get started with the React Calendar library

Quick start

Guide

Widgets

Flexible, powerful, responsive

Built with modern JavaScript ES6+ and Sass, Bryntum React Calendar seamlessly integrates into new and existing React applications and renders beautifully to any device and screen size.

React Calendar component code example

Get a Bryntum React Calendar component up and running in just a few minutes using TypeScript or JavaScript. Here is an App.jsx code example.

import { BryntumCalendar } from "@bryntum/calendar-react";
import { useState } from "react";
import './App.scss';

  const resourcesData =  [
    {
      id: "bryntum",
      name: "Bryntum team",
      eventColor: "blue"
    }
  ];
    
  const eventsData = [
    {
      id: 1,
      startDate: "2024-03-11T14:00:00",
      endDate: "2024-03-18T12:00:00",
      name: "Hackathon",
      allDay: true,
      resourceId: "bryntum",
      eventColor: "green"
   },
   {
    id: 2,
    startDate: "2024-03-11T14:00:00",
    endDate: "2024-03-11T18:00:00",
    name: "Check-In in Hotel",
    resourceId: "hotel"
},
{
    id: 3,
    startDate: "2024-03-11T18:00:00",
    endDate: "2024-03-11T20:00:00",
    name: "Relax and official arrival beer",
    allDay: true,
    resourceId: "michael"
}
  ];
    
  const calendarConfig = {
    date : new Date(2024, 2, 15),
  };
  
function App() {
  const [resources, setResources] = useState(resourcesData);
  const [events, setEvents] = useState(eventsData);
  
  return <BryntumCalendar 
  resources={resources}
  events={events} 
  {...calendarConfig} />;
}


export default App;

The high-performance Calendar component for React

Instantly and reliably load large datasets with numerous resources and tasks. Designed for optimal performance, Bryntum React Calendar is scalable and efficient.

View demo

JSX support for rendering content

Use conditional logic to produce visually rich cell content with the Bryntum React Calendar. Leverage the robust Bryntum renderer or opt to use JSX inline or in custom React components.

View docs

import DemoButton from '../components/DemoButton';

 const handleButtonClick = () => {
    alert("Button clicked!");
  };

  return (
    <BryntumCalendar
      tbar={[
        {
          type: "widget",
          html: <DemoButton onClick={handleButtonClick} text="Click Me!" />,
        },
      ]}
    />
  );