Quick Register to Appointment. New Application customizer sample.

samples/react-quick-register-to-appointment/.gitignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+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-quick-register-to-appointment/.npmignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

samples/react-quick-register-to-appointment/.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-quick-register-to-appointment/.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,
+    "**/lib-amd": true,
+    "src/**/*.scss.ts": true,
+    "**/jest-output": true
+  },
+  "typescript.tsdk": ".\\node_modules\\typescript\\lib"
+}

samples/react-quick-register-to-appointment/.yo-rc.json

@@ -0,0 +1,22 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "nodeVersion": "16.20.0",
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.24.0"
+    },
+    "version": "1.21.1",
+    "libraryName": "fast-register-to-appointment",
+    "libraryId": "8840a13c-f490-41e6-9c2a-e5cba8dfba1f",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionName": "Fast Register to Appointment",
+    "solutionShortDescription": "Fast Register to Appointment description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "componentType": "extension",
+    "extensionType": "ApplicationCustomizer"
+  }
+}

samples/react-quick-register-to-appointment/README.md

@@ -0,0 +1,73 @@
+# Quick Register to Appointment (SharePoint Event page)
+Add a function to register directly to an event/appointment. User will be added to the attendees list.
+
+## Summary
+SharePoint Online provides a list of appointments (events) on a site. The "Events" web part can be used to display them on a page. Users can access the appointment details via the web part and view all the details. The detailed view provides a link that allows them to add the appointment to their personal calendar. An appointment entry also allows them to maintain an attendee list. The "Events" list provides the "Attendees" column, where multiple people can be added. However, there is no automatic function for this; the list must be edited manually.
+The special app extension adds a registration and deregistration function to the detailed view. Users can register for a specific appointment and later deregister with a simple click. Attendees are automatically managed in the attendee column of the list.
+
+![UI of the generated form](https://www.dev-sky.net/img/apps/fastregisterappointment.png)
+
+*Extended interface of an appointment*
+
+## Video
+[![SharePoint Online: Fast & easy appointment booking](https://img.youtube.com/vi/_-aTpJPXRdA/hqdefault.jpg)](https://youtu.be/_-aTpJPXRdA)
+
+## Used SharePoint Framework Version
+![version](https://img.shields.io/badge/version-1.21.1-green.svg)
+
+## Applies to
+
+- [SharePoint Framework](https://aka.ms/spfx)
+- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/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
+
+> Nothing :-)
+
+## Solution
+
+| Solution    | Author(s)                                                   |
+| ----------- | ----------------------------------------------------------- |
+| Repository  | Marc André Schröder-Zhou (https://github.com/maschroeder-z) |
+
+## Version history
+
+| Version | Date             | Comments                |
+| ------- | ---------------- | ----------------------- |
+| 1.2     | 19.09.2025       | Upgrade to SPFx 1.21.1  |
+| 1.1     | 24.07.2024       | Upgrade to SPFx 1.18    |
+| 1.0     | 30.09.2023       | Initial Release         |
+
+---
+
+## Minimal Path to Awesome
+
+- Clone this repository
+- Ensure that you are at the solution folder
+- in the command-line run:
+  - **npm install**
+  - **gulp serve**
+
+> Check your currenr Node version and installed SPFx-Framework version.
+
+## Features
+Allows quick and easy registration for an event.
+
+## Help
+Please contact me for further help or information about the sample.
+
+## References
+
+- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
+- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
+- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
+- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your 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.**
+
+<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-extensions/samples/react-quick-register-to-appointment" />

samples/react-quick-register-to-appointment/config/config.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "quick-appointment-register-application-customizer": {
+      "components": [
+        {
+          "entrypoint": "./lib/extensions/quickAppointmentRegister/QuickAppointmentRegisterApplicationCustomizer.js",
+          "manifest": "./src/extensions/quickAppointmentRegister/QuickAppointmentRegisterApplicationCustomizer.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "QuickAppointmentRegisterApplicationCustomizerStrings": "lib/extensions/quickAppointmentRegister/loc/{locale}.js"
+  }
+}

samples/react-quick-register-to-appointment/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": "fast-register-to-appointment",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/react-quick-register-to-appointment/config/package-solution.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "Fast Register to Appointment",
+    "id": "8840a13c-f490-41e6-9c2a-e5cba8dfba1f",
+    "version": "1.2.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "iconPath": "assets/96x96.png",
+    "metadata": {
+      "shortDescription": {
+        "default": "Fast Register to Appointment"
+      },
+      "longDescription": {
+        "default": "Add a function to register directly to an event/appointment. User will be added to the attendees list."
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "Fast Register to Appointment",
+        "description": "Add a function to register directly to an event/appointment. User will be added to the attendees list.",
+        "id": "53fd8073-f835-491f-866a-1532cead2475",
+        "version": "1.0.0.0",
+        "assets": {
+          "elementManifests": [
+            "elements.xml",
+            "ClientSideInstance.xml"
+          ]
+        }
+      }
+    ]
+  },
+  "paths": {
+    "zippedPackage": "solution/dev-sky-ac-quick-appointment-register.sppkg"
+  }
+}

samples/react-quick-register-to-appointment/config/sass.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
+}

samples/react-quick-register-to-appointment/config/serve.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
+  "port": 4321,
+  "https": true,
+  "serveConfigurations": {
+    "default": {
+      "pageUrl": "https://devskynet0.sharepoint.com",
+      "customActions": {
+        "f9fdc242-8072-4e2c-ab79-3159265522c9": {
+          "location": "ClientSideExtension.ApplicationCustomizer",
+          "properties": {            
+          }
+        }
+      }
+    },
+    "quickAppointmentRegister": {
+      "pageUrl": "https://devskynet0.sharepoint.com",
+      "customActions": {
+        "f9fdc242-8072-4e2c-ab79-3159265522c9": {
+          "location": "ClientSideExtension.ApplicationCustomizer",
+          "properties": {            
+          }
+        }
+      }
+    }
+  }
+}

samples/react-quick-register-to-appointment/config/write-manifests.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
+  "cdnBasePath": "<!-- PATH TO CDN -->"
+}

samples/react-quick-register-to-appointment/gulpfile.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const build = require('@microsoft/sp-build-web');
+
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+
+var getTasks = build.rig.getTasks;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
+
+  result.set('serve', result.get('serve-deprecated'));
+
+  return result;
+};
+
+build.initialize(require('gulp'));