Skip to content

Instantly share code, notes, and snippets.

@stojanovic

stojanovic/calendar.html

Created December 22, 2015 22:04
Show Gist options
  • Save stojanovic/2b79895dd894d9f8edaa to your computer and use it in GitHub Desktop.
Save stojanovic/2b79895dd894d9f8edaa to your computer and use it in GitHub Desktop.
Download ZIP
Simple calendar layout
Raw
calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class=calendar>
<div class=month>
<h3>JAN</h3>
<div class="week titles">
<span class=weekend>S</span>
<span>M</span>
<span>T</span>
<span>W</span>
<span>T</span>
<span>F</span>
<span class=weekend>S</span>
</div>
<a href="javascript:alert('JAN')" class=week>
<span class=weekend></span>
<span></span>
<span></span>
<span class=event>1</span>
<span>2</span>
<span>3</span>
<span class=weekend>4</span>
</a>
<a href="javascript:alert('JAN')" class=week>
<span class=weekend></span>
<span></span>
<span></span>
<span class=event>1</span>
<span>2</span>
<span>3</span>
<span class=weekend>4</span>
</a>
<a href="javascript:alert('JAN')" class=week>
<span class=weekend>5</span>
<span>8</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span class=weekend>11</span>
</a>
<a href="javascript:alert('JAN')" class=week>
<span class=weekend>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span class=weekend>18</span>
</a>
<a href="javascript:alert('JAN')" class=week>
<span class=weekend>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
<span class=weekend>25</span>
</a>
<a href="javascript:alert('JAN')" class=week>
<span class=weekend>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
<span class=weekend></span>
</a>
</div>
<div class=month>
<h3>FEB</h3>
<div class="week titles">
<span class=weekend>S</span>
<span>M</span>
<span>T</span>
<span>W</span>
<span>T</span>
<span>F</span>
<span class=weekend>S</span>
</div>
<div class=week>
<span class=weekend></span>
<span></span>
<span></span>
<span class=event>1</span>
<span>2</span>
<span>3</span>
<span class=weekend>4</span>
</div>
<div class=week>
<span class=weekend></span>
<span></span>
<span></span>
<span class=event>1</span>
<span>2</span>
<span>3</span>
<span class=weekend>4</span>
</div>
<div class=week>
<span class=weekend>5</span>
<span>8</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span class=weekend>11</span>
</div>
<div class=week>
<span class=weekend>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span class=weekend>18</span>
</div>
<div class=week>
<span class=weekend>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
<span class=weekend>25</span>
</div>
<div class=week>
<span class=weekend>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
<span class=weekend></span>
</div>
</div>
<div class=month>
<h3>MAR</h3>
<div class="week titles">
<span class=weekend>S</span>
<span>M</span>
<span>T</span>
<span>W</span>
<span>T</span>
<span>F</span>
<span class=weekend>S</span>
</div>
<div class=week>
<span class=weekend></span>
<span></span>
<span></span>
<span class=event>1</span>
<span>2</span>
<span>3</span>
<span class=weekend>4</span>
</div>
<div class=week>
<span class=weekend></span>
<span></span>
<span></span>
<span class=event>1</span>
<span>2</span>
<span>3</span>
<span class=weekend>4</span>
</div>
<div class=week>
<span class=weekend>5</span>
<span>8</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span class=weekend>11</span>
</div>
<div class=week>
<span class=weekend>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span class=weekend>18</span>
</div>
<div class=week>
<span class=weekend>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
<span class=weekend>25</span>
</div>
<div class=week>
<span class=weekend>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
<span class=weekend></span>
</div>
</div>
<div class=month>
<h3>APR</h3>
<div class="week titles">
<span class=weekend>S</span>
<span>M</span>
<span>T</span>
<span>W</span>
<span>T</span>
<span>F</span>
<span class=weekend>S</span>
</div>
<div class=week>
<span class=weekend></span>
<span></span>
<span></span>
<span class=event>1</span>
<span>2</span>
<span>3</span>
<span class=weekend>4</span>
</div>
<div class=week>
<span class=weekend></span>
<span></span>
<span></span>
<span class=event>1</span>
<span>2</span>
<span>3</span>
<span class=weekend>4</span>
</div>
<div class=week>
<span class=weekend>5</span>
<span>8</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span class=weekend>11</span>
</div>
<div class=week>
<span class=weekend>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span class=weekend>18</span>
</div>
<div class=week>
<span class=weekend>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
<span class=weekend>25</span>
</div>
<div class=week>
<span class=weekend>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
<span class=weekend></span>
</div>
</div>
<div class=month>
<h3>MAY</h3>
<div class="week titles">
<span class=weekend>S</span>
<span>M</span>
<span>T</span>
<span>W</span>
<span>T</span>
<span>F</span>
<span class=weekend>S</span>
</div>
<div class=week>
<span class=weekend></span>
<span></span>
<span></span>
<span class=event>1</span>
<span>2</span>
<span>3</span>
<span class=weekend>4</span>
</div>
<div class=week>
<span class=weekend></span>
<span></span>
<span></span>
<span class=event>1</span>
<span>2</span>
<span>3</span>
<span class=weekend>4</span>
</div>
<div class=week>
<span class=weekend>5</span>
<span>8</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span class=weekend>11</span>
</div>
<div class=week>
<span class=weekend>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span class=weekend>18</span>
</div>
<div class=week>
<span class=weekend>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
<span class=weekend>25</span>
</div>
<div class=week>
<span class=weekend>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
<span class=weekend></span>
</div>
</div>
<div class=month>
<h3>JUN</h3>
<div class="week titles">
<span class=weekend>S</span>
<span>M</span>
<span>T</span>
<span>W</span>
<span>T</span>
<span>F</span>
<span class=weekend>S</span>
</div>
<div class=week>
<span class=weekend></span>
<span></span>
<span></span>
<span class=event>1</span>
<span>2</span>
<span>3</span>
<span class=weekend>4</span>
</div>
<div class=week>
<span class=weekend></span>
<span></span>
<span></span>
<span class=event>1</span>
<span>2</span>
<span>3</span>
<span class=weekend>4</span>
</div>
<div class=week>
<span class=weekend>5</span>
<span>8</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span class=weekend>11</span>
</div>
<div class=week>
<span class=weekend>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span class=weekend>18</span>
</div>
<div class=week>
<span class=weekend>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
<span class=weekend>25</span>
</div>
<div class=week>
<span class=weekend>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
<span class=weekend></span>
</div>
</div>
</div>
</body>
</html>
Raw
calendar.less
@blue: #007eff;
@textColor: #888;
.calendar {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: center;
overflow: hidden;
background: #FFF;
color: @textColor;
font-family: OpenSans-Semibold;
}
.month {
display: block;
overflow: hidden;
margin: 20px 10px;
h3 {
display: block;
overflow: hidden;
padding: 0 10px;
height: 30px;
color: @blue;
font-family: OpenSans;
font-weight: normal;
}
}
.week {
display: block;
overflow: hidden;
color: @textColor;
font-size: 14px;
span {
display: block;
float: left;
width: 26px;
height: 24px;
text-align: center;
&.weekend {
color: #AAA;
}
&.event {
color: @blue;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment