{"id":331598,"date":"2020-12-24T07:25:37","date_gmt":"2020-12-24T15:25:37","guid":{"rendered":"https:\/\/css-tricks.com\/?p=331598"},"modified":"2020-12-24T07:25:39","modified_gmt":"2020-12-24T15:25:39","slug":"a-calendar-in-three-lines-of-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/a-calendar-in-three-lines-of-css\/","title":{"rendered":"A Calendar in Three Lines of CSS"},"content":{"rendered":"\n<p><a href=\"https:\/\/calendartricks.com\/a-calendar-in-three-lines-of-css\/\" rel=\"noopener\">This article<\/a> has no byline and is on a website that is even more weirdly specific than this one is, but I appreciate the trick here. A seven-column grid makes for a calendar layout pretty quick. You can let the days (grid items) fall onto it naturally, except kick the first day over to the correct first column with <code>grid-column-start<\/code>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Thoughts:<\/p>\n\n\n\n<ul><li>I&#8217;d go with an <code>&lt;ol&gt;<\/code> rather than a <code>&lt;ul&gt;<\/code> just because it seems like days are definitely ordered.<\/li><li>The days as-a-list don&#8217;t really bother me since maybe that makes semantic sense to the content of the calendar (assuming it has some)<\/li><li>But&#8230; seeing the titles of the days-of-the-week as the first items in the same list feels weird. Almost like that should be a separate list or something. <\/li><li>Or maybe it should all just be a <code>&lt;table&gt;<\/code> since it&#8217;s sort of tabular data (it stands to reason you might want to cross-reference and look at all Thursdays or whatever).<\/li><\/ul>\n\n\n\n<p>Anyway, the placement trickery is fun. <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaLwqGR\" src=\"\/\/codepen.io\/anon\/embed\/BaLwqGR?height=450&amp;theme-id=1&amp;slug-hash=BaLwqGR&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaLwqGR\" title=\"CodePen Embed BaLwqGR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here&#8217;s another (similar) approach from our collection of <a href=\"https:\/\/css-tricks.com\/snippets\/css\/css-grid-starter-layouts\/\">CSS Grid starter templates<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vWXBea\" src=\"\/\/codepen.io\/anon\/embed\/vWXBea?height=600&amp;theme-id=1&amp;slug-hash=vWXBea&amp;default-tab=css,result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vWXBea\" title=\"CodePen Embed vWXBea\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>This article has no byline and is on a website that is even more weirdly specific than this one is, but I appreciate the trick here. A seven-column grid makes for a calendar layout pretty quick. You can let the days (grid items) fall onto it naturally, except kick the first day over to the [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":317144,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[686],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/calendar-month-view-previous-past-months.png?fit=2674%2C1780&ssl=1","jetpack-related-posts":[{"id":303379,"url":"https:\/\/css-tricks.com\/responsive-grid-magazine-layout-in-just-20-lines-of-css\/","url_meta":{"origin":331598,"position":0},"title":"Responsive Grid Magazine Layout in Just 20 Lines of CSS","date":"February 25, 2020","format":false,"excerpt":"I was recently working on a modern take of the blogroll. The idea was to offer readers a selection of latest posts from those blogs in a magazine-style layout, instead of just popping a list of our favorite blogs in the sidebar. The easy part was grabbing a list of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/grid-spans.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376950,"url":"https:\/\/css-tricks.com\/making-calendars-with-accessibility-and-internationalization-in-mind\/","url_meta":{"origin":331598,"position":1},"title":"Making Calendars With Accessibility and Internationalization in Mind","date":"March 13, 2023","format":false,"excerpt":"Doing a quick search here on CSS-Tricks shows just how many different ways there are to approach calendars. Some show how CSS Grid can create the layout efficiently. Some attempt to bring actual data into the mix. Some rely on a framework to help with state management. There are many\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/calendar-ios.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367178,"url":"https:\/\/css-tricks.com\/exploring-css-grids-implicit-grid-and-auto-placement-powers\/","url_meta":{"origin":331598,"position":2},"title":"Exploring CSS Grid\u2019s Implicit Grid and Auto-Placement Powers","date":"August 1, 2022","format":false,"excerpt":"When working with CSS Grid, the first thing to do is to set display: grid on the element that we want to be become a grid container. Then we explicitly define the grid using a combination of grid-template-columns, grid-template-rows, and grid-template-areas. And from there, the next step is to place\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_F4C924AEFDB642C9861B01422787157264225531682D164A8C42B48A83B84E89_1656674978920_image.png?fit=608%2C742&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":366252,"url":"https:\/\/css-tricks.com\/conditionally-styling-selected-elements-in-a-grid-container\/","url_meta":{"origin":331598,"position":3},"title":"Conditionally Styling Selected Elements in a Grid Container","date":"June 15, 2022","format":false,"excerpt":"Calendars, shopping carts, galleries, file explorers, and online libraries are some situations where selectable items are shown in grids (i.e. square lattices). You know, even those security checks that ask you to select all images with crosswalks or whatever. \ud83e\uddd0 I found a neat way to display selectable options in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654436553993_diagram-1.png?fit=1200%2C877&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351481,"url":"https:\/\/css-tricks.com\/minding-the-gap\/","url_meta":{"origin":331598,"position":4},"title":"Minding the &#8220;gap&#8221;","date":"September 16, 2021","format":false,"excerpt":"You might already know about the CSS gap property. It isn\u2019t exactly new, but it did gain an important new ability last year: it now works in Flexbox in addition to CSS Grid. That, and the fact that I believe the property is more complicated than it appears, made me\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/z8fc2xmA.jpeg?fit=1200%2C1003&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":358575,"url":"https:\/\/css-tricks.com\/using-position-sticky-with-css-grid\/","url_meta":{"origin":331598,"position":5},"title":"Using Position Sticky With CSS Grid","date":"December 10, 2021","format":false,"excerpt":"Say you've got a two-column CSS grid and you want one of those columns to behave like position: sticky;. There is nothing stopping you from doing that. But the default height for those two columns is going to be \"as tall as the tallest content in either column\" because the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/sticky-header.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/331598"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=331598"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/331598\/revisions"}],"predecessor-version":[{"id":331619,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/331598\/revisions\/331619"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/317144"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=331598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=331598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=331598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}