Calendar app from scratch

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

28 Replies

13eck•15mo 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

ZomaTheMasterOfDisaster•15mo ago

is it really complicated?

13eck•15mo 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•15mo ago

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

ZomaTheMasterOfDisaster•15mo ago

wow how you handle leap years, gregoian vs julian ?

13eck•15mo 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?

ZomaTheMasterOfDisaster•15mo ago

I think some countries use julian

13eck•15mo 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

ZomaTheMasterOfDisaster•15mo ago

like that layout looks pretty involved id get stuck

13eck•15mo ago

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

ZomaTheMasterOfDisaster•15mo ago

I was using this https://fullcalendar.io

13eck•15mo ago

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

ZomaTheMasterOfDisaster•15mo ago

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

13eck•15mo ago

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

ZomaTheMasterOfDisaster•15mo ago

hmm so I was thinking of trying it with pico css

13eck•15mo ago

I don't know what pico CSS is

ZomaTheMasterOfDisaster•15mo ago

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

13eck•15mo ago

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

13eck•15mo ago

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

Tenor

ZomaTheMasterOfDisaster•15mo 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•15mo 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

ZomaTheMasterOfDisaster•15mo 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•15mo 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)

ZomaTheMasterOfDisaster•15mo ago

it was a project suggestion on youtube for a backend project

13eck•15mo ago

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

ZomaTheMasterOfDisaster•15mo ago

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

13eck•15mo 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

ZomaTheMasterOfDisaster•15mo 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