Calendar
How do I make an calendar?
What is a calendar? How do you make a calendar? This script and codes were developed by Olivier C on 19 November 2022, Saturday.
Calendar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calendar</title> <link rel='stylesheet prefetch' href='https://scriptura.github.io/Public/Styles/MainBlooming.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html> <body class="onepage color"> <section class="section"> <div class="wrap ribbon-container"> <div class="ribbon"><a href="https://scriptura.github.io/">See project</a></div> <h1 class="emphasized">Calendar</h1> <div class="grid"> <div class="m4"><code>table.calendar</code> <table class="calendar"> <thead> <tr> <th><a href=""><<</a></th> <th><a href=""><</a></th> <th colspan="3">Janu. 2015</th> <th><a href="">></a></th> <th><a href="">>></a></th> </tr> <tr> <th>Mo</th> <th>Tu</th> <th>We</th> <th>Th</th> <th>Fr</th> <th>Sa</th> <th>Su</th> <tbody> <tr> <td> <a href="">1</a></td> <td><a href="">2</a></td> <td><a href="">3</a></td> <td><a href="">4</a></td> <td><a href="">5</a></td> <td><a href="">6</a></td> <td><a href="">7</a></td> </tr> <tr> <td><a href="">8</a></td> <td><a href="">9</a></td> <td><a class="active" href="">10</a></td> <td><a href="">11</a></td> <td><a href="">12</a></td> <td><a href="">13</a></td> <td><a href="">14</a></td> </tr> <tr> <td><a href="">15</a></td> <td><a href="">16</a></td> <td><a href="">17</a></td> <td><a href="">18</a></td> <td><a href="">19</a></td> <td><a href="">20</a></td> <td><a href="">21</a></td> </tr> <tr> <td><a href="">22</a></td> <td><a href="">23</a></td> <td><a href="">24</a></td> <td><a href="">25</a></td> <td><a href="">26</a></td> <td><a href="">27</a></td> <td><a href="">28</a></td> </tr> <tr> <td><a href="">29</a></td> <td><a href="">30</a></td> <td><a href="">31</a></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </tr> </thead> </table> </div> <div class="m4"><code>table.calendar</code> <table class="calendar"> <thead> <tr> <th><a href=""><<</a></th> <th><a href=""><</a></th> <th colspan="3">Janv. 2015</th> <th><a href="">></a></th> <th><a href="">>></a></th> </tr> <tr> <th>Lu</th> <th>Ma</th> <th>Me</th> <th>Je</th> <th>Ve</th> <th>Sa</th> <th>Di</th> <tbody> <tr> <td> <a href="">1</a></td> <td><a href="">2</a></td> <td><a href="">3</a></td> <td><a href="">4</a></td> <td><a href="">5</a></td> <td><a href="">6</a></td> <td><a href="">7</a></td> </tr> <tr> <td><a href="">8</a></td> <td><a href="">9</a></td> <td><a class="active" href="">10</a></td> <td><a href="">11</a></td> <td><a href="">12</a></td> <td><a href="">13</a></td> <td><a href="">14</a></td> </tr> <tr> <td><a href="">15</a></td> <td><a href="">16</a></td> <td><a href="">17</a></td> <td><a href="">18</a></td> <td><a href="">19</a></td> <td><a href="">20</a></td> <td><a href="">21</a></td> </tr> <tr> <td><a href="">22</a></td> <td><a href="">23</a></td> <td><a href="">24</a></td> <td><a href="">25</a></td> <td><a href="">26</a></td> <td><a href="">27</a></td> <td><a href="">28</a></td> </tr> <tr> <td><a href="">29</a></td> <td><a href="">30</a></td> <td><a href="">31</a></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </tr> </thead> </table> </div> <div class="m4"><code>table.calendar</code> <table class="calendar"> <thead> <tr> <th><a href=""><<</a></th> <th><a href=""><</a></th> <th colspan="3">Janu. 2015</th> <th><a href="">></a></th> <th><a href="">>></a></th> </tr> <tr> <th>Mo</th> <th>Tu</th> <th>We</th> <th>Th</th> <th>Fr</th> <th>Sa</th> <th>Su</th> <tbody> <tr> <td> <a href="">1</a></td> <td><a href="">2</a></td> <td><a href="">3</a></td> <td><a href="">4</a></td> <td><a href="">5</a></td> <td><a href="">6</a></td> <td><a href="">7</a></td> </tr> <tr> <td><a href="">8</a></td> <td><a href="">9</a></td> <td><a class="active" href="">10</a></td> <td><a href="">11</a></td> <td><a href="">12</a></td> <td><a href="">13</a></td> <td><a href="">14</a></td> </tr> <tr> <td><a href="">15</a></td> <td><a href="">16</a></td> <td><a href="">17</a></td> <td><a href="">18</a></td> <td><a href="">19</a></td> <td><a href="">20</a></td> <td><a href="">21</a></td> </tr> <tr> <td><a href="">22</a></td> <td><a href="">23</a></td> <td><a href="">24</a></td> <td><a href="">25</a></td> <td><a href="">26</a></td> <td><a href="">27</a></td> <td><a href="">28</a></td> </tr> <tr> <td><a href="">29</a></td> <td><a href="">30</a></td> <td><a href="">31</a></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </tr> </thead> </table> </div> </div> </div> </section> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://scriptura.github.io/Public/Scripts/Main.js'></script> <script src="js/index.js"></script>
</body>
</html>
Calendar - Script Codes CSS Codes
[class*="calendar"] { text-align: center; font-size: 0.8em; border-collapse: collapse; border-spacing: 0.3em; color: #efefef; background-color: #eee;
}
[class*="calendar"] a { color: #efefef;
}
[class*="calendar"] thead tr { border: 1px solid #444;
}
[class*="calendar"] thead tr:first-child th:nth-child(3) { border: none;
}
[class*="calendar"] th,
[class*="calendar"] td { width: 2em; line-height: 2em; padding: 0; border: 1px solid #444;
}
[class*="calendar"] th { padding: 0.4em; border: none;
}
[class*="calendar"] td:empty { border: none;
}
[class*="calendar"] a { display: block; height: 100%; text-decoration: none;
}
[class*="calendar"] a:focus,
[class*="calendar"] a:hover,
[class*="calendar"] a:active { background-color: rgba(255,255,255,0.2);
}
:root body [class*="calendar"] * { border-color: #ddd;
}
[class*="calendar"] thead tr:first-child { background-color: #5a728a; background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.1), rgba(255,255,255,0.1)); background-image: linear-gradient(to top, rgba(0,0,0,0.1), rgba(255,255,255,0.1));
}
[class*="calendar"] thead tr:last-child th { color: #777; background-color: #fefefe;
}
[class*="calendar"] td a { background-color: #fefefe; background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.1), rgba(255,255,255,0.05)); background-image: linear-gradient(to top, rgba(0,0,0,0.1), rgba(255,255,255,0.05));
}
[class*="calendar"] td a { color: #888 !important;
}
[class*="calendar"] td a:focus,
[class*="calendar"] td a:hover,
[class*="calendar"] td a:active { color: #000 !important; background: #fff none;
}
[class*="calendar"] td .active { color: #fff !important; background-color: #b03c57; pointer-events: none;
}
Calendar - Script Codes JS Codes
// @link https://scriptura.github.io
Developer | Olivier C |
Username | olivier-c |
Uploaded | November 19, 2022 |
Rating | 3 |
Size | 3,739 Kb |
Views | 10,120 |
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 |
Table layout | 2,198 Kb |
Responsive Masonry in CSS only | 3,823 Kb |
Picture tag, srcset and sizes attributes | 2,894 Kb |
Space Invaders | 54,137 Kb |
Mosaic cubes | 4,488 Kb |
Mosaic | 6,825 Kb |
Full SVG | 18,023 Kb |
Arrow Scroll Top | 7,025 Kb |
Animation full CSS | 2,368 Kb |
Resize Navigation Bar | 2,714 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 |
Twinkling Stars | Ripley6811 | 2,750 Kb |
3D Text in Sass | Bookcasey | 2,766 Kb |
Loading... | Adamjacob | 2,384 Kb |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
Canvas Background Effect | Sonick | 3,513 Kb |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
CSS Patterns | Alyda | 3,953 Kb |
Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
Gradients | Karpovsystems | 2,394 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!