Kevin Powell - Community•6mo ago

Ideas required

Hiiiii. I started a personal project. Where I want to show data on a monthly view like the image attached.What I want to do is show each people's info on the monthly calendar in a row according to the dates. I am posting data on the DB but how do I show it like this. Looking for ideas

11 Replies

clevermissfox•6mo ago

From the look of the screenshot you'll probably need a <table> element and to fetch your data from a db or your own api

Chris Bolson•6mo ago

I would have thought that this question really belongs in #back-end . No doubt any suggestions that you get will depend on what you are using to access the DB (eg. PHP, JS etc.)

SavioOP•6mo ago

Make the table accordingly right? Ohhhhh I didn't really realize

clevermissfox•6mo ago

I wouldn’t manually put that data in but style it accordingly sure if that’s what you’re going for.

SavioOP•6mo ago

I think I am not going to put it manually either. Just gonna put into arrays and map But thing I am confused about is how do I get individual datas to show up and specially with the dates Do I need to build a calendar for that?

Chris Bolson•6mo ago

basically, yes. In very broad terms and, assuming you are only showing a single month per view, you will need to use your choosen language (eg PHP, JS) to do something like this: - get number of days in month (take into account the year for leap years) - get first day (1) week day (these are normally defined from 0=Sunday to 6=Saturday) - Create a loop from 1 to the last date in the month (28, 29, 20 or 31), for each date add the weekday (either calculated from the date or based on a counter starting from the first day of the month) and finally display the date data (if defined). I personally would get the current month data beforehand and store it in an array which can then be accessed within the loops. An alternative method would be to check each date within the loop however bear in mind that that would mean up to 31 queries per calendar month so is probably not the best idea.

SavioOP•6mo ago

Ahhhh yes Definitely something like that

MarkBoots•6mo ago

to not have to worry about leap years etc, you can just use the Date constructor and with the .toLocaleString method you can easily get the weekdays in string format something like this

const month = 0;
const year = 2024;

const daysInMonth = new Date(year, month, 0).getDate();

for(let i = 1; i <= daysInMonth; i++){
  const d = new Date(year, month, i);
  const dateStr = `${i}-${d.toLocaleString('en', {month: 'short'} )}`
  const weekdayStr = d.toLocaleString('en', { weekday: 'short'} ).toUpperCase();
  
  console.log({dateStr, weekdayStr})
 
  /*
    {
      "dateStr": "31-Jan",
      "weekdayStr": "WED"
    }
  */
}

const month = 0;
const year = 2024;

const daysInMonth = new Date(year, month, 0).getDate();

for(let i = 1; i <= daysInMonth; i++){
  const d = new Date(year, month, i);
  const dateStr = `${i}-${d.toLocaleString('en', {month: 'short'} )}`
  const weekdayStr = d.toLocaleString('en', { weekday: 'short'} ).toUpperCase();
  
  console.log({dateStr, weekdayStr})
 
  /*
    {
      "dateStr": "31-Jan",
      "weekdayStr": "WED"
    }
  */
}

Chris Bolson•6mo ago

exactly, I only mentioned leap years to explain why defining the year is important.

MarkBoots•6mo ago

ah okay i see.

SavioOP•5mo ago

Ahhhh thanks a bunchhhh This really helps

Gaming

Programming

Ideas required