Schedule Styling
Customize your schedule's visual appearance with colors, fonts, backgrounds, and more. All changes preview in real-time.
Overview
Every appearance setting for a schedule lives in one place:
- Open the schedule in the admin panel and click Edit Schedule.
- Choose Style in the section list on the left (or from the accordion on mobile).
- Work through the three sub-tabs, watching the preview beside the form.
- Click Save. Nothing is applied to your public page until you do.
The Style section is split into three sub-tabs:
| Sub-tab | What it holds |
|---|---|
| Branding | Square Profile Image, Accent Color, Font Family |
| Background | Background Type (Gradient, Solid or Image) and the controls for whichever you pick: gradient colors and rotation, a solid color, or a background image |
| Advanced | Header Style, Header Image, Default Layout, Custom CSS |
If you have not created your account and first schedule yet, start with Getting Started. To set the schedule's name, description, links and other non-visual details, see Creating Schedules.
Event Layout
Choose how your events are displayed on your schedule page, under Edit Schedule → Style → Advanced → Default Layout. Two layouts exist:
Calendar
Events laid out on a month grid, one cell per day, loaded one month at a time. Best when the shape of the month matters, such as a venue with something on most nights.
List
Events in date order as full-width cards, loaded well beyond the current month. Best when each event deserves its own space, or when they are spread thinly across the year.
This is only the default. Visitors can switch between the two with the layout toggle in the header, and their choice is remembered in their own browser for that schedule. It never changes what anyone else sees, and it does not change your setting.
Embeds ignore the visitor's saved preference, so the site doing the embedding stays in control. An embed can also override your default with ?layout=calendar or ?layout=list, so one page can carry the same schedule twice in both layouts. See Embed URL Parameters.
Header Style
Choose how the header appears at the top of your public schedule page under Edit Schedule → Style → Advanced → Header Style. Schedules use Banner unless you change it, and the live preview updates as you switch between the two.
Banner
A large header carrying your header image, a prominent logo, the schedule name, description and social links. The most spacious option, and the only one that can show a header image or a logo wall.
Compact
A slim full-width bar at the top of the page with a small logo and the schedule name on one side, and the action cluster on the other: follow, submit and manage buttons, the filter button, and the calendar or list toggle. Your description and social or contact links move to a strip just beneath the bar.
The header image applies to the Banner style only. Compact draws no header image at all, but nothing is lost: the description and social links appear in the strip below the bar. If a schedule was set to the old Minimal style, it now reads as Compact, which is the same slim row under a clearer name.
Profile Image
Upload a logo, photo or avatar that represents your schedule under Edit Schedule → Style → Branding → Square Profile Image. It does three jobs:
Your header
A large logo in the Banner header style, or a small square avatar beside your name in the Compact style.
Your social preview
It becomes the preview image when your schedule page is shared to a chat app or social network. Without it, the generic Event Schedule image is used instead.
Talent and venue logo walls
It is the logo other schedules show for you in their logo wall header. A connected schedule with no profile image is skipped there.
Use a square image (1:1 aspect ratio). Recommended minimum size is 400x400 pixels. PNG and JPG are accepted, and uploads must be under 2.5 MB. Use the small red cross on the thumbnail to remove an image you have already saved.
It becomes your favicon too Pro - Requires the Pro plan
On Pro, your profile image also becomes the icon in the browser tab on your public pages, including ticket pages, and the home-screen icon when a visitor saves your schedule to their phone. Nothing to configure: upload a profile image and the Event Schedule icon is replaced by yours. This is the same reason a square image matters, since a tab icon is cropped to a square either way.
Header Images
The Header Image dropdown on the Advanced tab creates the visual banner at the top of your schedule page. It offers four kinds of option, in this order:
None
The default. A cleaner look with no header image, so your profile image and name take centre stage.
Venue logo wall (or Talent logo wall)
A grid of logos instead of a picture. On a talent or curator schedule the option is called Venue logo wall and shows the venues hosting your approved events; on a venue schedule it is called Talent logo wall and shows the talent performing at them. Each logo links to that schedule's page, and you can drag the list under the dropdown to set the order. Only connected schedules that have a profile image appear, so the wall stays empty until at least one does, and the edit page warns you when that is the case.
Custom
Upload your own header. Use a wide image, around 1200x400 pixels or a similar aspect ratio. PNG or JPG, under 2.5 MB.
31 preset headers
Ready-made headers listed alphabetically, including 5am Club, Arena, Fitness Morning, Music Potential, Networking and Bagels, Ready to Dance, The Stage Awaits and Yoga and Wellness. Use the arrows beside the dropdown to flick through them with the preview open.
Header images and the logo wall are drawn by the Banner header style only. Choosing one while the schedule is set to Compact has no visible effect.
Background Options
The Background tab starts with a Background Type choice of Gradient, Solid or Image. Picking one reveals its own controls and hides the others.
Gradient
Pick a preset from the searchable Colors dropdown, or choose Custom at the top of it to mix your own.
Preset gradients
Over 380 named gradients from uiGradients, listed alphabetically: Cosmic Fusion, Emerald Water, Netflix, Omolon, Purple Dream, Sunset and many more. The arrows beside the dropdown step through them so you can watch the preview change.
Custom two-color gradient
Choosing Custom reveals two color pickers and a swatch of the result, so you can match your brand colors exactly.
Rotation
A slider from 0 to 360 degrees sets the gradient angle, so you can make it vertical, horizontal, diagonal or anything between. It applies to preset and custom gradients alike.
Solid
A single Background Color picker. Use your operating system's color picker or type a six-digit hex code such as #1a1a2e.
Image
37 preset backgrounds
Ready-made backgrounds listed alphabetically, including Abstract Sunrise, Bookshelf, Desert Retreat, Flower Field, Greyscale, River of Dreams and Stormy Night. Selecting one shows a thumbnail below the dropdown.
Custom upload
Choose Custom at the top of the dropdown to upload your own. PNG or JPG, under 2.5 MB. Dark, low-contrast images work best, because your event cards and text sit on top of them.
Color Scheme
One Accent Color picker on the Branding tab drives every highlighted element on your public pages. New schedules start on a standard blue.
Where it appears
Buttons and calls to action, the follow and submit controls, the calendar and list layout toggles, the filter button, and highlights on your event pages.
Text on top of it is calculated
Event Schedule measures the brightness of your accent color and puts black text on light accents and white text on dark ones, so a button label stays readable whatever you choose. There is nothing to set.
The automatic black-or-white text keeps buttons legible, but it cannot rescue an accent that disappears into your background. Check the preview with your chosen background, and pick a saturated color that clearly separates from it.
Typography
The Font Family dropdown on the Branding tab offers more than 230 Google Fonts. It sets the typeface for your schedule name and headings on your public pages.
Finding a font
The dropdown is searchable, so you can type a name you already know. The arrows beside it step to the previous or next font alphabetically, which is the quickest way to browse.
Live sample
Your schedule's own name is rendered in the chosen font directly under the dropdown, and the preview panel updates too, so you can judge readability on your real text before saving.
This setting styles web pages. Event graphics are drawn as images on the server with a bundled Noto Sans family (including Hebrew and Arabic variants), so changing your font here will not change them.
AI Style Generator Enterprise - Requires the Enterprise plan
Enterprise - Requires the Enterprise plan AI style generation needs the Enterprise plan. A selfhosted install counts as Enterprise, so nothing here is held back by plan there, but it does need its own AI keys (see below).
Let AI put together a coherent look for your schedule from its name, type and description, so the color, font and images belong to each other rather than being chosen one at a time.
- Click AI Generator in the top-right corner of the Style section header.
- Tick which of the five elements to generate: profile image, header image, background image, accent color, or font. The dialog marks the ones you have already set, so you can leave them alone.
- Optionally add style instructions, for example "modern and minimal with blue tones". Tick the box to save them for next time.
- Generate, then review the previews in the dialog. Accept drops the results into the Style form, Discard throws them away, and nothing reaches your public page until you click Save on the form itself.
Color and font come first
The accent color and font are generated in one step, then the images are generated with that color passed in, so they share a palette. If you leave the profile image out of the selection, the existing one is described to the model instead, so a new header still matches it.
Daily limits
On the hosted platform, AI text and AI image generation each have a daily allowance per schedule, shared with the other AI features. A selfhosted install has no such limit. AI generation is disabled in demo mode.
Selfhosted installs supply their own keys. The accent color and font need a Gemini API key. Image generation uses an OpenAI API key when one is set and falls back to Gemini when it is not, so a Gemini key alone is enough to use every part of the generator. The button does not appear at all until at least one key is configured.
Remove Branding Pro - Requires the Pro plan
Free schedules on the hosted platform carry a dark "Powered by Event Schedule" strip at the foot of their public pages. There is no switch for it: it is removed automatically the moment the schedule is on Pro or Enterprise, and it returns if the plan lapses.
What a paid plan removes
Five surfaces at once: the footer strip, the "create your own" card on your event pages, the credit line printed under your embed snippets, the same line inside a ticket or RSVP embed, and the footer of your newsletter emails. Ads, where a platform runs them on free schedules, follow the same tier. Embeds of your calendar never carry any of it, on any plan.
White-label your schedule
With those gone, a hosted schedule reads entirely as your own to visitors. Pair it with a custom domain on Enterprise and nothing on the page points back at Event Schedule.
A single-tenant selfhosted install has no plan tiers at all, so the strip, the event-page card, the embed and newsletter lines and ads are all absent by default, with nothing to buy. If instead you run your own multi-tenant platform on Event Schedule, those surfaces follow each tenant's tier exactly as they do on eventschedule.com, because the strip is the growth prompt of whoever runs the platform.
One small "Event Schedule" credit stays in the corner of public pages on every install that is not eventschedule.com itself. It is the attribution the Attribution Assurance License asks for in return for the application, so there is no setting that removes it. On a single-tenant selfhost it is on every page. On a platform of your own it is on every schedule you charge for, and a free schedule there carries the operator's footer strip in its place, because a page never shows both credits at once.
Custom CSS Pro - Requires the Pro plan
Pro - Requires the Pro plan The Custom CSS box is editable on Pro and Enterprise, and on selfhosted installs, which count as Enterprise. Below Pro the box is shown read-only: CSS you saved earlier is kept, not deleted, and becomes editable again when you upgrade.
When the built-in controls do not reach far enough, write your own CSS under Edit Schedule → Style → Advanced → Custom CSS. It is added to the stylesheet of your public pages, which means your schedule page, your event pages and embeds of them.
- Override any of the built-in styles for complete control
- Fine-tune spacing, borders, radii and shadows
- Add your own animations and effects
- Up to 10,000 characters per schedule
Saved CSS is cleaned before it is stored, so a few constructs are silently removed rather than rejected with an error. Do not rely on @import, @font-face, @charset, expression(), javascript: URLs, behavior or binding, or any url() pointing at an http:, https: or data: address. Everything else, including modern layout and animation properties, is kept as written. If a rule seems to vanish after saving, check it against that list first.
Live Preview
A Preview panel sits beside the Style form on wide screens and below it on narrow ones. It stays visible across all three sub-tabs and redraws as you change the header style, images, background, accent color and font, so you can experiment freely without publishing anything half-finished.
The preview is only a preview. Click Save at the bottom of the edit page to apply your changes, then open your schedule page in a new tab to see the real thing, including any custom CSS, which the preview panel does not render.
See Also
- Creating Schedules - Configure details, settings, sub-schedules, and integrations
- Managing Schedules - Plans, team members, and booking requests
- Event Graphics - Generate shareable images for social media
- Sharing Your Schedule - Embed and share your schedule
- Creating Events - Add events to see your styling in action