Responsive Calender view

Developer
Chris Yaxley
Size
4,093 Kb
Views
4,048
  1. Responsive Calender view Previews
  2. Responsive Calender view HTML Codes
  3. Responsive Calender view CSS Codes
  4. Responsive Calender view JS Codes

How do I make an responsive calender view?

What is a responsive calender view? How do you make a responsive calender view? This script and codes were developed by Chris Yaxley on 07 January 2023, Saturday.

Responsive Calender view Previews
IQ Test

Responsive Calender view - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Calender view</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="container"> <h1>April</h1> <div class="calender cal-view" data-component="calender-module"> <a href="#" class="toggle">toggle view</a> <div class='calender__month'> <div class='calender__week'> <div class='calender__day--hidden'> <span class="date">29</span> </div> <div class='calender__day--hidden'> <span class="date">30</span> </div> <div class='calender__day--hidden'> <span class="date">31</span> </div> <div class='calender__day'> <span class="date">01</span> <div class="event-list"> <div class="event-list__event"> <a href="#">Shadow Factory</a> </div> </div> </div> <div class='calender__day--empty'> <span class="date">02</span> </div> <div class='calender__day--empty'> <span class="date">03</span> </div> <div class='calender__day'> <span class="date">04</span> <div class="event-list"> <div class="event-list__event"> <a href="#">Engelbert Humperdinck: Sings the old songs</a> </div> <div class="event-list__event"> <a href="">Steps: We are back, stairlift. </a> </div> <div class="event-list__event"> <a href="">Renecks: Cottoneyejoe reunion</a> </div> </div> </div> </div> <div class='calender__week'> <div class='calender__day--empty'> <span class="date">05</span> </div> <div class='calender__day'> <span class="date">06</span> <div class="event-list"> <div class="event-list__event"> <a href="#">Alpines</a> </div> </div> </div> <div class='calender__day'> <span class="date">07</span> <div class="event-list"> <div class="event-list__event"> <a href="#">Lil Peep</a> </div> </div> </div> <div class='calender__day'> <span class="date">08</span> <div class="event-list"> <div class="event-list__event"> <a href="#">The Milkybar Kid: The Whitest White</a> </div> <div class="event-list__event"> <a href="">S Club 7</a> </div> <div class="event-list__event"> <a href="">Small Angry Rapper</a> </div> </div> </div> <div class='calender__day'> <span class="date">09</span> <div class="event-list"> <div class="event-list__event"> <a href="#">Mumford &amp; Sons sing songs.</a> </div> <div class="event-list__event"> <a href="">Alice DJ: Better off alone</a> </div> </div> </div> <div class='calender__day--empty'> <span class="date">10</span> </div> <div class='calender__day--empty'> <span class="date">11</span> </div> </div> <div class='calender__week'> <div class='calender__day'> <span class="date">12</span> <div class="event-list"> <div class="event-list__event"> <a href="#">Ronan Keating: Life is a Rollercoaster</a> </div> <div class="event-list__event"> <a href="">Cher: If I could turn back time</a> </div> </div> </div> <div class='calender__day--empty'> <span class="date">13</span> </div> <div class='calender__day'> <span class="date">14</span> <div class="event-list"> <div class="event-list__event"> <a href="#">Rachael Yamagata</a> </div> </div> </div> <div class='calender__day'> <span class="date">15</span> <div class="event-list"> <div class="event-list__event"> <a href="#">Rachael Yamagata</a> </div> </div> </div> <div class='calender__day'> <span class="date">16</span> <div class="event-list"> <div class="event-list__event"> <a href="#">R Kelly: A bit of bump N Grind?</a> </div> <div class="event-list__event"> <a href="">Gardeners Questiontime, live!</a> </div> <div class="event-list__event"> <a href="">East 17: Blantent Leyton</a> </div> </div> </div> <div class='calender__day--empty'> <span class="date">17</span> </div> <div class='calender__day'> <span class="date">18</span> <div class="event-list"> <div class="event-list__event"> <a href="#">Nadine Shan</a> </div> </div> </div> </div> <div class='calender__week'> <div class='calender__day'> <span class="date">19</span> <div class="event-list"> <div class="event-list__event"> <a href="#">Nick Hakim</a> </div> <div class="event-list__event"> <a href="#">Charlotte OC</a> </div> </div> </div> <div class='calender__day'> <span class="date">20</span> <div class="event-list"> <div class="event-list__event"> <a href="">Oasis: Tropical Orange</a> </div> </div> </div> <div class='calender__day'> <span class="date">21</span> <div class="event-list__event"> <a href="#">Move</a> </div> </div> <div class='calender__day'> <span class="date">22</span> <div class="event-list__event"> <a href="#">Alex Vargas</a> </div> </div> <div class='calender__day'> <span class="date">23</span> <div class="event-list"> <div class="event-list__event"> <a href="#">BoyZone: Ronan's off on his Rollercoaster</a> </div> <div class="event-list__event"> <a href="">Big Apple Hotdogs</a> </div> <div class="event-list__event"> <a href="">3T: Our uncle is dead</a> </div> </div> </div> <div class='calender__day--empty'> <span class="date">24</span> </div> <div class='calender__day--empty'> <span class="date">25</span> </div> </div> <div class='calender__week'> <div class='calender__day'> <span class="date">26</span> <div class="event-list__event"> <a href="#">Gangly</a> </div> </div> <div class='calender__day'> <span class="date">27</span> <div class="event-list__event"> <a href="#">Thomas Dybdahl</a> </div> </div> <div class='calender__day--empty'> <span class="date">28</span> </div> <div class='calender__day'> <span class="date">29</span> <div class="event-list"> <div class="event-list__event"> <a href="#">2 Unlimited: Reach for the sky</a> </div> </div> </div> <div class='calender__day--empty'> <span class="date">30</span> </div> <div class='calender__day--empty'> <span class="date">31</span> </div> <div class='calender__day--hidden'> <span class="date">1</span> </div> </div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Responsive Calender view - Script Codes CSS Codes

