Components
Created by Smart Sparrow

Calendar

The Calendar widget allows students to create a schedule of events and summarize how they spend their time.

Unique ways to use this widget

There are many ways you can use this widget. For example:

  • Ask students to set up their personal daily calendar of events.
  • Ask students to create a mock schedule for someone else based on a job description.
  • Ask students to organize someone’s day based on a to-do list.
  • Ask students to reflect upon a pre-populated schedule and react to the order of events or number of events on the calendar.
  • Ask students to plan out their class schedule before registration.
  • Evaluate students’ time management skills.
  • This widget can be used as a static image to present information or can be used as an interactive activity.

 

Have a play

 

Basic setup instructions

  1. Copy the widget link by clicking on the Get Component button at the top of this page.
  2. In the Author Tool, add a Blank component from the Components tab and resize it to your liking.
  3. Paste the url that you’ve just copied into the Component’s source.
  4. With the component selected, click on Configure and select Options to set it up.
  5. To create an event, select your desired date and time and drag your mouse from the start time to the end time.
  6. Select the event. A window should open with edit open. Here you can change the color of the event (top right), edit the event with “Edit Event” drop down, scheduled this event for multiple days in the “Day(s)” drop down, change the start time and end time, add location, and add notes. When done, select “Save.”
  7. To see how many hours are allocated to each event, select “Event Summary” in the top right corner.
  8. To change the types of event available, editing the “Settings.Event Types” text box. Delete unwanted event options. Add new ones. Remember to always separate event types with commas.
  9. To change the event type color choices, edit the HEX codes in the “Settings.Event Colors” text box. Be mindful to match your desired color with the same order as the event types above.
  10. When done, select Save.
  11. Have a look at the CAPI table description at the bottom of the article for more information on what you can do.

 

Capi Table

Property Purpose Acceptable Inputs Readable Writable
Settings.Event Types
Event types
Array
Settings.Event Colors
Event colors
Array
Settings.Display Event Summary Button
Display Event Summary Button
Boolean
Settings.Event Summary Visibility
Event Summary Visibility
Boolean
Settings.Allow Student Event Types
Allow Student Event Types
Boolean
Settings.All Event Types
All Event Types
Array
Settings.Daily Starting Hour
Daily Starting Hour
Number
Settings.Daily Ending Hour
Daily Ending Hour
Number
Settings.ID
ID
String
Settings.Key
Key
String
Settings.State
State
String
Settings.CSS
Custom Css
String

 

Advanced widget setup

Contact our team for help setting up the widget and trap states in your lessons.

Want to work with us to create your own component?
Request services