Calendar collection view #369

MichaelCasaDev · 2022-09-08T15:31:02Z

New Features

Sun-Sat or Mon-Sun week view
Show or hide calendar controls (showCalendarControls: boolean)
Decide to start the weeks on Monday or Sunday (startWeekOnMonday: boolean )
Automatic query from Notion's calendar collection
Automatic full-width for database pages with calendar collection views

Description

Adding full support to the Notion calendar collection view, which lacks support in react-notion-x

Notion Test Page ID

- Added calendar view to Collection view exports - Base calendar, CSS inline from Notion - Pages render in the correct days - Sun-Sat week view

vercel · 2022-09-08T15:31:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-notion-x	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 1, 2023 4:41pm
react-notion-x-minimal-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 1, 2023 4:41pm

- New custom Collection card for the calendar view - Show correctly the month

Improved card title, now more like the Notion one

- Now calendar controls (next month, prev month and today) works - Correctly mark current month day numbers - Display the current month correctly (top left) - Display the month in the calendar view in the first day of each month - Show full month in every view - Edit text component to show long months names - New method "getPagePropertyFromId" to retrive a page property by a given property ID, used to get the query date used by Notion calendar's view

New property for the renderer "showCalendarControls" to show or not the calendar controls (next month, prev month, today)˙

TODO: add calendar dark mode theme

- Added dark-mode css for the new calendar view - Updated background of dark-mode to the new Notion one - Moved hover states from React to CSS - Removed all dynamic styles and used with classes

vercel · 2022-09-11T09:21:33Z

Deployment failed with the following error:

The most recent charge for your active payment method has failed. Please update it here: https://vercel.com/teams/saasify/settings/billing.

Fix linked calendars db errors

Removed unused class

Full width for full page collection view

- Added the ability to start weeks on Monday via `startWeekOnMonday` - Made proper icons components for calendar controls

MichaelCasaDev · 2022-09-23T14:18:22Z

@transitive-bullshit @normdoow

Everything on my to-do list is checked, and ready for PR review!
With this PR, calendar collection view is fully integrated into react-notion-x.

MichaelCasaDev · 2023-02-03T21:29:05Z

Hey @transitive-bullshit and @normdoow I have been away for a long time from this repo and from this PR but I'm happy to say that I have made some new commits that fix your reviews and also set some features:

Now support all types of page icons
Can have multiple blocks per day
New method to generate weeks in month (simpler and faster)

Edit: It doesn't currently support date range and include time functions of Notion, it wouldn't render the page block or the displayed data will be something strange.

The today date indicator now check also the correct now year

kantorcodes · 2023-09-22T12:37:42Z

Is there anything outstanding to merge this one in?

- More comments - Fixed first day of month red background circle to not show the month name (it's shown up in the calendar controls) WIP: The October 2023 has a strange bug (probably in the algo) that shows the 1st October as Saturday and not Sunday (only on the view that has Sunday as first week day (by using `startWeekOnMonday` it doesn't appear))

MichaelCasaDev · 2023-10-01T14:41:07Z

Is there anything outstanding to merge this one in?

Hey @kantorcodes thanks for commenting, I've to say that I've let this PR open and didn't actually take care of.
The calendar view is one of the most complex that Notion has, and for the moment it's working very well on my test deployment. I will let this be reviewed in some weeks (at the moment it doesn't support all the features that it has on Notion or on Super.so but it's working quite well)

More infos about the calendar view and what it can handle and what it can't

kantorcodes · 2023-10-05T22:31:58Z

Is there anything outstanding to merge this one in?

Hey @kantorcodes thanks for commenting, I've to say that I've let this PR open and didn't actually take care of. The calendar view is one of the most complex that Notion has, and for the moment it's working very well on my test deployment. I will let this be reviewed in some weeks (at the moment it doesn't support all the features that it has on Notion or on Super.so but it's working quite well)

Thanks @MichaelCasaDev it'll be suburb to have this added in :)

kantorcodes · 2023-10-07T19:10:34Z

cc @transitive-bullshit

kantorcodes · 2023-10-29T12:18:30Z

Hey @transitive-bullshit would love to see this one approved! :)

jigs1996 · 2024-06-10T11:57:58Z

Hey @transitive-bullshit Could you pelase merge this one this is the 1 which remain from notion block

WIP: Calendar view basis

4660dc7

- Added calendar view to Collection view exports - Base calendar, CSS inline from Notion - Pages render in the correct days - Sun-Sat week view

vercel bot deployed to Preview – react-notion-x-minimal-demo September 8, 2022 15:35 View deployment

vercel bot had a problem deploying to Preview – react-notion-x September 8, 2022 15:35 Failure

Update collection-view-calendar.tsx

049bf1a

- New custom Collection card for the calendar view - Show correctly the month

vercel bot deployed to Preview – react-notion-x-minimal-demo September 8, 2022 15:45 View deployment

vercel bot deployed to Preview – react-notion-x September 8, 2022 15:48 View deployment

MichaelCasaDev added 2 commits September 9, 2022 09:37

Update collection-view-calendar.tsx

5347db8

Improved card title, now more like the Notion one

MichaelCasaDev changed the title ~~WIP: Calendar view basis~~ WIP: Calendar collection view Sep 9, 2022

vercel bot deployed to Preview – react-notion-x September 9, 2022 08:56 View deployment