html { box-sizing: border-box; background: #000000; color: #ffffff;
}
/** * calender * */
.calender { max-width: 62.5em; margin: auto;
}
.calender__month { background: #2f2f2f; height: 100%;
}
.calender__day, .calender__day--hidden, .calender__day--empty { background: rgba(255, 255, 255, 0.1); -webkit-box-flex: 1; -ms-flex: 1 1 0; flex: 1 1 0; padding: 0.625em; border: 0.0625em solid rgba(255, 255, 255, 0.2); margin: 0.125em; min-height: 8.75em;
}
.calender__day--hidden { opacity: 0.3; display: none;
}
.calender__day--empty { display: none;
}
.calender__day .date, .calender__day--hidden .date, .calender__day--empty .date { color: #ffffff; display: inline-block; padding: 0.625em 0 0.3125em 0;
}
@media screen and (min-width: 48em) { .calender.cal-view .calender__week { display: -webkit-box; display: -ms-flexbox; display: flex; }
}
.calender.cal-view .calender__day--hidden,
.calender.cal-view .calender__day--empty { display: none;
}
@media screen and (min-width: 48em) { .calender.cal-view .calender__day--hidden, .calender.cal-view .calender__day--empty { display: block; }
}
.calender .toggle { display: none; color: #ffffff; text-decoration: none; margin-bottom: 0.625em; text-align: right;
}
@media screen and (min-width: 48em) { .calender .toggle { display: block; }
}
/** * event-list * */
.event-list__event a { font-size: 0.75em; color: #ffffff; text-decoration: none;
}
.event-list__event + .event-list__event { margin-top: 0.625em;
}

Responsive Calender view - Script Codes JS Codes

var toggle = document.querySelector('.toggle');
var calender = document.querySelector('.calender');
toggle.addEventListener('click', (e)=> { toggleClass(calender, 'cal-view');
});
let toggleClass = (el, className) => { if (el.classList) { el.classList.toggle(className); } else { var classes = el.className.split(' '); var existingIndex = classes.indexOf(className); if (existingIndex >= 0) { classes.splice(existingIndex, 1); } else { classes.push(className); } el.className = classes.join(' '); }
};
Responsive Calender view - Script Codes
Responsive Calender view - Script Codes
Home Page Home
Developer Chris Yaxley
Username chrisyaxley
Uploaded January 07, 2023
Rating 3
Size 4,093 Kb
Views 4,048
Do you need developer help for Responsive Calender view?

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!

Chris Yaxley (chrisyaxley) Script Codes
Name
Google style image preview
Quick PostCodes.io test
Some modern CSS techniques
No-JS Tool tips
Basic Mario Keyframes animation
A Pen by Chris Yaxley
No-JS Off Canvas Navigation
Accessible custom CSS only Radio buttons
3D Transforms CSS Carousel
SVG Logo with CSS animations
Create amazing art & images 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!