Message from JavaScript discussions

August 2020

β€” Hello everyone..

I'm a new member.


I got this screenshot from an app I saw,
I've been trying to replicate this. Please help.

How do I display accurate dates under each day and also highlight the current date?.

β€” Css?

β€” πŸ˜

β€” No, it's not just CSS.
It displays current days and dates


const containerQuery = '#' + containerID
const container = document.querySelector(containerQuery);

const style = `
.day {
display: inline-block;
background-color: white;
color: #ccc;
text-align: center;
width: 100px;
height: 100px;
.day-active {
background-color: rebeccapurple;
color: white;

.day .day-week {
font-size: 0.9em;

.day .day-num {
font-size: 1.2em;

const s = document.createElement('style');

s.innerHTML = style;


* type {(day: number | string, week: "mon" | "tue" | "wed" | "thu" | "sat" | "sun", isActive?: boolean) => HTMLElement}
const dateFactory = (day, week, isActive = false) => {
const ret = document.createElement('div';
ret.classList.add('day', isActive ? 'day-active' : undefined);
const inWeek = document.createElement('span');
const inNum = document.createElement('span');

return ret;

function days(startNum, startWeek, container, amount, activeIndex) {
const days = ['mon', 'tue', 'wed', 'thu', 'sat', 'sun'];
if (days.indexOf(startWeek) === -1)
throw new Error();
for (let i = 0; i < amount, i++) {
const e = dateFactory (startNum + i, days[(days.indexOf(startWeek) + i) % days.length], i === activeIndex);

function week(start, activeDay) {
days(start, 'mon', container, 7, activeDay)

week(24, 4);

Message permanent page

β€” Obviously just a mock, a lot of tests are missing. If it doesn't work, maybe it's appendChild instead of appendChildren, can't remember

Message permanent page

β€” Alright. Thanks so much.. I appreciate..
I'll give you feedback once I try it..

β€” You learn much more if you try to solve such a problem yourself

β€” And only ask here if you don't know the JS way to to solve a specific problem in you code

β€” Https://

β€” Djezuz man, why not codepen something, i bet you had some similar task before🀀