---
title: "How to Generate Calendar Event Images"
description: "Generate calendar event images from raw HTML. Multi-language code and the event-ticket template alternative."
url: "https://html2img.com/docs/examples/calendar-event/"
---

# How to Generate Calendar Event Images

Render a calendar event card as a PNG. Useful for event promotions, social posts and email invitations.

> **Note**
>
> Want it faster? Use the [Event Ticket template](https://html2img.com/templates/event-ticket/) and skip the markup. Send title, date, location and attendees as JSON.

## HTML Content

```html
<div class="event-card">
    <div class="date-badge">
        <div class="month">JAN</div>
        <div class="day">15</div>
        <div class="year">2025</div>
    </div>
    <div class="event-content">
        <div class="event-type">CONFERENCE</div>
        <h1 class="event-title">Web Development Summit 2025</h1>
        <div class="event-details">
            <div class="detail">
                <svg class="icon" viewBox="0 0 24 24" width="16" height="16">
                    <path fill="currentColor" d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" />
                </svg>
                <span>Tech Convention Center, San Francisco</span>
            </div>
            <div class="detail">
                <svg class="icon" viewBox="0 0 24 24" width="16" height="16">
                    <path fill="currentColor" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
                </svg>
                <span>9:00 AM - 6:00 PM PST</span>
            </div>
        </div>
        <div class="event-description">
            Join industry leaders and innovators for a day of inspiring talks, 
            workshops, and networking opportunities. Early bird tickets available now!
        </div>
        <div class="event-footer">
            <div class="attendees">
                <img src="https://i.pravatar.cc/32?u=1" alt="Attendee 1" class="attendee">
                <img src="https://i.pravatar.cc/32?u=2" alt="Attendee 2" class="attendee">
                <img src="https://i.pravatar.cc/32?u=3" alt="Attendee 3" class="attendee">
                <div class="more-attendees">+42</div>
            </div>
            <div class="price">$299</div>
        </div>
    </div>
</div>
```

## CSS Styles

```css
body {
    margin: 0;
    padding: 24px;
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.event-card {
    width: 600px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    display: flex;
    overflow: hidden;
}

.date-badge {
    width: 120px;
    background: #3b82f6;
    color: white;
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.month {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
}

.day {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    margin: 8px 0;
}

.year {
    font-size: 16px;
    opacity: 0.9;
}

.event-content {
    flex: 1;
    padding: 24px;
}

.event-type {
    font-size: 12px;
    font-weight: 600;
    color: #3b82f6;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.event-title {
    margin: 0 0 16px;
    font-size: 24px;
    color: #1e293b;
    line-height: 1.3;
}

.event-details {
    margin-bottom: 16px;
}

.detail {
    display: flex;
    align-items: center;
    color: #64748b;
    font-size: 14px;
    margin-bottom: 8px;
}

.icon {
    margin-right: 8px;
    flex-shrink: 0;
}

.event-description {
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.attendees {
    display: flex;
    align-items: center;
}

.attendee {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
    margin-right: -8px;
}

.more-attendees {
    background: #f1f5f9;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}

.price {
    font-size: 24px;
    font-weight: 700;
    color: #3b82f6;
}
```

## API Request

```bash
POST https://app.html2img.com/api/html
```

```json
{
    "html": "<div class=\"event-card\"><div class=\"date-badge\"><div class=\"month\">JAN</div><div class=\"day\">15</div><div class=\"year\">2025</div></div><div class=\"event-content\"><div class=\"event-type\">CONFERENCE</div><h1 class=\"event-title\">Web Development Summit 2025</h1><div class=\"event-details\"><div class=\"detail\"><svg class=\"icon\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path fill=\"currentColor\" d=\"M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z\" /></svg><span>Tech Convention Center, San Francisco</span></div><div class=\"detail\"><svg class=\"icon\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path fill=\"currentColor\" d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\" /></svg><span>9:00 AM - 6:00 PM PST</span></div></div><div class=\"event-description\">Join industry leaders and innovators for a day of inspiring talks, workshops, and networking opportunities. Early bird tickets available now!</div><div class=\"event-footer\"><div class=\"attendees\"><img src=\"https://i.pravatar.cc/32?u=1\" alt=\"Attendee 1\" class=\"attendee\"><img src=\"https://i.pravatar.cc/32?u=2\" alt=\"Attendee 2\" class=\"attendee\"><img src=\"https://i.pravatar.cc/32?u=3\" alt=\"Attendee 3\" class=\"attendee\"><div class=\"more-attendees\">+42</div></div><div class=\"price\">$299</div></div></div></div>",
    "width": 648,
    "height": 400,
    "css": "body{margin:0;padding:24px;background:white;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif}.event-card{width:600px;background:white;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,0.08);display:flex;overflow:hidden}.date-badge{width:120px;background:#3b82f6;color:white;padding:24px;text-align:center;display:flex;flex-direction:column;justify-content:center}.month{font-size:20px;font-weight:600;text-transform:uppercase}.day{font-size:36px;font-weight:700;line-height:1;margin:8px 0}.year{font-size:16px;opacity:0.9}.event-content{flex:1;padding:24px}.event-type{font-size:12px;font-weight:600;color:#3b82f6;letter-spacing:1px;margin-bottom:8px}.event-title{margin:0 0 16px;font-size:24px;color:#1e293b;line-height:1.3}.event-details{margin-bottom:16px}.detail{display:flex;align-items:center;color:#64748b;font-size:14px;margin-bottom:8px}.icon{margin-right:8px;flex-shrink:0}.event-description{color:#475569;font-size:14px;line-height:1.6;margin-bottom:24px}.event-footer{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid #e2e8f0}.attendees{display:flex;align-items:center}.attendee{width:32px;height:32px;border-radius:50%;border:2px solid white;margin-right:-8px}.more-attendees{background:#f1f5f9;color:#64748b;font-size:12px;font-weight:600;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:4px}.price{font-size:24px;font-weight:700;color:#3b82f6}"
}
```

> **Note**
>
> Update the event details, date, and attendee images to match your event information.

## How it Works

1. Modern card design with date badge sidebar
2. SVG icons for location and time details
3. Attendee avatars with overlap effect
4. Responsive layout using flexbox

> **Warning**
>
> External avatar images must be publicly accessible. Cache them on a CDN you control to avoid 404s during render.

## Code in other languages

### Node.js

```javascript
const response = await fetch('https://app.html2img.com/api/html', {
  method: 'POST',
  headers: { 'X-API-Key': process.env.HTML2IMG_API_KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({ html: eventHtml, css: eventCss, width: 648, height: 400 }),
});
const { url } = await response.json();
```

### Python

```python
import os, requests
response = requests.post(
    'https://app.html2img.com/api/html',
    headers={'X-API-Key': os.environ['HTML2IMG_API_KEY']},
    json={'html': event_html, 'css': event_css, 'width': 648, 'height': 400},
)
url = response.json()['url']
```

### PHP

```php
$ch = curl_init('https://app.html2img.com/api/html');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true, CURLOPT_POST => true,
    CURLOPT_HTTPHEADER => ['X-API-Key: ' . getenv('HTML2IMG_API_KEY'), 'Content-Type: application/json'],
    CURLOPT_POSTFIELDS => json_encode(['html' => $eventHtml, 'css' => $eventCss, 'width' => 648, 'height' => 400]),
]);
$url = json_decode(curl_exec($ch), true)['url'];
```

## Common pitfalls

- **Time zone confusion.** Display the time zone explicitly (`14:00 BST`) so attendees in other regions know when to arrive.
- **Avatar overlap looks broken.** Use `margin-right: -8px` on stacked avatars and add a white border to separate them visually.
- **Date badge alignment shifts at retina.** Pin date badge with `display: grid; place-items: center` rather than absolute positioning.

## See also

- [JavaScript integration guide](https://html2img.com/integrations/javascript/), [Python integration guide](https://html2img.com/integrations/python/)
- [html parameter](https://html2img.com/docs/parameters/html/), [dimensions parameter](https://html2img.com/docs/parameters/dimensions/)

<script type="application/ld+json" set:html={JSON.stringify({
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Generate Calendar Event Images",
  "step": [
    { "@type": "HowToStep", "name": "Build the event markup", "text": "Compose the event card with title, date badge, location, time and attendees." },
    { "@type": "HowToStep", "name": "POST to the API", "text": "Send HTML and CSS to the HTML to Image HTML endpoint." },
    { "@type": "HowToStep", "name": "Use the URL", "text": "Embed the i.html2img.com URL in your invitation email or social post." }
  ]
})}></script>