New sample content calendar

samples/react-content-calendar/.gitignore

@@ -0,0 +1,38 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+lib-dts
+lib-commonjs
+lib-esm
+jest-output
+release
+solution
+temp
+*.sppkg
+.heft
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+# Styles Generated Code
+*.scss.ts

samples/react-content-calendar/.npmignore

@@ -0,0 +1,22 @@
+# Ignore everything by default
+**
+
+# Use negative patterns to bring back the specific things we want to publish
+!/bin/**
+!/dist/**
+!/EULA/**
+!/lib/**
+!ThirdPartyNotice.txt
+
+# Ignore certain files in the above folders
+/dist/*.stats.*
+/dist/**/*.js.map
+/lib/**/*.js.map
+/lib/**/test/**
+
+# NOTE: These don't need to be specified, because NPM includes them automatically.
+#
+# package.json
+# README (and its variants)
+# CHANGELOG (and its variants)
+# LICENSE / LICENCE

samples/react-content-calendar/.nvmrc

@@ -0,0 +1 @@
+v22.18.0

samples/react-content-calendar/.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Hosted workbench",
+      "type": "msedge",
+      "request": "launch",
+      "url": "https://{tenantDomain}/_layouts/workbench.aspx",
+      "webRoot": "${workspaceRoot}",
+      "sourceMaps": true,
+      "sourceMapPathOverrides": {
+        "webpack:///.././src/*": "${webRoot}/src/*",
+        "webpack:///../../../src/*": "${webRoot}/src/*",
+        "webpack:///../../../../src/*": "${webRoot}/src/*",
+        "webpack:///../../../../../src/*": "${webRoot}/src/*"
+      },
+      "runtimeArgs": [
+        "--remote-debugging-port=9222",
+        "-incognito"
+      ]
+    }
+  ]
+}

samples/react-content-calendar/.vscode/settings.json

@@ -0,0 +1,14 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  // Configure glob patterns for excluding files and folders in the file explorer.
+  "files.exclude": {
+    "**/.git": true,
+    "**/.DS_Store": true,
+    "**/bower_components": true,
+    "**/coverage": true,
+    "**/jest-output": true,
+    "**/lib-amd": true,
+    "src/**/*.scss.ts": true
+  },
+  "typescript.tsdk": ".\\node_modules\\typescript\\lib"
+}

samples/react-content-calendar/.yo-rc.json

@@ -0,0 +1,22 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "whichFolder": "subdir",
+    "solutionName": "react-content-calendar",
+    "useGulp": false,
+    "componentType": "webpart",
+    "template": "react",
+    "componentName": "Content Calendar",
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "nodeVersion": "22.18.0",
+    "sdksVersions": {},
+    "version": "1.23.0",
+    "libraryName": "react-content-calendar",
+    "libraryId": "4d8ecbb3-e00a-453b-9532-fb9001c8e923",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionShortDescription": "react-content-calendar description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false
+  }
+}

samples/react-content-calendar/README.md

