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 |
A Pen by Rob | 1,972 Kb |
Table filters | 1,727 Kb |
A Pen by Rob | 3,452 Kb |
Flash Cards | 3,086 Kb |
Html5 form validation | 2,090 Kb |
Foundation Off-Canvas menu test | 2,424 Kb |
JQuery Animations | 3,190 Kb |
Bootstrap test | 1,906 Kb |
D3 test | 2,395 Kb |
Site Layout | 3,219 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 |
Ghost Buttons with CSS3 | Mithicher | 2,509 Kb |
AngularJS Skills | Supro | 3,312 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
Opening Reveal Modal On Document Ready | Winghouchan | 1,787 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
TinFoil Boats | Chandralil | 4,577 Kb |
Fireworks Show | Arianalynn | 3,048 Kb |
Slick Slider | Wearebold | 5,913 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
Flexbox Test | Icutpeople | 2,486 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!