Calendar Dashboard - Vela

Responsive Calendar Dashboard HTML Template

A responsive dark-and-light calendar dashboard with 2026 month navigation, searchable May events, event details, notifications, dialogs, and a daily agenda.

Vela is a one-page front-end calendar dashboard built with HTML, CSS, and vanilla JavaScript. Its glass-style interface combines a generated 6×7 month grid, event-day selection, local event search, an event-details panel, a scheduled agenda, theme switching, notifications, settings, and profile controls.

The displayed scheduling theme is a customizable example. Replace the branding, copy, event data, colors, and sections to adapt Vela for other industries, products, client projects, or internal tools.

Key Features

• Dark and light themes with the selected theme stored in `localStorage`
• Previous/next navigation across January–December 2026
• May 2026 sample events with labels, types, times, notes, and member initials
• Event-day selection and synchronized event-detail content
• Local event-label search with match highlighting
• Notification dropdown plus settings and profile dialogs
• Selected-day agenda with sample times, durations, participants, and meeting link
• Responsive layout with stacked agenda, compact weekday labels, and event dots at narrower widths
• CSS-variable theme controls, inline SVG icons, and subtle interface animation

Best For / Use Cases

• Scheduling and calendar concepts
• Booking or appointment interface prototypes
• Team agenda and productivity dashboards
• Admin or SaaS dashboard front ends
• Event-planning and project-schedule presentations

What Is Included

One runnable dashboard page and its local source/documentation files:

- `index.html`

- `assets/css/styles.css`

- `assets/js/script.js`

- `README.md`

- `LICENSE.txt`

Technical Details

• HTML5, CSS3, and vanilla JavaScript
• No framework, package installation, build step, or chart library
• Opens directly from `index.html`; the local CSS and JavaScript references were validated
• Responsive breakpoints at 1260px, 980px, and 620px
• Calendar generation is limited to 2026; bundled event records are provided for May

Customization

Edit visible branding, labels, agenda cards, notifications, and profile content in `index.html`. Update `mayEvents` in `assets/js/script.js` for the sample event records. Adjust the theme tokens and light-theme overrides in `assets/css/styles.css`. The displayed calendar niche can be reworked for other industries and project types.

Important Notes / Limitations

• Static front-end demonstration; no backend, authentication, calendar sync, scheduling service, or persistent application data
• Only May includes bundled event records; other 2026 months render date cells without events
• Save controls, reminder switches, week-start choice, note input, and profile edits are demo interactions and do not persist application data
• Sidebar links, logout, month/year labels, agenda controls, meeting link, time/member controls, and notification items are placeholders
• Replace all sample names, dates, events, links, and profile details before use in a finished project

Third-Party Assets / Internet Requirements

Inter is requested from Google Fonts and requires internet access to render as designed. If unavailable, the stylesheet falls back to Arial and the browser sans-serif font. Icons and visual elements use inline SVG and CSS; no image or chart library is required.

License Summary

The template license generally covers customization for one end product for the licensee or one client and restricts redistribution of the template source. This is only a summary: `LICENSE.txt` is the controlling license and should be reviewed in full.

Publisher & Developer

Tech & ALL  

https://www.techandall.com