cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
emily
Community Champion

Embed "Course Summary"?

Jump to solution

Hi!

Does anyone know a way to embed just the Course Summary on a page, without showing the rest of the Syllabus? Or (perhaps even better), to embed the agenda view of the calendar WITHOUT the navigation buttons? I can do this, but it's a bit too picture-in-picture...I'd love to just have the list of assignments/meetings/etc.

281361_pastedImage_1.png

Thanks,

Emily 

Tags (1)
1 Solution

Accepted Solutions
ns3320
Community Contributor

Hi  @emily ,

I wanted to see if I could achieve the result you were looking for with just a little html and I think I got it. I just embedded the agenda view of the Calendar into a page using iframe tags and then adjusted height, width, and margin until I got it looking right.

This is the code I put into the HTML editor:
<iframe style="height: 800px; width: 100%; margin: -100px;" src="AgendaURL"></iframe>

This is what it looks like for me:
282163_Agenda iFrame.PNG

View solution in original post

6 Replies
kona
Community Coach
Community Coach

 @emily , I believe I've seen this type of question asked a number of times around the Community and the prevailing answer is no, there isn't really a way to separate out this information. Possibly with a lot of custom Javascript, but that way exceeds my expertise. I'm going to go ahead and share this with the Canvas Developers‌ group just to double-check and see if they have a good workaround.

Kona

emily
Community Champion

Shucks! Luckily, this is really just a style thing, and nothing critical for function. Smiley Happy

Thanks for the quick reply.

ns3320
Community Contributor

Hi  @emily ,

I wanted to see if I could achieve the result you were looking for with just a little html and I think I got it. I just embedded the agenda view of the Calendar into a page using iframe tags and then adjusted height, width, and margin until I got it looking right.

This is the code I put into the HTML editor:
<iframe style="height: 800px; width: 100%; margin: -100px;" src="AgendaURL"></iframe>

This is what it looks like for me:
282163_Agenda iFrame.PNG

View solution in original post

emily
Community Champion

Very cool, Nick! It never occurred to me to set negative margins! Thank you!

ofelia_mangen
Community Participant

Thanks  @ns3320 ‌. This works — if you're only embedding the calendar. Seems that it weirdly overlaps other content on the page (in my case, text above the calendar, which I can now remove since the embed now works!). 

<p>Add events to the Futures Calendar on this page: <a href="https://courseworks2.columbia.edu/calendar?include_contexts=group_44123#view_name=agenda" target="_blank" rel="noopener">Spring 2019 Futures Calendar</a></p>
<div><iframe style="height: 800px; width: 100%; margin: -90px;" src="https://courseworks2.columbia.edu/calendar?include_contexts=group_44123#view_name=agenda"></iframe><...>

308540_Screen Shot 2019-03-19 at 1.04.05 PM.png

ns3320
Community Contributor

Great point  @ofelia_mangen !

If you would like to add in some text at the top, then you can just add padding-bottom: 100px; to the in-line style for the piece of text directly above the iframe:

<p style="padding-bottom: 100px;">Add events to the Futures Calendar on this page: <a href="CalendarURL">Spring 2019 Futures Calendar</a></p>
<p><iframe style="height: 800px; width: 100%; margin: -100px;" src="CalendarURL"></iframe></p>

308580_agenda iframe text.PNG