Script Editor in modern site

%3CLINGO-SUB%20id%3D%22lingo-sub-2010728%22%20slang%3D%22en-US%22%3EScript%20Editor%20in%20modern%20site%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2010728%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20SharePoint%20Gurus%20-%20I%20am%20working%20on%20Modern%20Site%20and%20need%20to%20inject%20some%20CSS%2FHTML%20to%20calendar%20page.%20Trying%20to%20preserve%20left%20navigation%20links%20when%20user%20switch%20from%20one%20overlay%20calendar%20to%20another.%20I%20couldn't%20see%20script%20editor%20web%20part.%20How%20can%20I%20inject%20CSS%2FHTML%20on%20calendar%20page%3F%20Is%20SPFX%20development%20only%20way%20to%20do%20custom%20development%20in%20modern%20site%3F%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20%26amp%3B%20Regards%2C%3C%2FP%3E%3CP%3EKhushi%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2012444%22%20slang%3D%22en-US%22%3ERe%3A%20Script%20Editor%20in%20modern%20site%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2012444%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F142604%22%20target%3D%22_blank%22%3E%40Khushi%20Shaikh%3C%2FA%3E%26nbsp%3BScript%20Editors%20do%20not%20work%20because%20custom%20scripting%20is%20turned%20off.%20SPFx%20is%20the%20way.%20However%2C%20I%20would%20like%20to%20note%2C%20the%20calendar%20page%20is%20a%20classic%20page%2C%20so%20while%20this%20customization%20is%20unlikely%20to%20break...%26nbsp%3B%20be%20aware%2C%20if%20you%20develop%20modern%20pages%20in%20the%20future%2C%20injecting%20code%20via%20script%20editors%20to%20change%20out%20of%20the%20box%20components%20isn't%20supported.%20With%20great%20power%2C%20comes%20great%20responsibility.%3CBR%20%2F%3E%3CBR%20%2F%3EHere%20is%20a%20modern%20script%20editor%20built%20in%20SPFx%20by%20the%20community.%26nbsp%3B%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-script-editor%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-script-editor%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2034728%22%20slang%3D%22en-US%22%3ERe%3A%20Script%20Editor%20in%20modern%20site%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2034728%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20for%20the%20link%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F39836%22%20target%3D%22_blank%22%3E%40Beau%20Cameron%3C%2FA%3E%26nbsp%3BI%20am%20looking%20to%20do%20things%20in%20right%20way.%20After%20looking%20at%20Github's%20SPFX%20Script%20Editor%2C%20it%20seems%20is%20not%20a%20correct%20way%20to%20do%20it.%20Is%20there%20any%20way%20as%20per%20the%20best%20practices%20to%20edit%20the%20calendar%20page%20to%20edit%20the%20HTML%20using%20SPFX%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBest%20Regards%2C%3C%2FP%3E%3CP%3EKhushi%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Contributor

Hello SharePoint Gurus - I am working on Modern Site and need to inject some CSS/HTML to calendar page. Trying to preserve left navigation links when user switch from one overlay calendar to another. I couldn't see script editor web part. How can I inject CSS/HTML on calendar page? Is SPFX development only way to do custom development in modern site? 

 

Thanks & Regards,

Khushi

3 Replies

@Khushi Shaikh Script Editors do not work because custom scripting is turned off. SPFx is the way. However, I would like to note, the calendar page is a classic page, so while this customization is unlikely to break...  be aware, if you develop modern pages in the future, injecting code via script editors to change out of the box components isn't supported. With great power, comes great responsibility.

Here is a modern script editor built in SPFx by the community. 
https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-script-editor

Thanks for the link @Beau Cameron I am looking to do things in right way. After looking at Github's SPFX Script Editor, it seems is not a correct way to do it. Is there any way as per the best practices to edit the calendar page to edit the HTML using SPFX?

 

Best Regards,

Khushi 

@Khushi Shaikh Nope. There is no recommended path for that. My personal recommendation is if you need a custom calendar, to build the custom calendar in SPFx. There are some samples in the PnP Samples library. https://github.com/pnp/sp-dev-fx-webparts