Need help with Dynamic-SVG-Calendar-Icon?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
edent

Description

Here it is, an SVG calendar which always display's today's date.

138 Stars 24 Forks MIT License 10 Commits 0 Opened issues

Services available

Need anything else?

This SVG always shows today's date

Originally posted on my blog.

For my contact page, 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)

The background image is derived from the Twitter TweMoji Calendar icon - CC-BY.

Buy me a coffee

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.
```

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!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.