Responsive activity calendar

Developer
Theun
Size
3,850 Kb
Views
42,504
  1. Responsive activity calendar Previews
  2. Responsive activity calendar HTML Codes
  3. Responsive activity calendar CSS Codes
  4. Responsive activity calendar JS Codes

How do I make an responsive activity calendar?

Part of a redesign I'm doing for a client. Sorry for the Dutch content.. What is a responsive activity calendar? How do you make a responsive activity calendar? This script and codes were developed by Theun on 23 July 2022, Saturday.

Responsive activity calendar Previews
IQ Test

Responsive activity calendar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive activity calendar</title> <link href='http://fonts.googleapis.com/css?family=Neuton:300' rel='stylesheet' type='text/css'> <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> <ol class="calendar-list"> <li class="calendar-item"> <time class="calendar-time">16 jul 2013 <span class="the-time">22:30</span></time> <div class="calendar-location">Kerkrade</div> <div class="calendar-title">Galaconcert WMC</div> <div class="calendar-executive">Nationaal Jeugd Fanfare Orkest</div> <div class="calendar-misc">Tallahatchie Concerto - Jacob ter Veldhuis. Meer info op <a href="">www.jenitaveurink.nl</a></div> </li> <li class="calendar-item"> <time class="calendar-time">26 mei 2013 <span class="the-time">14:15</span></time> <div class="calendar-location">De Doelen Rotterdam</div> <div class="calendar-title">Stravinsky's Jazz</div> <div class="calendar-executive">Rotterdams Philharmonisch Orkest</div> <div class="calendar-misc">Dirigent : J. Gaffigan Programma Igor Stravinsky, Scherzo a la Russe Leonard Bernstein, Three dance episodes George Gershwin, Rhapsody in Blue Igor Stravinsky, Symphony in Three</div> </li> <li class="calendar-item"> <time class="calendar-time">25 mei 2013 <span class="the-time">20:00</span></time> <div class="calendar-location">Stadshuishal Hengelo</div> <div class="calendar-title">Concerto for saxophone - Carl Wittrock</div> <div class="calendar-executive">Federatie van Hengelose Muziekverenigingen</div> <div class="calendar-misc">Entree: gratis</div> </li> <li class="calendar-item"> <time class="calendar-time">23 mrt 2013 <span class="the-time">14:00</span></time> <div class="calendar-location">Groningen</div> <div class="calendar-title">Concours</div> <div class="calendar-executive">Harmonie Crescendo Gramsbergen</div> </li>
</ol> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive activity calendar - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Merriweather:900,700,300);
@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.calendar-time:before, .the-time:before, .calendar-location:after { font-family: "FontAwesome", cursive; display: inline-block; vertical-align: top; font-weight: normal;
}
body { font: 300 1em/1.4 "Merriweather", serif;
}
a { color: whitesmoke;
}
.calendar-list { margin: 0; padding: 0; list-style: none inside;
}
.calendar-item { background-color: tomato; padding: 0.75em 0.5em; color: whitesmoke; margin-bottom: 0.125em;
}
.calendar-time { font-weight: 700;
}
.calendar-time:before { content: "\f073"; margin-right: 0.25em;
}
.the-time { font-weight: 300;
}
.the-time:before { content: "\f0da"; margin: 0 0.25em;
}
.calendar-location { float: right; font-size: 0.875em; text-align: right; max-width: 8em;
}
.calendar-location:after { content: "\f041"; margin-left: 0.25em;
}
.calendar-title { font-weight: 900; padding-top: 0.75em;
}
.calendar-executive { font-size: 0.75em; color: rgba(245, 245, 245, 0.52);
}
.calendar-misc { font-size: 0.75em; padding-top: 1em; line-height: 1.4;
}
@media (min-width: 24em) { body { font-size: 1.125em; }
}
@media (min-width: 32em) { body { font-size: 1.25em; }
}
@media (min-width: 48em) { body { font-size: 1.5em; } .calendar-item { max-width: 32em; margin-right: auto; margin-left: auto; } .calendar-item:after { content: ""; clear: both; display: table; } .calendar-time, .calendar-location { float: left; width: 25%; margin-right: 5%; max-width: none; font-size: 0.875em; } .the-time { display: block; clear: both; } .calendar-location { margin-left: -30%; text-align: left; margin-top: 4.5em; font-size: 0.75em; } .calendar-title, .calendar-executive, .calendar-misc { float: right; width: 70%; } .calendar-title { padding-top: 0; }
}

Responsive activity calendar - Script Codes JS Codes

// disable clicking;
(function (d) { d.body.addEventListener("click", function (e) { e.preventDefault(); }, true);
}(document));
Responsive activity calendar - Script Codes
Responsive activity calendar - Script Codes
Home Page Home
Developer Theun
Username tjoen
Uploaded July 23, 2022
Rating 4
Size 3,850 Kb
Views 42,504
Do you need developer help for Responsive activity 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!

Theun (tjoen) Script Codes
Name
Canvas Buldings
Montyclock
City block generator
Roulette
Generative art from rectangleworld
SVG pong
Font Awesome Cheetsheet
Catslicer
A Pen by Theun
D3 example
Create amazing SEO content 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!