Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/edent/Dynamic-SVG-Calendar-Icon
Here it is, an SVG calendar which always display's today's date.
https://github.com/edent/Dynamic-SVG-Calendar-Icon
Last synced: about 2 months ago
JSON representation
Here it is, an SVG calendar which always display's today's date.
- Host: GitHub
- URL: https://github.com/edent/Dynamic-SVG-Calendar-Icon
- Owner: edent
- License: mit
- Created: 2018-02-26T11:33:18.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-01-13T14:39:54.000Z (over 2 years ago)
- Last Synced: 2024-06-14T01:39:25.757Z (3 months ago)
- Size: 10.7 KB
- Stars: 189
- Watchers: 11
- Forks: 29
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# This SVG always shows today's date
[Originally posted on my blog](https://shkspr.mobi/blog/2018/02/this-svg-always-shows-todays-date/).
For [my contact page](https://edent.tel/), I wanted a generic calendar icon to let people view my diary. Calendar icons are almost always a skeuomorph of a paper calendar, but I wondered if I could make it slightly more useful by creating a *dynamic* icon.
Here it is, an SVG calendar which always display's today's date.
(Note - GitHub doesn't allow data URIs or iFrames - so you'll need to [click the link to see it](https://shkspr.mobi/svg/calendar.svg))
The background image is derived from the [Twitter TweMoji Calendar icon](https://github.com/twitter/twemoji/blob/gh-pages/2/svg/1f4c5.svg) - CC-BY.
[![Buy me a coffee](https://www.ko-fi.com/img/donate_sm.png)](https://ko-fi.com/edent)
## Use
SVG supports JavaScript. Browsers will only run the JavaScript if the SVG is included...* in an iframe ``
* as inline `.....`It will not run JavaScript in an `` element.
## HOWTO
Text support in SVG is a little awkward, so let me explain how I did this.
SVG supports JavaScript. This will run as soon as the image is loaded.
```
```
Next step is to get the various date strings. I'm using the `en-GB` locale as that's where I'm based.
```
<![CDATA[
function init(evt) {
var time = new Date();
var locale = "en-gb";
```I want to display something like "Sunday 25 FEB" - the locale options allow for short and long names. So you could have "SUN 25 February".
```
var DD = time.getDate();
var DDDD = time.toLocaleString(locale, {weekday: "long"});
var MMM = time.toLocaleString(locale, {month: "short"});
```Finally, we need to add the text on to the image.
```
var svgDocument = evt.target.ownerDocument;var dayNode = svgDocument.createTextNode(DD);
svgDocument.getElementById("day").appendChild(dayNode);var weekdayNode = svgDocument.createTextNode(DDDD);
svgDocument.getElementById("weekday").appendChild(weekdayNode);var monthNode = svgDocument.createTextNode(MMM.toUpperCase());
svgDocument.getElementById("month").appendChild(monthNode);
}
]]>
```Text positioning is relatively simplistic. An X & Y position which is anchored to the *bottom* of the text - remember that letters with descenders like `g` will extend beyond the bottom of the Y co-ordinate. This is also where we set the colour of the text, its size, and a font.
A monospace font makes it easier to predict the layout.
``````
A word on anchoring. To centre the anchor, use `style="text-anchor: middle"`
A quick test shows that this works on all desktop browsers and Android browsers. I've not tested on iPhones or anything more exotic.
Enjoy!