Showing results for 
Search instead for 
Did you mean: 
Community Member

Syllabus Without Assignments

Jump to solution

Is there a way to eliminate the assignment listing in the Syllabus tool?  I would like to use the syllabus without the assignments, dates, etc. showing at the bottom.

39 Replies

While this approach would work, it would also hide that information in all courses.

Community Member

Correct me if I am wrong, but if the assignments aren't published prior to the start of the semester, I don't think they will be visible on your syllabus page.


Now that’s interesting. I have never even thought about that. I’ll test and see if that is possible. Thanks.

Community Member

Depending on what you want to do, the easiest thing might be to make a different page and call it, say Course Syllabus, remove the Syllabus page from the student view via settings, and set your new Syllabus page as the front page for the course or include a link to it on whatever your home page is.

Community Member

This is one of my favorite things about this community.....everybody has their unique approach to addressing an issue and it's great to see other people's approaches!

Community Advocate
Community Advocate‌,

I found this thread today, debated whether to create a new discussion or reply in the other various relevant threads. The current feature idea has a good discussion about how the idea would be implemented, and I didn't want to distract from that discussion. In the end, you're solution uses Global Canvas Themes, so I thought I'd just continue here...

I presented at a meeting today to about 40 teachers. At the end someone mentioned this being an issue, since students can bypass assignments with prerequisites. While I started searching the community for the topic and discussions, found this thread, and" modifiedtitl..., projector and all. I let the room know we could hide the assignments with the CSS here. For a variety of reasons, the conversation developed into what couldn't be a one size fits all solution. Some suggested disabling the links.

The issue being

  • Canvas hasn't allowed control with various options
  • globally hiding Everything doesn't solve the problem for Everyone
  • instructors want control

I read through both threads, looking for options, and broke it down to this...

Part 1 - User Control .html

<!-- commands -->
<p><code id="syllabus-links">remove</code></p>
<p><code id="syllabus-links">disable</code></p>
<p><code id="syllabus-links" data-days="14">dates</code></p>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The instructor can add a little html code to the bottom of their syllabus, for the JavaScript to perform an action.
Choose one:

  • Remove the assignments list
  • Disable the Links
  • Disable the Links by Date, beyond a certain number of days with data-days="#"

Part 2 - Global CSS.css

/* hide the controls */
#course_syllabus code#syllabus-links {
    display: none;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ one wants to see 290591_Screen Shot 2018-09-10 at 8.28.49 PM.png on the bottom of their syllabus.

Part 3 - Global JavaScript .js

// perform an action, on the syllabus page
(function() {
     'use strict';
     if (/^\/courses\/\d+\/assignments\/syllabus/.test(window.location.pathname)) {
          const syllabuslinks = {
               default_days: 7, // default if the user didn't set data-days
          syllabuslinks.remove = () => {
               // remove the whole assignments container
               let assignments = document.getElementById('syllabusContainer');
          syllabuslinks.disable = () => {
               let links = document.querySelectorAll('#syllabusContainer tr.syllabus_assignment td a');
               links.forEach(function(link) {
                    // set the content of the cell to the text of the Link, removing the link
                    link.parentNode.textContent = link.textContent;
          syllabuslinks.dates = (days) => {
               let dates = document.querySelectorAll('#syllabusContainer td.dates > span');
               let date_now =;
               dates.forEach(function(date) {
                    let due_date = Date.parse(date.dataset.htmlTooltipTitle);
                    let total_days = Math.round((due_date - date_now) / (1000 * 60 * 60 * 24));
                    if (total_days > days) {
                         let assignment_tr = date.parentNode.parentNode;
                         let link = assignment_tr.childNodes[3].firstElementChild;
                         link.parentNode.textContent = link.textContent;
          syllabuslinks.action = () => {
               var trigger = document.getElementById('syllabus-links');
               if (trigger) {
                    let action = trigger.textContent;
                    switch (action) {
                    case 'remove':
                    case 'disable':
                    case 'dates':
                         var days = typeof trigger.dataset.days !== 'undefined'
                              ? trigger.dataset.days :
                         console.log('syllabus-links command-not-recognized');
          syllabuslinks.init = () => {
               var mcb = function() {
                    var findAssignments = document.getElementById('syllabusContainer');
                    if (findAssignments) {
               var syllabusContainer = document.getElementById('syllabusContainer');
               var observer = new MutationObserver(mcb);
               observer.observe(syllabusContainer, { childList: true, subtree: true });

Example using <p><code id="syllabus-links" data-days="10">dates</code></p>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

290594_Screen Shot 2018-09-10 at 10.22.39 PM.png


Disables for Students only, roles?

The rows on the right are nested Tables in a Cell of the table holding the Date Groups on the left. Not every assignment has due dates, but both currently work with this script. If there are DOM variations I can work on handling those too.

Dealing with dates introduces a lot of problems. Most notably:

  • TimeZone differences between the school and a potential traveling student
  • Daylight savings time
  • Then, many more options...
    • Show up-to this Saturday, show up-to next Sunday
    • etc

I started tinkering with some of these date options, but stopped, and kept it simple for now to open the discussion.

This could be a base for customization, or just an exercise in DOM traversal.

Hard to tailor something like this for everyone.


The final part of this exercise is to get those teachers to start using the community, asking questions, looking for solutions, learning, sharing. I've added this to our test instance. I think in the morning I will get an email out to all those teachers, and give 100 points to the first 5 teachers (in my building) who like this post, vote for" modifiedtitl..., and show me they used this hack on a syllabus in test. You know... because people, ideas and community.


carroll-ccsd‌ I tried the remove code in Part 1 and get a red remove button, but it doesn't function and my assignments are still listed at the bottom of the page. What am I doing wrong?


Hi Andrea,

The code in Part 1 is just a trigger for the JavaScript to do something. It allows the instructor access to choose for their own course, instead of the disabling it for every user like the CSS above.

You will need to add Part 2 and 3 to your Canvas Instance Global Themes or a Sub Account Theme, uploading a CSS and JS file with those parts. I would do this first on Test, then provide feedback here after you try it out.

Alternatively, if you trust me, you can start by copying Part 3 into the JavaScript console of the browser, then you would see Part 1 work.


Edit: noticing that because the assignment links come in after page load, which the code accounts for, copying it into the console isn't the best way to test. To test this in the console, you'd have to change line 67 to syllabuslinks.action();

I'm not expecting anyone to implement this as is right now. More, what would you like to see, does this work, can we solve problems and keep it simple? I tried to to be very specific with the code, to prevent it from executing anywhere else, and identify the parts of the page to change. I can only find a couple scenarios to test, and would definitely appreciate others trying this on their test environment and providing some feedback.


I just put this in our test system and it works great.  Is there a way to create a role specifically button that would add your trigger code to the syllabus page?

Highlighted, not sure I understand your question. 

Are you asking if the code action to hide/disable the links can be run only for specific roles?

My question is does this get set in the JavaScript, or do we allow the instructor to define the roles.

Disabling links for students is desired, but allowing observers and the instructor to click them would also reasonable.


Are you asking if we can make a button, (maybe dropdown) that would add the code to the HTML of the RCE for the user? That might be difficult and bulky, when copy/paste is pretty easy, but I understand the user experience difficulties.


Am I way off? :smileygrin: