SharePoint Modern (task/project) Timeline

Hi All,

The idea of using an iframe for the calendar gave me the idea of using it for a timeline. After removing all the surrounding clutter and changing the style a little bit, I think it looks pretty seamless within a modern page.

If anyone wants to try this, here is what I did:

• I created a new classic page that only has a timeline. This page, however, has a lot of clutter, like menus and old classic styles that need to be removed/modified.
• So I added a Content Editor web part that references another file on my system. In this file I added a style tag with some css that removes all the clutter and changes some of the classic styles. It's better to do it this way than inside a Script Editor because once your css hides the menus, you won't be able to interact with the edit menus anymore. I used SharePoint Designer to edit the css outside of the browser.
• Finally I added an Embed web part on my modern page, with an iframe tag referencing my classic page. I had to play around with the dimensions until it looked good (no clipping or excess white space).
• Here is my css. It will probably be different for your page depending on your template. I spent quite a bit of time inside Chrome devtools to figure this out, but this should give you an idea of what you need to change.

	#ms-designer-ribbon,
	#s4-titlerow,
	#sideNavBox,
	#MSOZoneCell_WebPartWPQ2 > div > div > table,
	#WebPartWPQ3_ChromeTitle,
	#MSOZoneCell_WebPartWPQ3,
	.welcome-content {
		display: none !important;
	}
	#MSOZoneCell_WebPartWPQ2 {
		padding: 10px;
	}
	#s4-ribbonrow {
		height: 35px;
	}
	#contentBox {
		margin-left: 0;
	}
	#contentRow {
		padding: 0;
	}
	div.welcome {
		padding: 0;
	}
	.ms-webpart-titleText {
		font-size: 24px;
	}
	.ms-WPBorder {
		border-style: none;
	}
	.ms-webpart-chrome-title {
		border-style: none;
	}
	.ms-webpart-chrome-title span {
		color: rgb(51, 51, 51);
		font-weight: 100;
	}

​

Overall I think this is a decent approach. It leverages all the work that was put into the classic timeline, and the ugly hacks stay in the classic page. And when/if Microsoft comes out with a new timeline webpart, it is easily replaced.

Albert