Calendar with json events mobile concept
How do I make an calendar with json events mobile concept?
What is a calendar with json events mobile concept? How do you make a calendar with json events mobile concept? This script and codes were developed by Moncho Varela on 07 July 2022, Thursday.
Calendar with json events mobile concept - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calendar with json events mobile concept</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"> <div id="calendar"></div> <div id="calendar_data"></div>
</div> <script src="js/index.js"></script>
</body>
</html>
Calendar with json events mobile concept - Script Codes CSS Codes
*,
*:after,
*:before { box-sizing: border-box;
}
body { margin: 0; padding: 0; height: 100%; position: relative; background: #EFEFEF;
}
/* for demo */
.wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 320px; height: 480px; background: #FFF; margin: 1em auto; border: 4px solid #E2E2E2; box-shadow: 0 10px 9px -6px #C5C5C5; border-top-width: 25px; border-bottom-width: 32px; border-radius: 8px; overflow: hidden;
}
div#calendar { margin: 0; padding: 0; display: block; width: 100%; height: 100%; background: #F3F3F3;
}
table { width: 100%; font-family: sans-serif; border-collapse: separate; border-spacing: 0;
}
.head_cal { background: #FFF; color: #85BAFF; font-size: 2rem; line-height: 5rem; text-transform: uppercase;
}
.subhead_cal { background: #85BAFF; color: #FFF; font-size: 1.2rem; line-height: 2rem;
}
.week_cal { background: #FFF; color: #D7D7D7; font-size: 1rem; line-height: 2rem;
}
.white_cal { background: #ECECEC!important;
}
tbody.days_cal tr td a { padding: 0; text-decoration: none; background: #FFF; color: #888; height: 3.2rem; width: 100%; line-height: 3.2rem; display: block;
}
tbody.days_cal tr td { padding: 0; margin: 0; border: 1px solid #ECECEC; text-align: center; width: 14.28571428571429%; height: auto;
}
.event { color: #85BAFF !important; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
.today_cal.event { background: #FF8D8D !important; color: #FFF !important; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
.today_cal.event:hover, .event:hover{ opacity:0.5; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
.week_event { color: #85BAFF;
}
#calendar_data { margin: 0; padding: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #FFF; color: #C5C5C5; opacity:0; visibility:hidden; -webkit-transform: scale(0,0); transform: scale(0,0); -webkit-transition: all 0.8s ease; transition: all 0.8s ease;
}
#calendar_data h3 { text-align: center; font-size: 20px; padding: 5px 10px; margin: 0; background: #F2F2F2; color: #43AEEF; border-bottom: 1px solid #DFDFDF; text-transform: capitalize;
}
#calendar_data dl { padding: 0.5em; margin-left: 0; display: block; height: calc(100% - 4rem);
}
#calendar_data dt { float: left; clear: left; width: 5rem; text-align: left; font-size: 0.8rem; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; color: #43B0EF; background: #FFF; padding: 0.2rem;
}
#calendar_data dd { margin: 0 0 1rem 5rem; padding: 0 0.5rem 0.5rem 0.5rem; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 0.8rem; line-height: 1.2rem; color: #ADADAD; border-bottom: 1px solid #EAEAEA;
}
#calendar_data dd:last-child {
border: none;
}
#calendar_data a:not(.hideEvent) { color: #43AEEF; border: 0.1rem solid #43AEEF; padding: 0.2rem 1rem; text-decoration: none;
}
.show_data{ opacity: 1 !important; visibility: visible !important; -webkit-transform: scale(1, 1) !important; transform: scale(1, 1) !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.hideEvent { position: absolute; right: 0; top: 0; font-size: 2rem; font-family: sans-serif; font-weight: 300; text-align: center; text-decoration: none; width: 2rem; height: 2rem; line-height: 2rem; background: #F2F2F2; border-left: 0.1rem solid #E5E5E5; color: #D3D3D3 !important;
}
.hideEvent:hover{ text-decoration:none; color:#f55;
}
Calendar with json events mobile concept - Script Codes JS Codes
// Start
_('#calendar').innerHTML = calendar();
// short queySelector
function _(s) { return document.querySelector(s);
}
// show info
function showInfo(event) { // link var url = 'http://codepen.io/nakome/pen/EWBMzm.css'; // get json getjson(url, function(obj) { for (var key in obj) { // if has envent add class if(_('[data-id="' + key + '"]')){ _('[data-id="' + key + '"]').classList.add('event'); } if (event === key) { _('#calendar_data').classList.toggle('show_data'); // template info var data = '<a href="#" class="hideEvent" '+ 'onclick="return hideEvent();">×</a>'+ '<h3>' + obj[key].type + '</h3>' + '<dl>' + '<dt><dfn>Title:</dfn></dt><dd>' + obj[key].title + '</dd>' + '<dt><dfn>Hour:</dfn></dt><dd>' + obj[key].time + '</dd>' + '<dt><dfn>Venue:</dfn></dt><dd>' + obj[key].venue + '</dd>' + '<dt><dfn>Location:</dfn></dt><dd>' + obj[key].location + '</dd>' + '<dt><dfn>Description:</dfn></dt><dd>' + obj[key].desc + '</dd>' + '<dt><dfn>More Info:</dfn></dt><dd><a href="' + obj[key].more + '" title="More info">Here</a></dd>' + '</dl>'; return _('#calendar_data').innerHTML = data; } } }); return false;
}
// toggle event show or hide
function hideEvent(){ _('#calendar_data').classList.toggle('show_data');
}
// simple calendar
function calendar() { // show info on init showInfo(); // vars var day_of_week = new Array( 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'), month_of_year = new Array( 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'), Calendar = new Date(), year = Calendar.getYear(), month = Calendar.getMonth(), today = Calendar.getDate(), weekday = Calendar.getDay(), html = ''; // start in 1 and this month Calendar.setDate(1); Calendar.setMonth(month); // template calendar html = '<table>'; // head html += '<thead>'; html += '<tr class="head_cal"><th colspan="7">' + month_of_year[month] + '</th></tr>'; html += '<tr class="subhead_cal"><th colspan="7">' + Calendar.getFullYear() + '</th></tr>'; html += '<tr class="week_cal">'; for (index = 0; index < 7; index++) { if (weekday == index) { html += '<th class="week_event">' + day_of_week[index] + '</th>'; } else { html += '<th>' + day_of_week[index] + '</th>'; } } html += '</tr>'; html += '</thead>'; // body html += '<tbody class="days_cal">'; html += '</tr>'; // white zone for (index = 0; index < Calendar.getDay(); index++) { html += '<td class="white_cal"> </td>'; } for (index = 0; index < 31; index++) { if (Calendar.getDate() > index) { week_day = Calendar.getDay(); if (week_day === 0) { html += '</tr>'; } if (week_day !== 7) { // this day var day = Calendar.getDate(); var info = (Calendar.getMonth() + 1) + '/' + day + '/' + Calendar.getFullYear(); if (today === Calendar.getDate()) { html += '<td><a class="today_cal" href="#" data-id="' + info + '" onclick="return showInfo(\'' + info + '\')">' + day + '</a></td>'; showInfo(info); } else { html += '<td><a href="#" data-id="' + info + '" onclick="return showInfo(\'' + info + '\')">' + day + '</a></td>'; } } if (week_day == 7) { html += '</tr>'; } } Calendar.setDate(Calendar.getDate() + 1); } // end for loop return html;
}
// Get Json data
function getjson(url, callback) { var self = this, ajax = new XMLHttpRequest(); ajax.open('GET', url, true); ajax.onreadystatechange = function() { if (ajax.readyState == 4) { if (ajax.status == 200) { var data = JSON.parse(ajax.responseText); return callback(data); } else { console.log(ajax.status); } } }; ajax.send();
}
Developer | Moncho Varela |
Username | nakome |
Uploaded | July 07, 2022 |
Rating | 4.5 |
Size | 4,022 Kb |
Views | 62,744 |
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 |
Background video | 3,286 Kb |
Get color on click | 29,575 Kb |
IndexedDB demo | 6,577 Kb |
Simple Calendar with json events | 4,127 Kb |
Get json with data attributes | 3,609 Kb |
Another intro | 4,763 Kb |
One page theme | 6,183 Kb |
Html demos with data uri | 4,086 Kb |
Data uri converter | 4,979 Kb |
Simply Redirect to | 1,989 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 |
Awesome | Samarthpd | 2,901 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
A vuejs widget | Chrgl86 | 2,869 Kb |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
RSW | JordanC | 3,726 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!