DEV Community

Angular: How to build a full screen calendar like Outlook

Ricky Stam on May 07, 2020

In an Angular project a while back I needed to display a full screen calendar like the one in outlook. So as a good lazy developer I start looking ...

Read full post

bryanNativel • Jul 11 '22

Thanks for your solution

Genji • May 7 '20

Good job!

Ricky Stam • May 7 '20

Thank you :)

herrigor • May 9 '20

This piece of code here is so cool

weekDays.push(days)
if (++index % chunkSize === 0) {
calendarDays.push(weekDays);
weekDays = [];
}

Ricky Stam • May 9 '20

Thank you herrigor, I hope you find it useful :)

Kahiko • Sep 3 '23

Thank you for your post it was very helpful. I added a method to determine the exact number of days for the number day in the calendar instead of 42 in generateCalendarDays and thought I would pass it on:
/**

Calculates the number of calendar days in a given month. *
@param {Date} day - The date used to determine the month.
@return {number} The number of calendar days in the specified month. */ private getNumberOfCalendarDays(day: Date): number { const mYear = day.getFullYear(); const mMonth = day.getMonth()+ 1; const mFristDay = new Date(mYear, mMonth, 1).getDay(); const mLastDay = new Date(mYear, mMonth + 1, 0).getDay(); const mDaysFromLastMonth = mFristDay - 1 == -1 ? 6 : mFristDay - 1; const mDaysFromNextMonth = 6 - mLastDay == -1 ? 0 : 6 - mLastDay; const mDaysInMonth = new Date(mYear, mMonth + 1, 0).getDate(); return (mDaysFromLastMonth + mDaysInMonth + mDaysFromNextMonth) + 1; }

Don Morris • May 8 '20

Looks good man

Ricky Stam • May 8 '20

Thank you Don, glad you like it!

Santosh Yadav • May 12 '20

This is amazing 🎉🎉

This Dot Media • May 8 '20

You did great Ricky!

Ricky Stam • May 8 '20

Many thanks :)

Lars Rye Jeppesen • May 9 '20

Very nice

surajKurade • May 9 '20

Hi Ricky. It's awesome. Just wanted to know why we use map instead of foreach in pipe. Am new in angular

Ricky Stam • May 9 '20 • Edited

Hi surajKurade!

For this example it wouldn't make any difference to be honest. Map and ForEach both iterate the array and apply the given function, their difference is that ForEach doesn't return a value just iterates the array and executes the given function on the elements but map will return a new array with the modified array.

Usually people are using map when they want to achieve immutability (they don't want to modify their array but to return a modified copy)

Example:

let nums = [1,2,3];
let result = nums.forEach(n => n*2); // here the result variable will be undefined
let result = nums.map(n => n*2) // here the result variable will be [2, 4, 6]

Hope this helps!

surajKurade • May 9 '20

Thanks Ricky 👍

pkhussain • Jul 8 '21

Hi Ricky, Can we create room and meeting booking in your good calendar ?

Ricky Stam • Jul 9 '21

Hi @pkhussain sure you can use it as you like :) Just keep in mind that this is just a POC and might have bugs, I've never tested it thoroughly, so use with causion!

hari govind yadav • Mar 11 '21

Great help!! Thanks :-)

Nadia Gizdova • May 31 '21 • Edited

Hi there! I'm looking at your implementation but It currently seems like the left and right arrows are skipping/incorrectly setting the months. Do you know why this might be happening?

bizzareadventure • Dec 19 '23

Thank you for the code,

Is there any hint to like Monday, Tuesday, etc it in datatable?

I have difficulty to match the day just like on the calendar