LeetCode Calendar

Installation

Install this extension from the npm registry.

Go to your project folder and do

npm install leetcode-calendar

Using LeetCode Calendar

1. Import leetCode calendar in your project

import LeetCodeCalendar from 'leetcode-calendar';

2. Use the LeetCodeCalendar, for example:

export default function Example() {
  const exampleTheme = {
    light: [
      'rgb(235, 235, 235)',
      'rgba(192, 132, 245, 0.44)',
      'rgba(192, 132, 245, 0.6)',
      'rgba(192, 132, 245, 0.76)',
      'rgba(192, 132, 245, 0.92)',
    ],
    dark: [
      'rgb(235, 235, 235)',
      'rgba(192, 132, 245, 0.44)',
      'rgba(192, 132, 245, 0.6)',
      'rgba(192, 132, 245, 0.76)',
      'rgba(192, 132, 245, 0.92)',
    ],
  }

  return (
    <div>
      <LeetCodeCalendar
        username='your_leetcode_username' // Replace with your LeetCode username
        blockSize={15} // Optional: Size of each block in pixels (default: 15)
        blockMargin={5} // Optional: Margin between blocks in pixels (default: 5)
        fontSize={16} // Optional: Font size of the text within blocks (default: 16)
        theme={exampleTheme} // Optional: A custom theme object to style the calendar
        style={{ maxWidth: '1100px' }} // Optional: Inline styles for the calendar container
      />
    </div>
  )
}

3. Customization

• username: Replace "your_leetcode_username" with your actual LeetCode username.
• blockSize: This defines the size of each block on the calendar in pixels.
• blockMargin: This sets the margin between blocks on the calendar.
• fontSize: Adjust the font size of the text displayed within each block.
• theme: For advanced customization, you can provide a custom theme object to style the calendar.
• style: Apply inline styles directly to the calendar container.

Credits

The leetCode calendar was designed by Ankit Kumar, Lingyun Dai, and Antara Tewary.

The logo was designed in Free Logo Design.

Thank you

Thanks to all the contributors to this project.