Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@types/react-big-calendar

Package Overview
Dependencies
Maintainers
0
Versions
96
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@types/react-big-calendar

TypeScript definitions for react-big-calendar

  • 1.16.0
  • ts4.9
  • ts5.0
  • ts5.1
  • ts5.2
  • ts5.3
  • ts5.4
  • ts5.5
  • ts5.6
  • ts5.7
  • ts5.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
207K
increased by11.65%
Maintainers
0
Weekly downloads
 
Created

What is @types/react-big-calendar?

@types/react-big-calendar provides TypeScript definitions for the react-big-calendar package, which is a powerful and flexible calendar component for React applications. It allows developers to create and manage events in a calendar view, supporting various views like month, week, day, and agenda.

What are @types/react-big-calendar's main functionalities?

Basic Calendar Setup

This code sets up a basic calendar using react-big-calendar with moment.js as the date localizer. It initializes the calendar with no events and sets the height to 500 pixels.

import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';

const localizer = momentLocalizer(moment);

const MyCalendar = () => (
  <Calendar
    localizer={localizer}
    events={[]}
    startAccessor="start"
    endAccessor="end"
    style={{ height: 500 }}
  />
);

Adding Events

This code demonstrates how to add events to the calendar. The events array contains objects with title, start, and end properties, which are then passed to the Calendar component.

const events = [
  {
    title: 'Meeting',
    start: new Date(2023, 9, 20, 10, 0),
    end: new Date(2023, 9, 20, 12, 0)
  },
  {
    title: 'Lunch',
    start: new Date(2023, 9, 21, 12, 0),
    end: new Date(2023, 9, 21, 13, 0)
  }
];

const MyCalendar = () => (
  <Calendar
    localizer={localizer}
    events={events}
    startAccessor="start"
    endAccessor="end"
    style={{ height: 500 }}
  />
);

Customizing Event Appearance

This code shows how to customize the appearance of events in the calendar. The eventStyleGetter function returns a style object based on the event's title, which is then applied to the events in the calendar.

const eventStyleGetter = (event, start, end, isSelected) => {
  let backgroundColor = event.title === 'Meeting' ? 'blue' : 'green';
  let style = {
    backgroundColor: backgroundColor,
    borderRadius: '0px',
    opacity: 0.8,
    color: 'white',
    border: '0px',
    display: 'block'
  };
  return {
    style: style
  };
};

const MyCalendar = () => (
  <Calendar
    localizer={localizer}
    events={events}
    startAccessor="start"
    endAccessor="end"
    style={{ height: 500 }}
    eventPropGetter={eventStyleGetter}
  />
);

Other packages similar to @types/react-big-calendar

FAQs

Package last updated on 22 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc