Calendar

Developer
Matt Edwards
Size
3,834 Kb
Views
24,288
  1. Calendar Previews
  2. Calendar HTML Codes
  3. Calendar CSS Codes
  4. Calendar JS Codes

How do I make an calendar?

What is a calendar? How do you make a calendar? This script and codes were developed by Matt Edwards on 12 August 2022, Friday.

Calendar Previews
IQ Test

Calendar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calendar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h2>July</h2> <article data-date="20130701"> <a href="#">1</a> <div> <h4>July 1</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article data-date="20130702"> <a href="#">2</a> <div> <h4>July 2</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article data-date="20130703"> <a href="#">3</a> <div> <h4>July 3</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article data-date="20130704"> <a href="#">4</a> <div> <h4>July 4</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">5</a> <div> <h4>July 5</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">6</a> <div> <h4>July 6</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">7</a> <div> <h4>July 7</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <div class="content"> </div> <article> <a href="#">8</a> <div> <h4>July 8</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">9</a> <div> <h4>July 9</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">10</a> <div> <h4>July 10</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">11</a> <div> <h4>July 11</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">12</a> <div> <h4>July 12</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">13</a> <div> <h4>July 13</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">14</a> <div> <h4>July 14</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <div class="content"></div> <article> <a href="#">15</a> <div> <h4>July 15</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">16</a> <div> <h4>July 16</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">17</a> <div> <h4>July 17</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">18</a> <div> <h4>July 18</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">19</a> <div> <h4>July 19</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">20</a> <div> <h4>July 20</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">21</a> <div> <h4>July 21</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <div class="content"></div> <article> <a href="#">22</a> <div> <h4>July 22</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">23</a> <div> <h4>July 23</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">24</a> <div> <h4>July 24</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">25</a> <div> <h4>July 25</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">26</a> <div> <h4>July 26</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">27</a> <div> <h4>July 27</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">28</a> <div> <h4>July 28</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <div class="content"></div> <article> <a href="#">29</a> <div> <h4>Jul 29</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">30</a> <div> <h4>July 30</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <article> <a href="#">31</a> <div> <h4>july 31</h4> <p>Content content content content content content content content content content content content content.</p> </div> </article> <div class="content"></div>
</div><!-- end container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Calendar - Script Codes CSS Codes

@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
/*Variables*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif;
}
p { margin: 1em 0;
}
body { background: #333; font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #212121; text-align: left; padding: 20px; margin: 0; word-wrap: break-word; -webkit-text-size-adjust: none; text-rendering: optimizeLegibility; -ms-content-zooming: none; -ms-scroll-chaining: none; width: 100%; display: block; max-width: 1000px; position: relative;
}
.container { max-width: 600px; background: #111;
}
.container:after { content: ""; display: table; clear: both;
}
.container h2 { color: #fff; text-align: center; font-weight: 100; padding: 10px 0;
}
article { display: inline; float: left; width: 14.2857%; height: 45px;
}
article a { width: 100%; height: 45px; text-align: center; line-height: 45px; display: block; font-size: 1.3em; color: #fff; border: 1px solid #111; background: #222; text-decoration: none; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in;
}
article a.select { background: #f27d00;
}
article a:hover { color: #333; background: #efefef;
}
.today a { background: #f27d00;
}
.done a { background: #555; color: #878785;
}
article div { display: none;
}
.content.open { display: block; clear: both; padding: 10px 20px; color: #fff;
}
.content.open h4 { font-size: 1.5em; font-weight: 100; padding: 0; margin: 0;
}

Calendar - Script Codes JS Codes

var today = '20130702';
$('article').each( function(){ if($(this).data('date') == today){ $(this).addClass('today'); } else { if($(this).data('date') < today){ $(this).addClass('done'); } } })
$('.container').on('click','a',function(e){ e.preventDefault(); if($(this).hasClass('select')){ $(this).removeClass('select'); $('.content').empty().removeClass('open'); } else { $('a').removeClass('select'); $('.content').empty().removeClass('open'); var content = $(this).parent().find('div').html(); var box = $(this).parent().nextAll('.content').first(); $(box).addClass('open').html(content); $(this).addClass('select'); }
});
Calendar - Script Codes
Calendar - Script Codes
Home Page Home
Developer Matt Edwards
Username mtedwards
Uploaded August 12, 2022
Rating 3
Size 3,834 Kb
Views 24,288
Do you need developer help for 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!

Matt Edwards (mtedwards) Script Codes
Name
Quiz
JQuery YouTube Playlist
JQuery featured gallery
Angular Form JSON test
Angular Instagram test
Responsive layout with Fixed width Sidebar
A Pen by Matt Edwards
JQuery Slider
Css Skew background for triangular overlay
AussieTheatre Logo
Create amazing blog posts 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!