Course Catalog - Use Case - How to Display Calendar With Courses and Organize Student Dashboard


Use Case - How to display calendar with courses and organize student dashboard

Note: This guide covers features from:


Introduction

The CM Course Catalog allows you to create a directory of courses, each with their own page.

Using the add-on Calendar, it is possible to display all upcoming courses in a calendar on a list view.

The add-on Dashboard lets you organize a student dashboard to let your users manage the courses they registered to.

Use Case Front-End

Example of the calendar view of the courses for a certain month
Example of the list view of the courses for a certain month
Student Dashboard Example - "Profile" tab
Student Dashboard Example - "Purchases" tab
Student Dashboard Example - "Courses" tab

Use Case Assumptions

In this example use case guide we will consider how to display the courses as a calendar and how to organize a student dashboard. 

We assume that you have already bought the plugin and add-ons, but not installed them yet.

It follows:


Installing the Plugin

The process is the same for all CM plugins and add-ons.

  • Download the plugin from your customer dashboard
  • Log in to WordPress and navigate to the WordPress Admin → Plugins settings
  • Click on Add New
  • Activate it and add the license

Learn more: Getting Started - Plugin Overview


Quick Recap

If you still have questions about how to create and organize courses on your website, then check this use case guide first:

In this use case guide we will focus only on the process of organizing the courses calendar and student dashboard.

Calendar and List Views

The CM Course Catalog Calendar add-on allows showing courses in the calendar/list modes. The students can easily pick up any convenient time and the courses available during the selected dates, and open the course for more information.

Settings

Let's start with the setting up of the add-on. Navigate to Admin Dashboard → CM Course Catalog Pro → Settings → Calendar Addon tab.

There you will find a few sections with settings.

General

In this section you can configure the base calendar settings:

  • Search for open course [month] - Shows the number of month that the calendar will process to find an open course. The calendar will open a month with the first available course if found. If no courses are found the calendar will open for the current month.
  • First day of the week - Set when the week starts. You can choose between Monday and Sunday.
  • Calendar start year - Choose the year from which the user will be able to see the courses.

  • Open course in the new tab - If enabled, clicking on courses in the calendar will open them in a new tab.

Appearance

In this section you can configure the base calendar colors:

  1. Primary calendar color
  2. Course background color
  3. Course text color
  4. Month day background color

Calendar Labels

In this section you can configure the calendar labels:

  • List view
  • Calendar view
  • No courses were found

When you finished configuring the settings, click the button Update at the bottom of the page to save the changes.

Course Appearance Settings

You can also edit the colors for each course in the calendar list. To achieve that, open any course in the editing mode, and find the metabox Course Calendar Background Color. Click the button Select Color to specify it, then click the button Update to save the changes.

Displaying the Calendar On the Front-end

To display the calendar on the front-end, you need to place the following shortcode on the needed page:

[cmcc_calendar_view]

For example, you can create a new page and add there a shortcode as it's shown on the screenshot below:

Shortcode Parameters

This shortcode has a set of parameters which you can use:

  • category - Add multiple courses at once. Use the course slug and insert it into the brackets "..". Example: category="book-production,coding,mathematics,science"
  • view - Show your courses in the calendar or the list view. Example: view="calendar" or view="list"
  • custom-tax1, custom-tax2, custom-tax3, custom-tax4 - Display custom taxonomies. Works the same as with the parameter category.
  • days-labels - Specify custom day labels and translate them into other languages. Default value is "Mon,Tue,Wed..". Example: days-labels="Sun,Mon,Tues,Wed,Thurs,Fri,Sat"
  • mon-labels - Specify custom month names. Default value is "January,February,March..". Example: mon-labels="January,February,March,April,May,June,July,August,September,October,November,December"
  • mon-short-labels - Specify custom month short names. Default value is "Jan,Feb,Mar,Apr..". Example: mon-short-labels="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sept,Oct,Nov,Dec"

The calendar is configured and published, now let's check the result on the front-end.

Calendar View

On the top left the user can switch between calendar and list views. On the top right the user can navigate through the months and years. Clicking on the needed course will open the course page. As it's been said before, each course can have its own color. The user can also see how many days the course will run.

Here's an example of the calendar with all available courses for the particular month:

List View

And here's how the courses for a particular month look like in the list view. Each course shows its start date.

Student Dashboard

The CM Course Catalog Dashboard add-on allows you to display a front-end dashboard for your students.

Settings

To configure the student dashboard, head to Admin Dashboard → CM Course Catalog Pro → Settings → Student Dashboard tab.

Find there a section Student dashboard. You will see there the following options:

  • Allow students to unregister - Let users unsubscribe from the registered courses. The user will see a button Remove for each course in his student dashboard.

  • Student Dashboard tabs - Here you can set up the tabs which will be displayed in the student dashboard. For each tab you can define the title and the content. The content area accepts HTML and shortcodes (even from third-party plugins). Click the link +Add tab for adding new custom tabs. Drag and drop the tabs to define their positions.

By default, you can see there 3 tabs:

Profile

By default, this tab contains the shortcode [cmccdb_edit_profile] provided by the CM Course Catalog Profile Builder add-on. This tab shows the profile fields filled by the user. Above the custom fields, there are displayed the fields filled in the EDD cart while purchasing (first and last names, email and username). Learn more about Profile Builder.

Profile tab example:

Purchases

By default, this tab contains the shortcode [purchase_history] provided by the payment add-on Easy Digital Downloads. This tab shows all purchases made by the user, including purchased courses.

Purchases tab example:

Courses

By default, this tab contains the shortcode [cmcc_user_courses] . This tab shows all courses that the user got registered to, their details and statuses.

Courses tab example:

Displaying Student Dashboard On the Front-end

There are two ways how to display student dashboard on the front-end.

The first way is to manually place the shortcode [cmcc_user_profile] in any place you want (page, post, etc).

The second way - head to Admin Dashboard → CM Course Catalog Pro → Settings → General tab. Find there the option User profile page. You can choose there any page, and the shortcode will be added to that page automatically. We recommend to choose an empty page, as if you have any other content on that page - it will not be displayed on the front-end, there will be displayed only the student dashboard.

End Result

Following instruction found in the plugin and guides, you should be able to display the courses as a calendar and organize a student dashboard. 

Use Case Front-End

Example of the calendar view of the courses for a certain month
Example of the list view of the courses for a certain month
Student Dashboard Example - "Profile" tab
Student Dashboard Example - "Purchases" tab
Student Dashboard Example - "Courses" tab

More information about the Course Catalog LMS WordPress Plugin

Other WordPress products can be found at CreativeMinds WordPress Store

Let us know how we can Improve this Product Documentation Page

To open a Support Ticket visit our support center
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.