Building a fantasy calendar into a wiki page

Frak_Lou_Elmo

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:

https://donjon.bin.sh/fantasy/calendar/

http://www.d20srd.org/fantasy/calendar/

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: 

https://www.worldanvil.com/w/forgotten-realms-28d26d5th29-lethann/a/calendar-of-harptos-article

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!

Frak

 

 

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"}}

thaen

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('http://www.d20srd.org/fantasy/calendar/ma_moonsprite32_32c1r.png';);

 

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:

https://forums.obsidianportal.com/discussion/comment/45550/

 

 

Frak_Lou_Elmo

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

thaen

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

nuadaria

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

Keryth987

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

Frak_Lou_Elmo

If anyone is curious about the further adventures of calendaring, i chickened out of learning css and just made the navigation menu go to a wiki page were i shamelessly plonked down a picture

thaen

Nice solution!

Keryth987

Heres my version of a calendar

The CSS for it and the entire site is available on the campaigns main page too

Frak_Lou_Elmo

damn that's nice! I think I will steal that for my Maztica timeline.

(Also love the chianmail babes  )

GamingMegaverse

As usual @keryth987 you have hit this out of the park- nice work!

twiggyleaf