vercel bot deployed to Preview – react-notion-x-minimal-demo September 9, 2022 08:58 View deployment

Hide calendar controls

4d1bb6f

New property for the renderer "showCalendarControls" to show or not the calendar controls (next month, prev month, today)˙

vercel bot deployed to Preview – react-notion-x September 9, 2022 09:12 View deployment

vercel bot deployed to Preview – react-notion-x-minimal-demo September 9, 2022 09:14 View deployment

Moved style to CSS

a858ae5

TODO: add calendar dark mode theme

vercel bot deployed to Preview – react-notion-x-minimal-demo September 9, 2022 09:49 View deployment

vercel bot had a problem deploying to Preview – react-notion-x September 9, 2022 09:52 Failure

Added dark-mode css

55a9051

- Added dark-mode css for the new calendar view - Updated background of dark-mode to the new Notion one - Moved hover states from React to CSS - Removed all dynamic styles and used with classes

MichaelCasaDev added 6 commits September 11, 2022 11:23

Fix today box CSS

2d89f18

Update styles.css

f0ffd87

Update collection-view-calendar.tsx

d129da0

Fix linked calendars db errors

Update styles.css

9cdb9c5

Removed unused class

Update collection-view-calendar.tsx

5045948

Full width for full page collection view

Now can start weeks on monday

4bd0b11

- Added the ability to start weeks on Monday via `startWeekOnMonday` - Made proper icons components for calendar controls

MichaelCasaDev changed the title ~~WIP: Calendar collection view~~ Calendar collection view Sep 23, 2022

MichaelCasaDev marked this pull request as ready for review September 23, 2022 14:11

Update readme.md

78e122f

Run Eslint and Prettier

bbec671

MichaelCasaDev marked this pull request as ready for review February 3, 2023 21:25

vercel bot deployed to Preview – react-notion-x February 3, 2023 21:26 View deployment

vercel bot deployed to Preview – react-notion-x-minimal-demo February 3, 2023 21:28 View deployment

MichaelCasaDev mentioned this pull request Feb 5, 2023

About Calendar view wIs there any progress? #413

Open

MichaelCasaDev requested a review from transitive-bullshit February 5, 2023 20:15

Fix today date indicator

440c985

The today date indicator now check also the correct now year

vercel bot deployed to Preview – react-notion-x February 6, 2023 08:09 View deployment

vercel bot deployed to Preview – react-notion-x-minimal-demo February 6, 2023 08:10 View deployment

MichaelCasaDev marked this pull request as draft February 7, 2023 12:26

vercel bot deployed to Preview – react-notion-x-minimal-demo October 1, 2023 14:40 View deployment

vercel bot deployed to Preview – react-notion-x October 1, 2023 14:42 View deployment

Update readme.md

0f9858d

More infos about the calendar view and what it can handle and what it can't

vercel bot deployed to Preview – react-notion-x October 1, 2023 14:52 View deployment

vercel bot deployed to Preview – react-notion-x-minimal-demo October 1, 2023 14:54 View deployment

MichaelCasaDev marked this pull request as ready for review October 1, 2023 14:57

Merge branch 'master' into collection-view-calendar

1e6d33b

vercel bot had a problem deploying to Preview – react-notion-x-minimal-demo October 1, 2023 14:59 Failure

vercel bot had a problem deploying to Preview – react-notion-x October 1, 2023 15:01 Failure

Fix for PR checks

e6e62b6

vercel bot deployed to Preview – react-notion-x October 1, 2023 16:39 View deployment

vercel bot deployed to Preview – react-notion-x-minimal-demo October 1, 2023 16:41 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Calendar collection view #369

Calendar collection view #369

MichaelCasaDev commented Sep 8, 2022 •

edited

Loading

vercel bot commented Sep 8, 2022 •

edited

Loading

vercel bot commented Sep 11, 2022

MichaelCasaDev commented Sep 23, 2022 •

edited

Loading

MichaelCasaDev commented Feb 3, 2023 •

edited

Loading

kantorcodes commented Sep 22, 2023

MichaelCasaDev commented Oct 1, 2023

kantorcodes commented Oct 5, 2023

kantorcodes commented Oct 7, 2023

kantorcodes commented Oct 29, 2023

jigs1996 commented Jun 10, 2024

Calendar collection view #369

Are you sure you want to change the base?

Calendar collection view #369

Conversation

MichaelCasaDev commented Sep 8, 2022 • edited Loading

New Features

Description

Notion Test Page ID

vercel bot commented Sep 8, 2022 • edited Loading

vercel bot commented Sep 11, 2022

MichaelCasaDev commented Sep 23, 2022 • edited Loading

MichaelCasaDev commented Feb 3, 2023 • edited Loading

kantorcodes commented Sep 22, 2023

MichaelCasaDev commented Oct 1, 2023

kantorcodes commented Oct 5, 2023

kantorcodes commented Oct 7, 2023

kantorcodes commented Oct 29, 2023

jigs1996 commented Jun 10, 2024

MichaelCasaDev commented Sep 8, 2022 •

edited

Loading

vercel bot commented Sep 8, 2022 •

edited

Loading

MichaelCasaDev commented Sep 23, 2022 •

edited

Loading

MichaelCasaDev commented Feb 3, 2023 •

edited

Loading