Availability calendar, Pattern Paste Canonical: https://patternpaste.com/pattern/availability-calendar.html Core Patterns (https://patternpaste.com/patterns/) Timeline (https://patternpaste.com/patterns/timeline/) Free Standard # Availability calendar The next six months at a glance, as a wall planner of month tiles: each tile gives the year, the month at display size and a status with a small square mark. An open month carries a heavy top rule and a filled mark, a nearly full one a heavy rule and names the days left, and a booked month is struck through with an empty mark. A short line on how dates are held and one underlined link sit beside the heading. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The six months: the year, the month and its status. - Each tile's line: the free days, or what the month is booked for. - The holding line and the link (it points at /contact/). The signature moment ## The diary reads at a glance, open months ruled heavy and booked months struck through The status is drawn, not only written. Every tile gives the year, the month at display size and a status beside a small square mark: an open month has a heavy top rule and a filled square, a nearly full month a heavy rule and names the days left, and a booked month keeps a hairline, an empty square and its name struck through. A line on how dates are held and one underlined link sit beside the heading. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Link. ### Set by this pattern - The grid. - The month names. - The struck month Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview The next six months at a glance, for anyone who sells their time by the day: a wall planner of month tiles, each saying at once whether the month is open, nearly full or gone. It sits in the timeline section beside timeline-ahead (one entry inverted as "you are here") and timeline-strip (a history read in one sweep), and it looks forward where they look back. ### The signature moment: the diary reads at a glance, open months ruled heavy and booked months struck through The status is drawn, not only written. Every tile gives the year, the month at display size and a status beside a small square mark: an open month has a heavy top rule and a filled square, a nearly full month a heavy rule and names the days left, and a booked month keeps a hairline, an empty square and its name struck through. A line on how dates are held and one underlined link sit beside the heading. Make it yoursVariations and the edits to make first ### What to change first - The six months: the year, the month and its status. Move the heavy top rule and the filled square to the months you still have. - Each tile's line: the free days, or what the month is booked for. - The holding line and the link (it points at /contact/). Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. The base states no font family. - Palette. Your base ground and contrast text. The tile hairlines and the empty squares try role-rule, the heavy rules and filled squares are contrast, the label tries role-label; all fall back to base and contrast. - Link. An underlined text link in the text colour, padded to a 44px target. ### What it decides for itself - The grid. 19rem minimum columns and six tiles: three across from about 1000px, two on a tablet, one on a phone, so every row is full at every width. Keep the count at six, or at a multiple of six, if you edit it. - The month names. Off the ladder: a bare clamp() from 2rem to 2.625rem, since the months are what the eye scans. The heading is on the ladder at x-large. - The struck month is a paragraph with a line-through, so the month stays readable and the strike is the status. Technical notesBlock mechanics, responsive behaviour and constraints ### The Folio look Part of the Folio Pattern Set, a freelance photographer and designer's whole site in one design language: a bone ground #efe9df, graphite #5b5f66 hairlines and secondary copy, darkroom #141517 ink; the open month is a paper tile #f8f5ef under a safelight #c8432b rule with a safelight square, nearly full months carry a darkroom rule and square, and booked months are struck through in graphite. Months and the heading are Helvetica Neue at 500 (Helvetica, Arial, sans-serif); years and statuses are monospace (ui-monospace, SFMono-Regular, Menlo, Consolas, monospace), uppercase and tracked, like a contact sheet's frame numbers. Corners are square; the link is underlined darkroom. Safelight is used only for rules and marks, never for small text. Take the base for your theme's colours, or the look's Use my theme chip. ### Notes - Core blocks only: group, columns, column, heading, paragraph, buttons, button. No plugin, nothing to keep updated. Questions ## Availability calendar: common questions Does Availability calendar need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Availability calendar match my theme? Choose by variation. Wall planner takes your theme’s palette; Folio brings its own colours. How many variations does Availability calendar have? 2: Wall planner and Folio. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Availability calendar free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Which WordPress version does it need? Requires a block theme on WordPress 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### Pair with Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Stats Arisings recycled figures A figures section on an inverted slab where one number carries it: a percentage set at display size over a heading that finishes the sentence and a short note, beside a tall photograph. Under it three ruled tiles break the figure down, each a large percentage, a heading and a line, with a second photograph as the fourth tile. Four across on a wide screen, two on a tablet, one on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/arisings-recycled-figures.html)Team About day in hours An about-us story told as the business’s working day: an intro, two photographs and one action on the left, and on the right a ruled run of clock times, each time set large beside a short title and a line about what happens then. Example images included and replaceable in the editor. States no colour and no font of its own. (https://patternpaste.com/pattern/about-day-in-hours.html) #### Before you paste Requires a block theme on WordPress 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Timeline Access Free Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, column, columns, group, heading, paragraph Presets color 6, font-size 2 WordPress 7.0+ Continue exploring ## Next in Timeline Explore all 20 Timeline patterns (https://patternpaste.com/patterns/timeline/)Also in Contact (https://patternpaste.com/patterns/contact/) Shot in Twenty Twenty-Five Timeline No plugin needed ### The archive as a strip A history taken in one pass: eight narrow 2:3 photographs in a single row across the whole measure, set hard against each other, each filed under a currentColor hairline with its date in wide-tracked capitals and nothing else. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-strip.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### Course plan taper A typical course of treatment drawn as eight weeks on a ruled baseline: a solid bar for each clinic session, its height set by its minutes, and a short rule for each week of exercises at home, so the sessions visibly shorten and spread out as the course goes on. Timeline Preview pattern (https://patternpaste.com/pattern/course-plan-taper.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### Season calendar strip The year as one strip of twelve month cells, each naming the work that suits it: winter months inverted, the nesting months marked with a heavy top rule, autumn months set apart, and a three-part key beneath saying why. Timeline Preview pattern (https://patternpaste.com/pattern/season-calendar-strip.html)