Calendar with json events mobile concept

Developer
Size
4,022 Kb
Views
62,744

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 Previews

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();">&times;</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();
}
Calendar with json events mobile concept - Script Codes
Calendar with json events mobile concept - Script Codes
Home Page Home
Developer Moncho Varela
Username nakome
Uploaded July 07, 2022
Rating 4.5
Size 4,022 Kb
Views 62,744
Do you need developer help for Calendar with json events mobile concept?

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!

Moncho Varela (nakome) Script Codes
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!