Interactive Demo

Try the Tamil Calendar Widget with different settings and see a live preview:

Configuration:

Date:

Width:

Height:

🎮 Live Preview

📝 Code Example

Based on your configuration above, here's how to use the widget:

import { TamilCalendarWidget } from '@kanaksan/tamil-calendar-widget';

function App() {
  return (
    <TamilCalendarWidget
      apiUrl="YOUR_API_URL_HERE"
      date="{{ date }}"
      width={{ width }}{{ height ? `\n      height={${height}}` : '' }}
    />
  );
}

🚀 Getting Started

Step 1: Install the Package

npm install @kanaksan/tamil-calendar-widget

Step 2: Get API Access

📧 Contact: helpdesk@kanaksan.com
🌐 Website: https://kanaksan.com
📋 Request API Access: We'll provide you with a secure API URL

Step 3: Use in Your App

import { TamilCalendarWidget } from "@kanaksan/tamil-calendar-widget";

<TamilCalendarWidget
  apiUrl="https://your-secure-api-url-here"
  date="2025-02-22"
  width={400}
/>;

🎨 Advanced Examples

With Custom Styling

<TamilCalendarWidget
  apiUrl="YOUR_API_URL"
  date="2025-02-22"
  width={400}
  className="my-calendar"
  style={{
    borderRadius: "12px",
    boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
    border: "2px solid #ff6b35",
  }}
/>

With Error Handling

<TamilCalendarWidget
  apiUrl="YOUR_API_URL"
  date="2025-02-22"
  width={400}
  onLoad={() => console.log("Calendar loaded successfully!")}
  onError={(error) => console.error("Failed to load:", error.message)}
/>

Responsive Calendar

<TamilCalendarWidget
  apiUrl="YOUR_API_URL"
  date="2025-02-22"
  width={Math.min(400, window.innerWidth - 40)}
  className="responsive-calendar"
/>

✨ Features Demonstrated

• 🎯 Live Preview: See the actual Tamil calendar image
• 🛡️ Error Handling: Graceful fallbacks when API is unavailable
• 📱 Responsive Design: Works on all screen sizes
• 🎨 Customizable: Easy styling with CSS classes and inline styles

API Security

The demo above uses a proxy function to hide the actual image URL. In production, you'll receive a secure API endpoint that provides authenticated access to calendar data.