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.

2 9 16 23 3 10 17 24 4 11 18 25 5 12 19 26 6 13 20 27 Setup Web Server Website Design Copywriting Strategy and… Implementation Quality Assurance

Get started with the React Calendar library

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 
  {...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.

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.

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

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

  return (
          type: "widget",
          html: <DemoButton onClick={handleButtonClick} text="Click Me!" />,

Fully customizable and themeable React Calendar component

Choose from elegant and modern themes or modify the Calendar appearance to suit your style.

Easily customize the tooltip and event editor widgets to show any markup.

Trusted by the world’s leading companies

Ready to get started?