Calendar collection view

packages/notion-types/src/collection-view.ts

@@ -119,8 +119,8 @@ export interface BoardCollectionView extends BaseCollectionView {
 
 export interface CalendarCollectionView extends BaseCollectionView {
   type: 'calendar'
-
-  // TODO
+  visible: boolean
+  property?: PropertyID
 }
 
 export type CollectionView =

packages/notion-utils/src/get-page-property-from-id.ts

@@ -0,0 +1,89 @@
+import { Block, DateFormat, ExtendedRecordMap } from 'notion-types'
+
+import { getTextContent } from './get-text-content'
+
+/**
+ * Gets the value of a collection property for a given page (collection item).
+ *
+ * @param propertyId property id
+ * @param block Page block, often be first block in blockMap
+ * @param recordMap
+ * @returns - The return value types will follow the following principles:
+ *  1. if property is date type, it will return `number` or `number[]`(depends on `End Date` switch)
+ *  2. property is text-like will return `string`
+ *  3. multi select property will return `string[]`
+ *  4. checkbox property return `boolean`
+ * @todo complete all no-text property type
+ */
+export function getPagePropertyFromId<
+  T = string | number | boolean | string[] | number[]
+>(propertyId: string, block: Block, recordMap: ExtendedRecordMap): T
+export function getPagePropertyFromId(
+  propertyId: string,
+  block: Block,
+  recordMap: ExtendedRecordMap
+) {
+  try {
+    if (!block.properties || !Object.keys(recordMap.collection)) {
+      // console.warn(
+      //   `block ${block.id} has no properties or this recordMap has no collection record`
+      // )
+      return null
+    }
+
+    const collection = recordMap.collection[block.parent_id]?.value
+
+    if (collection) {
+      if (!propertyId) {
+        return null
+      }
+
+      const { type } = collection.schema[propertyId]
+      const content = getTextContent(block.properties[propertyId])
+
+      switch (type) {
+        case 'created_time':
+          return block.created_time
+
+        case 'multi_select':
+          return content.split(',')
+
+        case 'date': {
+          const property = block.properties[propertyId] as [['‣', [DateFormat]]]
+          const formatDate = property[0][1][0][1]
+
+          if (formatDate.type == 'datetime') {
+            return new Date(
+              `${formatDate.start_date} ${formatDate.start_time}`
+            ).getTime()
+          } else if (formatDate.type == 'date') {
+            return new Date(formatDate.start_date).getTime()
+          } else if (formatDate.type == 'datetimerange') {
+            const { start_date, start_time, end_date, end_time } = formatDate
+            const startTime = new Date(`${start_date} ${start_time}`).getTime()
+            const endTime = new Date(`${end_date} ${end_time}`).getTime()
+            return [startTime, endTime]
+          } else {
+            const startTime = new Date(formatDate.start_date).getTime()
+            const endTime = new Date(formatDate.end_date).getTime()
+            return [startTime, endTime]
+          }
+        }
+
+        case 'checkbox':
+          return content == 'Yes'
+
+        case 'last_edited_time':
+          return block.last_edited_time
+
+        default:
+          return content
+      }
+    }
+  } catch {
+    // ensure that no matter what, we don't throw errors because of an unexpected
+    // collection data format
+  }
+
+  return null
+}

packages/notion-utils/src/index.ts

@@ -4,6 +4,7 @@ export * from './get-block-icon'
 export * from './get-block-collection-id'
 export * from './get-page-title'
 export * from './get-page-property'
+export * from './get-page-property-from-id'
 export * from './get-date-value'
 export * from './get-block-parent-page'
 export * from './get-page-table-of-contents'

packages/react-notion-x/src/context.tsx

@@ -32,6 +32,8 @@ export interface NotionContext {
   previewImages: boolean
   forceCustomImages: boolean
   showCollectionViewDropdown: boolean
+  showCalendarControls: boolean
+  startWeekOnMonday: boolean
   showTableOfContents: boolean
   minTableOfContentsItems: number
   linkTableTitleProperties: boolean
@@ -66,6 +68,8 @@ export interface PartialNotionContext {
   isLinkCollectionToUrlProperty?: boolean
 
   showTableOfContents?: boolean
+  showCalendarControls?: boolean
+  startWeekOnMonday?: boolean
   minTableOfContentsItems?: number
 
   defaultPageIcon?: string
@@ -167,6 +171,8 @@ const defaultNotionContext: NotionContext = {
   isLinkCollectionToUrlProperty: false,
 
   showTableOfContents: false,
+  showCalendarControls: true,
+  startWeekOnMonday: false,
   minTableOfContentsItems: 3,
 
   defaultPageIcon: null,

packages/react-notion-x/src/icons/left-chevron.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+function SvgLeftChevron(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox='0 0 30 30' {...props}>
+      <polygon points='12.6 15 23 25.2 20.2 28 7 15 20.2 2 23 4.8'></polygon>
+    </svg>
+  )
+}
+
+export default SvgLeftChevron

packages/react-notion-x/src/icons/right-chevron.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+function SvgRightChevron(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox='0 0 30 30' {...props}>
+      <polygon points='17.4,15 7,25.2 9.8,28 23,15 9.8,2 7,4.8'></polygon>
+    </svg>
+  )
+}
+
+export default SvgRightChevron

packages/react-notion-x/src/renderer.tsx

@@ -38,6 +38,8 @@ export const NotionRenderer: React.FC<{
   isImageZoomable?: boolean
 
   showTableOfContents?: boolean
+  showCalendarControls?: boolean
+  startWeekOnMonday?: boolean
   minTableOfContentsItems?: number
 
   defaultPageIcon?: string
@@ -77,6 +79,8 @@ export const NotionRenderer: React.FC<{
   isLinkCollectionToUrlProperty,
   isImageZoomable = true,
   showTableOfContents,
+  showCalendarControls,
+  startWeekOnMonday,
   minTableOfContentsItems,
   defaultPageIcon,
   defaultPageCover,
@@ -113,6 +117,8 @@ export const NotionRenderer: React.FC<{
       linkTableTitleProperties={linkTableTitleProperties}
       isLinkCollectionToUrlProperty={isLinkCollectionToUrlProperty}
       showTableOfContents={showTableOfContents}
+      showCalendarControls={showCalendarControls}
+      startWeekOnMonday={startWeekOnMonday}
       minTableOfContentsItems={minTableOfContentsItems}
       defaultPageIcon={defaultPageIcon}
       defaultPageCover={defaultPageCover}