Calendar app from scratch

How would build a calendar layout and populate it from scratch?

28 Replies

13eck•2y ago

Your best bet is to find an existing calendar app and use it as a reference point. From there, do your best to replicate it

MDOP•2y ago

is it really complicated?

13eck•2y ago

For example, this is my Proton calendar for this month. On the left is the new event button, the "month-at-a-glance" and a list of calendars. The right side is the actual calendar days with a list of activities. There's the prev/next buttons to change the current month and some buttons to change from month-view to week- and day-view

13eck•2y ago

The majority of it is going to be the main calendar view, which is a pretty easy CSS grid section

MDOP•2y ago

wow how you handle leap years, gregoian vs julian ?

13eck•2y ago

Leap year is easy fairly easy. The JS Date object should handle that for you But why on earth would you want to have a Julian calendar?

MDOP•2y ago

I think some countries use julian

13eck•2y ago

Start simple (and useful). Less is more for almost all projects. A limited but functional calendar is infinitely times more useful than an idea with more uses

MDOP•2y ago

like that layout looks pretty involved id get stuck

13eck•2y ago

Start simple: only do the month view It's a 7-column grid One column for each day of the week

MDOP•2y ago

I was using this https://fullcalendar.io

13eck•2y ago

That's…that's not "from scratch" 🤣

MDOP•2y ago

yeah that was due to not knowing how to build the structure myself I just spin my wheels more than achieve anything

13eck•2y ago

The structure is the easiest part. 7 columns with enough rows to handle all the days in that month

MDOP•2y ago

hmm so I was thinking of trying it with pico css

13eck•2y ago

I don't know what pico CSS is

MDOP•2y ago

I probably should of tried a calendar layout with html and such first then moved it into laravel

13eck•2y ago

Yes, you should use HTML for the content and CSS for the layout

13eck•2y ago

[this is the way] https://tenor.com/bpEmY.gif

Tenor

MDOP•2y ago

maybe I should do a separate project on just making the layout and then combine it with the php when it's done? seems like design and such is gonna kill any project I do

13eck•2y ago

I'm not a fan of PHP, as it's sorta HTML sorta CSS and sorta JS. So I would suggest starting with just HTML, CSS, and JS to make the calendar page. Then you can use your backend of choice to do things like database, login, etc

MDOP•2y ago

I know b1 and erick are getting tired of me so I could end up leaving the server I was mainly trying to focus on backend side but might not get me anywhere

13eck•2y ago

If you want to focus on back end stuff then why start with a front-end heavy project like this? Do a few API services first that don't require a front end (or can have a super basic front-end like displaying database info in a table and that's it)

MDOP•2y ago

it was a project suggestion on youtube for a backend project

13eck•2y ago

A calendar app was suggested as a back-end project? What YT channel said that?

MDOP•2y ago

a few them actually *of along with api and crud based stuff and bots

13eck•2y ago

Really? Interesting. But I think that we should take this to DMs since it's not really a FE question at this point :p

MDOP•2y ago

I got this going

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar Page</title>
</head>
<body>
    <header>
        <button>New event</button>
        <button>Today</button>
        <button>&lt;</button>
        <button>&gt;</button>
        <div></div>
        <div></div>
        <div>
            <button>Day</button>
            <button>Week</button>
            <button>Month</button>
        </div>
    </header>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar Page</title>
</head>
<body>
    <header>
        <button>New event</button>
        <button>Today</button>
        <button>&lt;</button>
        <button>&gt;</button>
        <div></div>
        <div></div>
        <div>
            <button>Day</button>
            <button>Week</button>
            <button>Month</button>
        </div>
    </header>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

Gaming

Programming

Calendar app from scratch