Kevin Powell - Community•2y ago

Schedule website

Im building some sort of a scheduling page where one is supposed to be able to schedule parts of the day. Im very new to programming and html/css. What I have so far is just sort of the design, https://i.imgur.com/QzIMEVl.png. Would this be done in HTML or would i generate this from something like a python function from my backend? I assume there's a way for me to get all the data inside the boxes from python.

Imgur

17 Replies

d0kefishOP•2y ago

What is the "smart" way to do this?

~MARSMAN~•2y ago

You can use css grid to create this layout

~MARSMAN~•2y ago

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

CSS Grid Layout - CSS: Cascading Style Sheets | MDN

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

~MARSMAN~•2y ago

https://codepen.io/ThatMartianDev/pen/VwBOLOV

MarsMan

CodePen

VwBOLOV

...

~MARSMAN~•2y ago

Hope this gives you an idea of how to achieve it

d0kefishOP•2y ago

The above picture is of a grid I created miraculously, im more worried about the functionality but maby I should just get on it and start trying.

~MARSMAN~•2y ago

So you want to bring the current month days and date from python and display it on the grid right? What framework are you using? Or by functionality do you mean something else?

d0kefishOP•2y ago

The idea is to use Django Am I right to assume I can manipulate the CSS or whatever is needed from python?

~MARSMAN~•2y ago

I use flask, and you can display data from both flaks and Django using jinja templating. CSS you use it for styling only. HTML is where you add your data. You can manipulate the data in HTML from your python yes, but i don't believe there's anyway to manipulate CSS.

d0kefishOP•2y ago

Okey I think I understand how to add data such as dates etc. But I dont understand how I would make it lets say bright if its todays date. Or the greyed out ones.

~MARSMAN~•2y ago

For example i have a list of items that stored in a database in my backend and i wanna display it on a page, i can use something like this with Jinja templating in HTML.

{% for item in list %}
   <div>{{ item.data }}</div>
{% endfor %}

{% for item in list %}
   <div>{{ item.data }}</div>
{% endfor %}

And now it will iterate over your list and display each item in that div. How do you pass the list into HTML ? Add it when you use render_temolate.

return render_template("page.html", list=yourlist)

return render_template("page.html", list=yourlist)

You can use if statements too inside the for loop in your HTML For example

{% if item.date == you_condition %}
Apply what you want to it here, like:
<div class="darken">{{ item }}</div>
{% endif %}

{% if item.date == you_condition %}
Apply what you want to it here, like:
<div class="darken">{{ item }}</div>
{% endif %}

If this item meets your condition add a special class to it, like "darken" to give it a dark background from your css Is this what you're looking for?

d0kefishOP•2y ago

Yes! Thank you I think I just need to get my backend set up so I can start doing tests. Im trying to figure out in what end to start.

~MARSMAN~•2y ago

Cool You will need to use datetime module to get the current month dates and days and store it in a variable, but I believe there's no direct way to get the whole month's data. You might need to Google around and read the docs. Otherwise that's how you can manipulate it, add a for loop, throw if statements as you need 👍 If you have any further questions feel free to ask 👍 Django has its own built-in templating system you might wanna look it up Django template language

d0kefishOP•2y ago

Yeah, I've done sort of one tutorial page with Django so far, and im probably taking water over my head. What gets confusing for me is that the tutorial uses a static HTML/CSS template So I figured I'd need to create that before I start with the acutal page, but maby that does not really matter.

~MARSMAN~•2y ago

Ok I understand, it's better to take things slowly then 😊 Get grasp of Django basics and then move into templating stuff. Otherwise it's pretty much straightforward.

d0kefishOP•2y ago

Is there any nifty tool to plan a site? I mean paint will probably do the work.

Jochem•2y ago

adobe's got figma (free for now) and there's an open source alternative penpot. It's more of a design tool, but you can use both to block out elements as well

Gaming

Programming

Schedule website