Building a fantasy calendar into a wiki page


One of my players has gotten lyncanthrope so suddenly moon phases have become relevant :) My CSS skills are non-existant but I am very good at copy/paste and can figure out a bit of html.

I would like to build in a calender with moonphases. Looking around the net there are some pages which do this quite nicely:

I punched some numbers and date names to make it Faerun accurate (see textblock at the bottom of this post for the .json contet for Faerun circa 1488 that can by copy/pasted into either link above) and i hoped that inspecting the source I could just see a bunch of html and copy/paste it into a wiki to replicate the calendar.

Lo and behold, it did not work! (what was I thinking?)

So I figure that CSS is required to make this work, but I cannot identify what. I was hoping someone here could help me out with that because I am guess that the two links above must use the same or similar CSS to get results which look almost identical but for the background. 

Ideally, I would prefer rather than the links above to have something more interactive like this creation:

has anyone done this before in Obsidian Portal? Can anyone help me out in finding the CSS that I could copy/paste from those calender generators, or am I just thinking completely in the wrong direction on how this works?

thanks in advance!




calender text block, which is also saved as .json:

{"year_len":365,"events":1,"n_months":17,"months":["Hammer: Deepwinter","Midwinter Festival","Alturiak: The Claw of Winter","Ches: The Claw of the Sunsets","Tarsakh: The Claw of the Storms","Greengrass: Festival","Mirtul: The Melting","Kythorn: The Time of Flowers","Flamerule: Summertide","Midsummer Festival","Eleasis: Highsun","Eleint: The Fading","Highharvestide Festival","Marpenoth: Leaffall","Uktar: The Rotting","Feast of the Moon Festival","Nightal: The Drawing Down"],"month_len":{"Hammer: Deepwinter":30,"Midwinter Festival":1,"Alturiak: The Claw of Winter":30,"Ches: The Claw of the Sunsets":30,"Tarsakh: The Claw of the Storms":30,"Greengrass: Festival":1,"Mirtul: The Melting":30,"Kythorn: The Time of Flowers":30,"Flamerule: Summertide":30,"Midsummer Festival":1,"Eleasis: Highsun":30,"Eleint: The Fading":30,"Highharvestide Festival":1,"Marpenoth: Leaffall":30,"Uktar: The Rotting":30,"Feast of the Moon Festival":1,"Nightal: The Drawing Down":30},"week_len":10,"weekdays":["Firstday","Secondday","Thirdday","Fourthday","Fifthday","Sixthday","Seventhday","Eighthday","Ninthday","Tenthday"],"n_moons":1,"moons":["Selune"],"lunar_cyc":{"Selune":30.4375},"lunar_shf":{"Selune":6},"year":1488,"first_day":0,"notes":{"1488-1-1":"","1488-1-3":"","1488-1-5":"","1488-1-8":"","1488-1-11":"","1488-1-12":"","1488-1-15":"","1488-1-17":"","1488-1-18":"","1488-1-20":"","1488-1-22":"","1488-1-24":"","1488-1-26":"","1488-1-29":"","1488-3-7":"","1488-3-9":"","1488-3-13":"","1488-3-15":"","1488-3-16":"","1488-3-17":"","1488-3-20":"","1488-3-21":"","1488-3-22":"","1488-3-27":"","1488-4-2":"","1488-4-5":"","1488-4-9":"","1488-4-17":"","1488-4-18":"","1488-4-19":"Spring Equinox","1488-4-23":"","1488-4-25":"","1488-4-26":"","1488-5-4":"","1488-5-6":"","1488-5-7":"","1488-5-9":"","1488-5-11":"","1488-5-12":"","1488-5-14":"","1488-5-15":"","1488-5-19":"","1488-5-23":"","1488-7-7":"","1488-7-10":"","1488-7-16":"","1488-7-18":"","1488-7-20":"","1488-7-21":"","1488-7-23":"","1488-7-24":"","1488-7-25":"","1488-7-26":"","1488-7-29":"","1488-7-30":"","1488-8-4":"","1488-8-8":"","1488-8-10":"","1488-8-11":"","1488-8-14":"","1488-8-17":"","1488-8-24":"","1488-8-27":"","1488-8-29":"","1488-8-30":"","1488-9-2":"","1488-9-6":"","1488-9-11":"","1488-9-16":"","1488-9-18":"","1488-9-19":"","1488-9-21":"","1488-9-22":"","1488-9-26":"","1488-9-27":"","1488-10-1":"","1488-11-1":"","1488-11-4":"","1488-11-10":"","1488-11-14":"","1488-11-18":"","1488-11-24":"","1488-11-28":"","1488-12-4":"","1488-12-12":"","1488-12-14":"","1488-12-19":"","1488-12-21":"Autumn Equinox","1488-12-24":"","1488-12-25":"","1488-12-26":"","1488-13-1":"","1488-14-5":"","1488-14-6":"","1488-14-7":"","1488-14-15":"","1488-14-21":"","1488-14-25":"","1488-14-28":"","1488-14-30":"","1488-15-19":"","1488-15-21":"","1488-15-22":"","1488-15-23":"","1488-15-11":"","1488-15-27":"","1488-15-15":"","1488-15-16":"","1488-15-25":"","1488-15-26":"","1488-15-5":"","1488-17-4":"","1488-17-8":"","1488-17-16":"","1488-17-18":"","1488-17-21":"","1488-17-23":"","1488-17-25":"","1488-17-27":"","1488-17-20":"Winter Solstice","1488-8-20":"Summer Solstice"}}

twitter: @Frak_Lou_Elmo


  • thaen
    Posts: 723

    The CSS from the site is copyrighted, but you can use it as a jumping off point for crafting your own.

    For the d20srd one, you can grab the HTML of the table.  Then go to the "Sources" tab in Chrome developer tools (the panel that opens when you Inspect something), and click on the "style.css".  That has all of the CSS to make the HTML look right.  So you'd then copy that to your Custom CSS to see how it looks.  The moons won't show up because the CSS is using a relative url for the png of the moons.  So you'll need to change that url to be the full url, for example:

    background: url('/fantasy/calendar/ma_moonsprite32_32c1r.png');

    becomes ...

    background: url('';);


    At that point you should have something close to what you see on the original site, and can tweak/alter/change from there.

    Feel free to ask if you have any questions or I'm not making sense.


    There was a discussion of in game calendars a bit back that might also be helpful:



    Obsidian Portal Developer

  • Frak_Lou_Elmo
    Posts: 120

    thanks! I guess now begins the painful journey of becoming an amateur programmer! lol

    twitter: @Frak_Lou_Elmo

  • thaen
    Posts: 723

    Ha!  Feel free to post here for help.  Always happy to help!

    Obsidian Portal Developer

  • nuadaria
    Posts: 19

    @Frak_Lou_Elmo If you're in the discord, I have some voodoo that might help you with some calendar magics.

  • Keryth987
    Posts: 954

    @Nuardaria...dont get in trouble spreading that voodoo you do around :)

Sign In or Register to comment.

January 2022
Lakes of Blood and Ash

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!