@@ -0,0 +1,97 @@
+# React Content Calendar
+
+## Summary
+
+The Content Calendar is a SharePoint Framework web part that gives content authors a central place to see and manage their Site Pages schedule. It reads items from a selected site page content type and displays them in month, week, or agenda-style list views. The default field mapping targets the standard `Title`, `Created`, and `ContentType` fields used by a Site Pages library.
+
+Content authors can plan upcoming work by reserving dates with placeholders, then create a modern Site Page directly from the calendar when they are ready. Date navigation, publishing-status filters, and item details make it easier to review the content schedule and keep planned work visible alongside existing pages.
+
+## Used SharePoint Framework Version
+
+![version](https://img.shields.io/badge/version-1.23.2-green.svg)
+
+## Applies to
+
+- [SharePoint Framework](https://aka.ms/spfx)
+- [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+
+> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
+
+## Prerequisites
+
+- Node.js `22.14.0` or later in the `22.x` series (the project uses Node.js `22.18.0`).
+- A SharePoint site and permission to read the selected content type. The default mapping is designed for the Site Pages library or a compatible list with the expected fields.
+- To create pages, permission to add pages to the site's Site Pages library.
+- Use the SharePoint hosted workbench to test against live SharePoint content; the web part uses the current SharePoint context.
+
+## Solution
+
+| Solution               | Author(s)                                                     |
+| ---------------------- | ------------------------------------------------------------- |
+| react-content-calendar | [Sandeep P S](https://github.com/Sandeep-FED)      |
+
+## Version history
+
+| Version | Date | Comments |
+| ------- | ---- | -------- |
+| 1.0.0   |  19/10/26   | Initial release |
+
+
+## Minimal Path to Awesome
+
+- Clone this repository.
+- Ensure that you are in the solution folder: `samples/react-content-calendar`.
+- Use Node.js `22.x`, then run:
+  - `npm install`
+  - `npm start`
+
+To build and package the solution, run `npm run build`.
+
+## Features
+
+- Month, week, and list views with Today, previous, and next navigation.
+- Loads items for the visible date range from the content type. Site Pages scheduled publish dates and moderation status are used when available to determine calendar dates and Draft, Scheduled, or Published status. The service resolves REST property names from library field metadata; future publish dates show as Scheduled on their publish date, even if the page was created outside the visible range. Field-metadata lookup failures are reported instead of silently treating pages as Published.
+- Opens item details with content type, publishing status, date, author/editor information, and a link to the page when available.
+- Item details show the scheduled publish date and time or the first published date and time (falling back to Created). SharePoint-formatted values from `FieldValuesAsText` preserve the site's date/time formatting; missing text values use locale-formatted raw timestamps. This does not change calendar placement.
+- Creates a modern Site Page as a draft and opens it in edit mode. The create dialog can also disable comments on the new page.
+- Reserves dates with placeholders, including optional notes. Placeholders are stored in the browser's local storage for that web-part instance; they are not saved to SharePoint.
+- Uses Fluent UI 9, PnPjs, and the SharePoint theme.
+
+## Screenshots
+
+### Month view
+
+![Month view showing draft, scheduled, published, and placeholder content](./assets/screenshot1.png)
+
+### Scheduled page details
+
+![Scheduled page details showing the publication date and time and author information](./assets/screenshot2.png)
+
+### Quick-add menu
+
+![Quick-add menu with options to create content or reserve a date with a placeholder](./assets/screenshot3.png)
+
+### Create placeholder
+
+![Create placeholder dialog with title and optional notes for the selected date](./assets/screenshot4.png)
+
+### Week view
+
+![Week view showing content and placeholders grouped by day](./assets/screenshot5.png)
+
+### List view
+
+![List view showing content grouped by date with publishing status badges](./assets/screenshot6.png)
+
+## References
+
+- [Getting started with SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [SharePoint Framework documentation](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+- [Heft documentation](https://heft.rushstack.io/)
+- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for Microsoft 365 development.
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+![](https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/samples/react-content-calendar)

samples/react-content-calendar/assets/sample.json

@@ -0,0 +1,95 @@
+[
+  {
+    "name": "pnp-sp-dev-spfx-web-parts-react-content-calendar",
+    "source": "pnp",
+    "title": "React Content Calendar",
+    "shortDescription": "Plan and track SharePoint Site Pages in month, week, and list views with publishing status, scheduled publication details, and local placeholders.",
+    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-content-calendar",
+    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-content-calendar",
+    "longDescription": [
+      "A SharePoint Framework web part built with React, Fluent UI 9, and PnPjs that gives content authors a central calendar for the current site's Site Pages library.",
+      "Review pages in month, week, or list views, filter by publishing status, and choose Site Page or a custom page content type from the property pane.",
+      "View scheduled or first-published date and time, author and editor details, and links to pages. Create draft Site Pages directly from the calendar or reserve dates with placeholders stored locally in the browser."
+    ],
+    "creationDateTime": "2026-10-19",
+    "updateDateTime": "2026-10-19",
+    "products": ["SharePoint"],
+    "metadata": [
+      {
+        "key": "SAMPLE-TYPE",
+        "value": "SPFx-WebPart"
+      },
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.23.0"
+      }
+    ],
+    "thumbnails": [
+      {
+        "name": "screenshot1.png",
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-content-calendar/assets/screenshot1.png",
+        "alt": "Month view showing draft, scheduled, published, and placeholder content"
+      },
+      {
+        "name": "screenshot2.png",
+        "type": "image",
+        "order": 101,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-content-calendar/assets/screenshot2.png",
+        "alt": "Scheduled page details with publication date and time and author information"
+      },
+      {
+        "name": "screenshot3.png",
+        "type": "image",
+        "order": 102,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-content-calendar/assets/screenshot3.png",
+        "alt": "Quick-add menu for creating content or reserving a date with a placeholder"
+      },
+      {
+        "name": "screenshot4.png",
+        "type": "image",
+        "order": 103,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-content-calendar/assets/screenshot4.png",
+        "alt": "Create placeholder dialog with title and optional notes"
+      },
+      {
+        "name": "screenshot5.png",
+        "type": "image",
+        "order": 104,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-content-calendar/assets/screenshot5.png",
+        "alt": "Week view showing content and placeholders grouped by day"
+      },
+      {
+        "name": "screenshot6.png",
+        "type": "image",
+        "order": 105,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-content-calendar/assets/screenshot6.png",
+        "alt": "List view showing content grouped by date with publishing status badges"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "Sandeep-FED",
+        "pictureUrl": "https://github.com/Sandeep-FED.png",
+        "name": "Sandeep P S"
+      }
+    ],
+    "references": [
+      {
+        "name": "SharePoint Framework overview",
+        "description": "Learn about building client-side web parts and extensions with the SharePoint Framework.",
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
+      },
+      {
+        "name": "PnP React Controls",
+        "description": "Reusable React controls for SharePoint Framework solutions.",
+        "url": "https://pnp.github.io/sp-dev-fx-controls-react/"
+      }
+    ]
+  }
+]

samples/react-content-calendar/config/config.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "content-calendar-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/contentCalendar/ContentCalendarWebPart.js",
+          "manifest": "./src/webparts/contentCalendar/ContentCalendarWebPart.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "ContentCalendarWebPartStrings": "lib/webparts/contentCalendar/loc/{locale}.js",
+    "ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js",
+    "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
+  }
+}

samples/react-content-calendar/config/deploy-azure-storage.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "workingDir": "./release/assets/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "react-content-calendar",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/react-content-calendar/config/package-solution.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "react-content-calendar-client-side-solution",
+    "id": "4d8ecbb3-e00a-453b-9532-fb9001c8e923",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": "Undefined-1.23.0"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "Plan and track SharePoint content in month, week, and list views."
+      },
+      "longDescription": {
+        "default": "Give content authors a central calendar for SharePoint Site Pages. Review content in month, week, and list views, filter by publishing status, reserve dates with local placeholders, and create draft pages directly from the calendar."
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "Content Calendar",
+        "description": "Deploys the Content Calendar web part for planning and tracking SharePoint content.",
+        "id": "254c8d9f-4100-4820-b082-852afc26f5e6",
+        "version": "1.0.0.0"
+      }
+    ]
+  },
+  "paths": {
+    "zippedPackage": "solution/react-content-calendar.sppkg"
+  }
+}