Responsive Calendar

Developer
Size
2,460 Kb
Views
50,600

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 Previews

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>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>Independence Day (USA)</td> <td>&nbsp;</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">&nbsp;</td> <td class="description">Date with Cold Beer</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</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>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</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>&nbsp;</td> <td>&nbsp;</td> <td>Doctor's Appointment</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>Work Picnic</td> <td>&nbsp;</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>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</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; }
}
Responsive Calendar - Script Codes
Responsive Calendar - Script Codes
Home Page Home
Developer Rob
Username rowinf
Uploaded August 30, 2022
Rating 3
Size 2,460 Kb
Views 50,600
Do you need developer help for Responsive Calendar?

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!

Rob (rowinf) Script Codes
Create amazing sales emails with AI!

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!