Responsive Calendar
How do I make an responsive calendar?
Playing with html and responsive CSS in the form of a calendar. Resize the screen to see how it changes.. What is a responsive calendar? How do you make a responsive calendar? This script and codes were developed by Rob on 30 August 2022, Tuesday.
Responsive Calendar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Calendar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <table id="header-table"> <tbody> <tr> <td>July 2013</td> </tr> <tr> <td>Your date with a Cold Beer is tomorrow</td> </tr> </tbody> </table> <table id="day-names"> <tbody> <tr> <td>Monday</td> <td>Tuesday</td> <td>Wednesday</td> <td>Thursday</td> <td>Friday</td> <td>Saturday</td> <td>Sunday</td> </tr> </tbody> </table> <table class="week"> <tr> <td>30</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td class="event holiday">5</td> <td>6</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>Independence Day (USA)</td> <td> </td> </tr> </table> <table class="week"> <tr> <td class="today date">7</td> <td class="event important">8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td class="today"> </td> <td class="description">Date with Cold Beer</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <table class="week"> <tr> <td class="event holiday">14</td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> </tr> <tr> <td class="description">Bastille Day (France)</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <table class="week"> <tr> <td>21</td> <td>22</td> <td class="event appointment">23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> </tr> <tr> <td> </td> <td> </td> <td>Doctor's Appointment</td> <td> </td> <td> </td> <td>Work Picnic</td> <td> </td> </tr> </table> <table class="week"> <tr> <td>28</td> <td>29</td> <td>30</td> <td>31</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
</div>
</body>
</html>
Responsive Calendar - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Roboto);
body { background-color: #f1f1f1; font-family: 'Roboto', sans-serif;
}
.wrapper { width: 800px; padding: 4px;
}
table { width: 100%; font-size: 14px; border-left: 1px solid #d6d6d6;
}
td { border-right: 1px solid #d6d6d6;
}
#header-table tr:first-child { text-align: center; color: #0055ff; border-top: 1px solid #d6d6d6; text-shadow: 1px 1px 3px rgba(0, 85, 255, 0.3);
}
#header-table tr:nth-child(2) { background-color: #A4C739; color: white; border: 1px solid #d6c1d6; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}
#header-table td { padding: 4px;
}
#day-names { text-align: center; border-bottom: 1px solid #d6d6d6;
}
#day-names td { width: 14.2857%; height: 22px;
}
table.week { font-size: 75%;
}
table.week { height: 80px; border-bottom: 1px solid #d6d6d6;
}
table.week td { width: 14.2857%; padding: 2px 3px;
}
td.today { font-weight: bold; background-color: rgba(181, 228, 206, .4);
}
td.today.date { font-size: 110%; text-shadow: 1px 1px 3px rgba(25,25,25, 0.3);
}
table.week tr:first-child { height: 25%;
}
table.week tr:nth-child(2) { height: 75%;
}
.event.holiday { background-color: #c5c5ee;
}
td.event.important { background-color: #A4C739; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) { .wrapper { width: inherit; min-width: 220px; } #day-names { display: none; } table.week{ height: 30px; } .week td { padding: auto; text-align: center; } .week tr:nth-child(2) { display: none; }
}
Developer | Rob |
Username | rowinf |
Uploaded | August 30, 2022 |
Rating | 3 |
Size | 2,460 Kb |
Views | 50,600 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
D3 test | 2,395 Kb |
Get combo box item value | 1,981 Kb |
Filter inputs | 1,721 Kb |
Foundation Off-Canvas menu test | 2,424 Kb |
A Pen by Rob | 3,452 Kb |
Jquery form | 2,920 Kb |
Html5 form validation | 2,090 Kb |
A Pen by Rob | 1,972 Kb |
Site Layout | 3,219 Kb |
JQuery Animations | 3,190 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
A bit of elegance | Hackthevoid | 9,095 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Wikipedia viewer | Chpecson | 2,865 Kb |
IPhone5S SVG Space Grey | Onlinechris | 75,035 Kb |
Background Images | Jooonebug | 2,100 Kb |
Multi-step GSAP animation | Acacheung | 2,668 Kb |
Rotate Demo | Agelber | 3,061 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!