Home About Contact

Calender Layout📅

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here

pseudo-elements(like ::before, ::after)
you have to know transform property.
position property in CSS

A calender layout is a visual representation of dates, often used to display manage time-related information. It's commonly used in applications and websites for scheduling, event planning, or simply showing the current month's date.

AUGUST

2024

❮

❯

HTML


<div class="showcontent">

    <header>
        <div class="month-year">
            <div>AUGUST</div>
            <div>2024</div>
        </div>
        <div class="leftarrow">❮</div>
        <div class="rightarrow">❯</div>

    </header>
    
    <div class="weekdays">
        <div>Mo</div>
        <div>Tu</div>
        <div>We</div>
        <div>Th</div>
        <div>Fr</div>
        <div>Sa</div>
        <div>Su</div>
    </div>

    <div class="days">

    </div>

    
</div>

JavaScript


for(let i=1;i<=31;i++){
    let div=document.createElement("DIV");
    div.innerText=i;
    document.getElementsByClassName("days")[0].appendChild(div);
}

let active = document.querySelectorAll(".days div");
active[27].classList.add("today");

const content = active[27].innerText;

// Set a custom data attribute (e.g., data-content) to use in CSS
document.querySelector(".today").setAttribute("data-content", content);

CSS


.showcontent header{
    background-color: dodgerblue;
    width: 100%;
    height: 150px;
    position: relative;
    color: white;
    font-size: 20px;
}
.month-year{
    width: inherit;
    height: inherit;
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}
.leftarrow,.rightarrow{
    position: absolute;
    padding: 4px;
    top: 50%;
    transform: translateY(-50%);
}
.rightarrow{
    right: 0;
}
.weekdays{
    display: flex;
    background-color: #a39595;
    color: black;
    padding: 5px;
}
.weekdays div{
    width: calc(100% / 7);
    display: flex;
    align-items: center;
    justify-content: center;
}
.days{
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    background-color: white;
}

.days div{
    width: calc(100% / 7);
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.days .today::before{
    content:attr(data-content);

    position: absolute;
    height: 30px;
    width: 30px;
    background-color:#04aa6a;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
}

Application🌐

Personal Management

Scheduling appointments, reminders and events.

Education

Organizing academic schedules, exams, and schools events.

Finance

Tracking budgets, tax deadlines, and investment timing

Government & Religious

Defining holidays, elections, prayer times and public services.

Tech/Product Development

Planning launches, software releases, and development timelines.

new Date()

Returns a Date object with the current date and time based on the system's clock.
This create a date object represent the current date and time.

toString()

The toString() method converts any data type into a string. Syntax: varname.toString(),

padStart()

It is used to JS to pad the current string with another string untill the resulting string reaches the given length.
Example: str.padStart(len,char or string);

setInterval()

This method in JS repeatedly calls a function or executes a code with a fixed time delay between each call.

setTimeout()

This method is used to execute a function or code snippet after a specified delay in milliseconds.

date.get....()

getDate(): Returns the day of the month(1-31)
getMonth(): Returns the month(0-11)
getFullYear(): Returns the year(4 digit year)
getDay(): Returns the day of the week(0-6)
getHours(): Returns the hours(0-23)
getMinutes(): Returns the minites(0-59)
getSeconds(): Returns the seconds(0-59)
getMilliseconds(): Returns the milliseconds(0-999)
getTime(): Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC

Projects