Docs / Examples / How to Generate Calendar Event Images | HTML to Image Docs

How to Generate Calendar Event Images

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

Want it faster? Use the Event Ticket template and skip the markup. Send title, date, location and attendees as JSON.

HTML Content

<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

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

POST https://app.html2img.com/api/html
{
    "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}"
}

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

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

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: 800, height: 400 }),
});
const { url } = await response.json();

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': 800, 'height': 400},
)
url = response.json()['url']

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' => 800, '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-left: -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