ankitkr8540/leetcode-calendar

NPM package for showing the calendar by passing the username

LeetCode Calendar

LeetCode Calendar: Showcase Your LeetCode Consistency with LeetCode Calendar.

Ever tried explaining your coding skills on a resume or portfolio, but felt like it lacked punch?
The LeetCode Calendar is here to be your coding trophy wall! This nifty npm package lets you display a sleek calendar showcasing your LeetCode journey. No more scrambling to explain those green squares - impress potential employers (or just your coding buddies) with a visual representation of your dedication and problem-solving consistency. It's like a Fitbit for your coding brain - track your progress, showcase your skills, and maybe even inspire some friendly competition!
Report a Bug or request a feature

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.