AIMRAN
Design review16:30–17:15 · Estudio
HTML + CSSToasts

Calendar event toast

Confirms a new appointment with a date tile, a time slot and a colored bar that grows along the side.

Settings

16px
1x

Code

<div class="uv-zcal"><button class="fire">Create event</button><div class="toast"><time><b>25</b>SEP</time><span><b>Design review</b><small>16:30–17:15 · Estudio</small></span><i></i></div></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Toasts

Animated toast notification

ToastsReact + Motion

Elastic success toast

ToastsHTML + CSS

Undo toast with timer

ToastsHTML + CSS

Upload progress toast

ToastsHTML + CSS

Shake error toast

ToastsHTML + CSS

Incoming message toast

ToastsHTML + CSS

Stacked toasts

ToastsHTML + CSS

Island pill toast

ToastsHTML + CSS

Where to use it

Made for the moment a date gets locked in. When a client books a haircut on a salon's website, or a patient picks a slot with the dentist, the calendar toast shows the day, the time range and the place in one glance. It works as a small receipt that the booking went through.

Always include the time and the place; the date tile alone is not much use. Add an “Add to calendar” link if people will need it later. And keep the side bar in your brand color so it reads as yours.