Repository navigation
New sample content calendar - #6631
Open
Sandeep-FED wants to merge 15 commits into
Open
Sandeep-FED wants to merge 15 commits into
Sandeep-FED wants to merge 15 commits into
Conversation
…ting - Added EventDetailPopover component to display publication and scheduled dates. - Implemented tests for EventDetailPopover to verify date formatting and status handling. - Updated ContentService to manage content types and retrieve Site Pages list ID. - Removed SampleContentProvider and integrated direct data fetching from SharePoint. - Introduced new properties in IContentItem for published and scheduled date texts. - Updated localization strings for better user experience. - Refactored status field handling in ContentService to accommodate new content types.
Contributor
Sample PR validation for #6631
|
| Validation | Status |
|---|---|
| Pull request affects only one folder | ✅ Succeeded |
| Sample folder name follows naming convention | ✅ Succeeded |
| README.md contains visitor stat image | |
| Sample requires a .nvmrc file | ✅ Succeeded |
| Sample requires a README.md | ✅ Succeeded |
| Sample requires a screenshot .png in assets folder | ✅ Succeeded |
| No .sppkg file | ✅ Succeeded |
| No node_modules folder | ✅ Succeeded |
| No lib folder | ✅ Succeeded |
| No upgrade reports | ✅ Succeeded |
@Sandeep-FED please address the above issues and push new changes to this branch.
For more information, see the contribution guidance.
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Unresolved functional and accessibility defects affect calendar navigation, content creation, and reliable planning.
8 open issues
What changed in this PR
Adds a SharePoint Framework sample for planning Site Pages content with a React calendar.
Changes:
- Adds month, week, and list views with navigation, status filters, and item details.
- Supports local placeholders and draft page creation.
- Includes tests, setup documentation, sample metadata, and build configuration.
Paths are relative to samples/react-content-calendar/.
| File | Description |
|---|---|
tsconfig.json |
Uses the SPFx TypeScript configuration. |
src/webparts/contentCalendar/views/WeekView.tsx |
Displays daily columns. |
src/webparts/contentCalendar/views/MonthView.tsx |
Displays the monthly calendar. |
src/webparts/contentCalendar/views/ListView.tsx |
Displays a chronological agenda. |
src/webparts/contentCalendar/utils/statusUtils.ts |
Maps statuses to colors. |
src/webparts/contentCalendar/utils/itemGrouping.ts |
Groups items by day. |
src/webparts/contentCalendar/utils/dateUtils.ts |
Provides calendar date helpers. |
src/webparts/contentCalendar/utils/contentTypeResolver.ts |
Resolves content-type styling. |
src/webparts/contentCalendar/utils/colorUtils.ts |
Generates tinted backgrounds. |
src/webparts/contentCalendar/theme/themeMap.ts |
Maps SharePoint themes to Fluent UI. |
src/webparts/contentCalendar/styles/App.module.scss |
Adds scaffold styles. |
src/webparts/contentCalendar/services/PlaceholderStore.ts |
Stores local reservations. |
src/webparts/contentCalendar/services/index.ts |
Exposes and constructs services. |
src/webparts/contentCalendar/services/IContentService.ts |
Defines the data-service contract. |
src/webparts/contentCalendar/services/ContentService.ts |
Reads SharePoint content and creates pages. |
src/webparts/contentCalendar/services/ContentService.test.ts |
Tests queries and metadata handling. |
src/webparts/contentCalendar/models/index.ts |
Exports domain models. |
src/webparts/contentCalendar/models/IFieldMapping.ts |
Defines field mappings. |
src/webparts/contentCalendar/models/IContentTypeConfig.ts |
Defines content-type settings. |
src/webparts/contentCalendar/models/IContentItem.ts |
Defines calendar items. |
src/webparts/contentCalendar/models/IContentCalendarConfig.ts |
Defines calendar configuration. |
src/webparts/contentCalendar/models/defaults.ts |
Supplies default settings. |
src/webparts/contentCalendar/models/ContentStatus.ts |
Defines publishing statuses. |
src/webparts/contentCalendar/models/CalendarView.ts |
Defines view modes. |
src/webparts/contentCalendar/loc/mystrings.d.ts |
Types localized strings. |
src/webparts/contentCalendar/loc/en-us.js |
Supplies English labels. |
src/webparts/contentCalendar/interfaces/IContentCalendarProps.ts |
Defines application props. |
src/webparts/contentCalendar/hooks/usePressableStyles.ts |
Shares interaction styles. |
src/webparts/contentCalendar/hooks/useCalendarData.ts |
Manages loading and refresh state. |
src/webparts/contentCalendar/ContentCalendarWebPart.ts |
Integrates configuration, services, and themes. |
src/webparts/contentCalendar/ContentCalendarWebPart.manifest.json |
Registers the web part. |
src/webparts/contentCalendar/components/Toolbar.tsx |
Provides navigation and view selection. |
src/webparts/contentCalendar/components/QuickAddMenu.tsx |
Offers page and placeholder creation. |
src/webparts/contentCalendar/components/PlaceholderDialog.tsx |
Collects reservation details. |
src/webparts/contentCalendar/components/Legend.tsx |
Provides status filters. |
src/webparts/contentCalendar/components/ItemIcon.tsx |
Displays status icons. |
src/webparts/contentCalendar/components/EventDetailPopover.tsx |
Displays item metadata. |
src/webparts/contentCalendar/components/EventDetailPopover.test.tsx |
Tests publication-date rendering. |
src/webparts/contentCalendar/components/EventChip.tsx |
Renders compact calendar entries. |
src/webparts/contentCalendar/components/CreatePageDialog.tsx |
Collects page creation options. |
src/webparts/contentCalendar/components/ContentTypeIcon.tsx |
Supplies content and navigation icons. |
src/webparts/contentCalendar/components/ContentCalendar.tsx |
Coordinates calendar state and actions. |
src/webparts/contentCalendar/components/CalendarCell.tsx |
Renders dates and overflow controls. |
src/webparts/contentCalendar/App.tsx |
Hosts the calendar or configuration prompt. |
src/webparts/contentCalendar/App.test.tsx |
Tests configuration-dependent rendering. |
README.md |
Documents setup and features. |
package.json |
Declares dependencies and scripts. |
eslint.config.js |
Configures SPFx linting. |
config/write-manifests.json |
Configures manifest output. |
config/typescript.json |
Configures static asset copying. |
config/serve.json |
Configures hosted development. |
config/sass.json |
Uses SPFx Sass settings. |
config/rig.json |
Selects the build configuration package. |
config/package-solution.json |
Defines solution packaging. |
config/deploy-azure-storage.json |
Supplies deployment configuration placeholders. |
config/config.json |
Registers bundles and localized resources. |
assets/sample.json |
Adds sample-gallery metadata. |
.yo-rc.json |
Records generator settings. |
.vscode/settings.json |
Configures editor defaults. |
.vscode/launch.json |
Configures workbench debugging. |
.nvmrc |
Specifies the Node.js version. |
.npmignore |
Excludes files from npm packaging. |
.gitignore |
Excludes generated and local files. |
Review effort: Balanced
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What's in this Pull Request?
This PR adds a new sample web part for managing contents for authors so that they 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.
Node Version
Node version used: 22.18.0
Checklist
README.mdfile's Version history. For new samples, I created a newREADME.mdfile matching this template.README.mdhas at least one static high-resolution screenshot (i.e. not a GIF) located in theassetsfolder.README.mdcontains complete setup instructions, including pre-requisites and permissions requiredassets/sample.jsonmetadata file.README.mdis the required<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/{sample-path}" />tracker with the repository-relative sample path..nvmrcfile indicating the version of Node.js