Skip to content

Instantly share code, notes, and snippets.

@will-in-wi

will-in-wi/calendar.html

Created May 31, 2013 10:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save will-in-wi/5684196 to your computer and use it in GitHub Desktop.
Save will-in-wi/5684196 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive calendar which switches between a grid and list.
Raw
calendar.html
<!DOCTYPE html>
<html>
<head>
<title>Calendar Multires Demo</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
body {
font-family: Arial;
font-size: 1em;
background-color: #DCE0E6;
}
#calendar {
margin: 5px;
border: 1px solid #266CE6;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 5px;
background-color: white;
}
.day > article {
display: block;
padding: 5px;
margin: 5px;
}
.day > time {
display: block;
}
.day > article > header {
display: block;
border-bottom: 1px solid #5389E6;
font-weight: bold;
margin-bottom: 3px;
}
#calendar > time {
margin-top: 10px;
margin-left: 10px;
font-size: 2em;
font-family: Georgia;
}
@media all and (min-width: 960px) {
#calendar {
display: table;
}
#calendar > time {
display: table-caption;
margin-bottom: 10px;
}
.week {
display: table-row;
}
.day {
display: table-cell;
width: 14%;
border: 1px solid #AEC3E6;
}
.filler {
display: table-cell;
}
.day > time {
font-weight: bold;
margin-top: 5px;
margin-left: 5px;
}
}
@media all and (max-width: 959px) {
.filler {
display: none;
}
.empty {
display: none;
}
.day {
margin-bottom: 30px;
}
.day > time {
margin-left: 10px;
font-size: 1.5em;
font-weight: bold;
border-bottom: 1px dashed #AEC3E6;
}
}
</style>
</head>
<body>
<header>
Multires calendar demo
</header>
<div id="calendar">
<time>April 2010</time>
<div class="week">
<div class="filler"></div>
<div class="filler"></div>
<div class="filler"></div>
<div class="filler"></div>
<div class="day">
<time datetime="2010-05-01">1</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div>
<div class="day empty">
<time datetime="2010-05-02">2</time>
</div>
<div class="day">
<time datetime="2010-05-03">3</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div>
</div>
<div class="week">
<div class="day">
<time datetime="2010-05-04">4</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div>
<div class="day">
<time datetime="2010-05-05">5</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div>
<div class="day empty">
<time datetime="2010-05-06">6</time>
</div>
<div class="day empty">
<time datetime="2010-05-07">7</time>
</div>
<div class="day">
<time datetime="2010-05-08">8</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div>
<div class="day">
<time datetime="2010-05-09">9</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div><div class="day">
<time datetime="2010-05-10">10</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div>
</div>
<div class="week">
<div class="day">
<time datetime="2010-05-11">11</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div><div class="day">
<time datetime="2010-05-12">12</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div>
<div class="day">
<time datetime="2010-05-13">13</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div><div class="day">
<time datetime="2010-05-14">14</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div>
<div class="day">
<time datetime="2010-05-15">15</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div><div class="day">
<time datetime="2010-05-16">16</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div><div class="day">
<time datetime="2010-05-17">17</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div>
</div>
<div class="week">
<div class="day">
<time datetime="2010-05-18">18</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div><div class="day">
<time datetime="2010-05-19">19</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div>
<div class="day">
<time datetime="2010-05-20">20</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div>
<div class="day">
<time datetime="2010-05-21">21</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div>
<div class="day">
<time datetime="2010-05-22">22</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div>
<div class="day">
<time datetime="2010-05-23">23</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div><div class="day">
<time datetime="2010-05-24">24</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div>
</div>
<div class="week">
<div class="day">
<time datetime="2010-05-25">25</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div><div class="day">
<time datetime="2010-05-26">26</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div><div class="day">
<time datetime="2010-05-27">27</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div><div class="day">
<time datetime="2010-05-28">28</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div><div class="day">
<time datetime="2010-05-29">29</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div><div class="day">
<time datetime="2010-05-30">30</time>
<article>
<header>New Event</header>
An event with a description.
</article>
<article>
<header>New Event</header>
An event with a description.
</article>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment