Calendar Widget

Developer
Andres
Size
5,831 Kb
Views
44,528
  1. Calendar Widget Previews
  2. Calendar Widget HTML Codes
  3. Calendar Widget CSS Codes
  4. Calendar Widget JS Codes

How do I make an calendar widget?

Calendar widget that also displays the current weather conditions. Currently it's set to display weather conditions for Dortmund, Germany but you can easily set it for your city by changing the 'WOEID' in the javascript code.. What is a calendar widget? How do you make a calendar widget? This script and codes were developed by Andres on 26 August 2022, Friday.

Calendar Widget Previews
IQ Test

Calendar Widget - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calendar Widget</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="calender-object"> <div class="date"> <span id="date"></span> <span id="day"></span> <span id="time"></span> </div> <div class="weather"> <span class="icons">&#xf053;</span><span id="temp"></span><br> <span class="icons" id="weather-icon"></span><span id="desc"></span><br> <span class="icons">&#xf04e;</span><span id="humidity"></span> </div>
</div> <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 Widget - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
@font-face { font-family: 'WeatherIcons'; src: url('http://www.deangrobler.com/uploads/weathericons/weathericons-regular-webfont.eot'); src: url('http://www.deangrobler.com/uploads/weathericons/weathericons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.deangrobler.com/uploads/weathericons/weathericons-regular-webfont.woff') format('woff'), url('http://www.deangrobler.com/uploads/weathericons/weathericons-regular-webfont.ttf') format('truetype'), url('http://www.deangrobler.com/uploads/weathericons/weathericons-regular-webfont.svg#MeteoconsRegular') format('svg'); font-weight: normal; font-style: normal;
}
body { background: #ecf0f1;
}
.calender-object { width: 200px; height: 200px; background: #6ac8c1; background: -moz-linear-gradient(30deg, #6ac8c1 0%, #a0d07d 100%); background: -webkit-linear-gradient(30deg, #6ac8c1 0%, #a0d07d 100%); background: -o-linear-gradient(30deg, #6ac8c1 0%, #a0d07d 100%); background: -ms-linear-gradient(30deg, #6ac8c1 0%, #a0d07d 100%); background: linear-gradient(120deg, #6ac8c1 0%, #a0d07d 100%); color: #fff; padding: 15px; font-family: 'Roboto Condensed'; margin: 40px auto;
}
.calender-object .date #date { font-weight: 400; font-size: 122px; position: relative; top: 3px; left: 85px; color: #7cbf93;
}
.calender-object .date #day { text-transform: uppercase; position: relative; top: -160px; left: 0px; font-weight: 700; font-size: 28px;
}
.calender-object .date #time { font-weight: 300; position: relative; top: -130px; left: -103px; font-size: 28px;
}
.calender-object .weather { position: relative; top: -70px; left: 3px;
}
.calender-object .weather .icons { font-family: 'WeatherIcons'; margin-right: 5px;
}

Calendar Widget - Script Codes JS Codes

// Sets weather and date values
$(document).ready(function() { $.simpleWeather({ zipcode: '', woeid: '26822121', // Dortmund, Germany location: '', unit: 'c', success: function(weather) { $('#temp').text(weather.temp+'°'); $('#desc').text(weather.currently); $('#humidity').text(weather.humidity+'%'); var icon; switch (parseInt(weather.code)) { case 0: // Tornado icon = '&#xf056;'; break; case 1: // Tropical Storm icon = '&#xf01e;'; break; case 2: // Hurricane icon = '&#xf01e;'; break; case 3: // Severe Thunderstorms icon = '&#xf01e;'; break; case 4: // Thunderstorms icon = '&#xf01d;'; break; case 5: // Mixed rain and snow icon = '&#xf01b;'; break; case 6: // Mixed rain and sleet icon = '&#xf01b;'; break; case 7: // Mixed snow and sleet icon = '&#xf01b;'; break; case 8: // Freezing drizzle icon = ''; break; case 9: // Drizzle icon = '&#xf017;'; break; case 10: // Freezing rain icon = '&#xf019;'; break; case 11: // Showers icon = '&#xf01a;'; break; case 12: // Showers icon = '&#xf01a;'; break; case 13: // Snow flurries icon = '&#xf01b;'; break; case 14: // Light snow showers icon = '&#xf01b;'; break; case 15: // Blowing snow icon = '&#xf01b;'; break; case 16: // Snow icon = '&#xf01b;'; break; case 17: // Hail icon = '&#xf015;'; break; case 18: // Sleet icon = '&#xf01b;'; break; case 19: // Dust icon = '&#xf014;'; break; case 20: // Foggy icon = '&#xf014;'; break; case 21: // Haze icon = '&#xf021;'; break; case 22: // Smoky icon = '&#xf021;'; break; case 23: // Blustery icon = '&#xf01d;'; break; case 24: // Windy icon = '&#xf011;'; break; case 25: // Cold icon = '&#xf00d;'; break; case 26: // Cloudy icon = '&#xf013;'; break; case 27: // Mostly cloudy (night) icon = '&#xf031;'; break; case 28: // Mostly cloudy (day) icon = '&#xf002;'; break; case 29: // Partly cloudy (night) icon = '&#xf031;'; break; case 30: // Partly cloudy (day) icon = '&#xf002;'; break; case 31: // Clear (night) icon = '&#xf02e;'; break; case 32: // Sunny icon = '&#xf00d;'; break; case 33: // Fair (night) icon = '&#xf02e;'; break; case 34: // Fair (day) icon = '&#xf00d;'; break; case 35: // Mixed rain and hail icon = '&#xf015;'; break; case 36: // Hot icon = '&#xf00d;'; break; case 37: // Isolated Thunderstorms icon = '&#xf01e;'; break; case 38: // Scattered Thunderstorms icon = '&#xf01e;'; break; case 39: // Scattered Thunderstorms icon = '&#xf01e;'; break; case 40: // Scattered Showers icon = '&#xf01a;'; break; case 41: // Heavy snow icon = '&#xf01b;'; break; case 42: // Scattered snow showers icon = '&#xf01b;'; break; case 43: // Heavy snow icon = '&#xf01b;'; break; case 44: // Partly cloudy icon = '&#xf013;'; break; case 45: // Thundershowers icon = '&#xf01e;'; break; case 46: // Snow showers icon = '&#xf01b;'; break; case 47: // Isolated Thundershowers icon = '&#xf01e;'; break; case 3200: // Not available icon = '?'; break;
} $('#weather-icon').html(icon); }, error: function(error) { alert(error); } }); var d = new Date(); var date, day, time; date = d.getDate() < 10 ? '0' + d.getDate() : d.getDate(); switch(d.getDay()) { case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; break; } var hours = d.getHours() < 10 ? '0'+d.getHours() : d.getHours(); var mins = d.getMinutes() < 10 ? '0'+d.getMinutes() : d.getMinutes(); time = hours + ':' + mins; $('#date').text(date); $('#day').text(day); $('#time').text(time);
});
/* * simpleWeather * http://simpleweatherjs.com * * A simple jQuery plugin to display the current weather * information for any location using Yahoo! Weather. * * Developed by James Fleeting <@twofivethreetwo> <http://iwasasuperhero.com> * Another project from monkeeCreate <http://monkeecreate.com> * * Version 2.3.0 - Last updated: June 16 2013 */
(function(e){"use strict";e.extend({simpleWeather:function(t){t=e.extend({zipcode:"",woeid:"2357536",location:"",unit:"f",success:function(e){},error:function(e){}},t);var n=new Date;var r="http://query.yahooapis.com/v1/public/yql?format=json&rnd="+n.getFullYear()+n.getMonth()+n.getDay()+n.getHours()+"&diagnostics=true&callback=?&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&q=";if(t.location!==""){r+='select * from weather.forecast where location in (select id from weather.search where query="'+t.location+'") and u="'+t.unit+'"'}else if(t.zipcode!==""){r+='select * from weather.forecast where location in ("'+t.zipcode+'") and u="'+t.unit+'"'}else if(t.woeid!==""){r+="select * from weather.forecast where woeid="+t.woeid+' and u="'+t.unit+'"'}else{t.error("Could not retrieve weather due to an invalid WOEID or location.");return false}e.getJSON(r,function(n){if(n!==null&&n.query.results!==null&&n.query.results.channel.description!=="Yahoo! Weather Error"){e.each(n.query.results,function(e,n){if(n.constructor.toString().indexOf("Array")!==-1){n=n[0]}var r=new Date;var i=new Date(r.toDateString()+" "+n.astronomy.sunrise);var s=new Date(r.toDateString()+" "+n.astronomy.sunset);if(r>i&&r<s){var o="d"}else{var o="n"}var u=["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW","N"];var a=u[Math.round(n.wind.direction/22.5)];if(n.item.condition.temp<80&&n.atmosphere.humidity<40){var f=-42.379+2.04901523*n.item.condition.temp+10.14333127*n.atmosphere.humidity-.22475541*n.item.condition.temp*n.atmosphere.humidity-6.83783*Math.pow(10,-3)*Math.pow(n.item.condition.temp,2)-5.481717*Math.pow(10,-2)*Math.pow(n.atmosphere.humidity,2)+1.22874*Math.pow(10,-3)*Math.pow(n.item.condition.temp,2)*n.atmosphere.humidity+8.5282*Math.pow(10,-4)*n.item.condition.temp*Math.pow(n.atmosphere.humidity,2)-1.99*Math.pow(10,-6)*Math.pow(n.item.condition.temp,2)*Math.pow(n.atmosphere.humidity,2)}else{var f=n.item.condition.temp}if(t.unit==="f"){var l="c";var c=Math.round(5/9*(n.item.condition.temp-32));var h=Math.round(5/9*(n.item.forecast[0].high-32));var p=Math.round(5/9*(n.item.forecast[0].low-32));var d=Math.round(5/9*(n.item.forecast[1].high-32));var v=Math.round(5/9*(n.item.forecast[1].low-32))}else{var l="f";var c=Math.round(9/5*n.item.condition.temp+32);var h=Math.round(9/5*n.item.forecast[0].high+32);var p=Math.round(9/5*n.item.forecast[0].low+32);var d=Math.round(5/9*(n.item.forecast[1].high+32));var v=Math.round(5/9*(n.item.forecast[1].low+32))}var m={title:n.item.title,temp:n.item.condition.temp,tempAlt:c,code:n.item.condition.code,todayCode:n.item.forecast[0].code,timeOfDay:o,units:{temp:n.units.temperature,distance:n.units.distance,pressure:n.units.pressure,speed:n.units.speed,tempAlt:l},currently:n.item.condition.text,high:n.item.forecast[0].high,highAlt:h,low:n.item.forecast[0].low,lowAlt:p,forecast:n.item.forecast[0].text,wind:{chill:n.wind.chill,direction:a,speed:n.wind.speed},humidity:n.atmosphere.humidity,heatindex:f,pressure:n.atmosphere.pressure,rising:n.atmosphere.rising,visibility:n.atmosphere.visibility,sunrise:n.astronomy.sunrise,sunset:n.astronomy.sunset,description:n.item.description,thumbnail:"http://l.yimg.com/a/i/us/nws/weather/gr/"+n.item.condition.code+o+"s.png",image:"http://l.yimg.com/a/i/us/nws/weather/gr/"+n.item.condition.code+o+".png",tomorrow:{high:n.item.forecast[1].high,highAlt:d,low:n.item.forecast[1].low,lowAlt:v,forecast:n.item.forecast[1].text,code:n.item.forecast[1].code,date:n.item.forecast[1].date,day:n.item.forecast[1].day,image:"http://l.yimg.com/a/i/us/nws/weather/gr/"+n.item.forecast[1].code+"d.png"},city:n.location.city,country:n.location.country,region:n.location.region,updated:n.item.pubDate,link:n.item.link};t.success(m)})}else{if(n.query.results===null){t.error("An invalid WOEID or location was provided.")}else{t.error("There was an error retrieving the latest weather information. Please try again.")}}});return this}})})(jQuery)
Calendar Widget - Script Codes
Calendar Widget - Script Codes
Home Page Home
Developer Andres
Username Angelfire
Uploaded August 26, 2022
Rating 3
Size 5,831 Kb
Views 44,528
Do you need developer help for Calendar Widget?

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!

Andres (Angelfire) Script Codes
Name
Simple Dashboard Search
JQuery Payment
CSS3 animated Pricing tables
Chart.js Infobox
Font Awesome Flat Icons
Flexbox Admin Template
Weather App
Swanky Pure CSS Drop Down Menu V2.0
Latest Posts Widget
Threaded Chat
Create amazing love letters 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!