
I'm trying to make a very simple calendar generated inside of an API and have it output to the chat using HTML.Unfortunately I know next to nothing about HTML and less about CSS so me stumbling around isn't accomplishing anything because I am following steps I think should work, but aren't and I don't know enough to know why.
Yes, the month is supposed to be five six day weeks long.
/**
* Day(integer) = Day of the month. Ex 22
* DOY(integer) = Day of the year. Ex 125
* Month(integer) = Month of the year. Ex 5
*/
function Show_Calendar(Day, DOY, Month){
var dom = 1;
var listhtml =
'<html lang="en" dir="ltr">'
+'<head>'
+'<meta charset="utf-8">'
+'<title></title>'
+'<style>'
+'#calendar-table {'
+'border: 1px solid black;'
+'}'
+'</style>'
+'</head>'
+'<body>'
+'<table width="90%" id="calendar-table">'
+'<thead>'
+ '<tr>'
+ '<td colspan="6" align="center">'+MasterTable.Months[Month]+'</td>'
+ '</tr>'
+ '<tr>'
+ '<th>Free</th><th>Firs</th><th>Sec</th><th>Mid</th><th>Four</th><th>Las</th>'
+ '</tr>'
+'</thead>'
+'<tbody align="center"'
for(var i=1; i<=5; i++){
listhtml += '<tr>';
for(var d=1; d<=6; d++){
listhtml += '<td>'+dom+'</td>';
dom++;
};
listhtml += '</tr>'
};
listhtml += '</tbody>'
+'<tfoot>'
+'</tfoot>'
+'</table>'
+'</body>'
+'</html>'
//log(listhtml);
sendChat("System", "/w gm " + listhtml);
};
This will generate and output a table like such.
Now I'm trying to use CSS to dress it up; add borders, highlight the current day in red, highlight monthly events in blue, etc. That should all be relatively simple via a few if handlers. But the catch is I can't even figure out how to use the CSS in roll20's API and get it to put a border on this thing. When I try it outside using Atom I can at least get a slightly different version of this code to produce this:
What am I doing wrong inside roll20 that is making this not work? Does CSS just outright not work, or does something need to be formatted differently? Also, any general HTML or CSS advice would be appreciated.