Colorbox is a light-weight, customizable lightbox plugin for jQuery. In this video, I will show you how to open events in a modal popup using the Colorbox module and library.

Install module

• Colorbox

Install Colorbox Plugin

• Download the latest version of Colorbox plugin
• Unpack the file and rename it to "colorbox"
• Copy the file to "sites/all/libraries" directory (so that "sites/all/libraries/colorbox/jquery.colorbox-min.js" exists)
• Clear the cache
  • Go to "Configuration => Development => Performance" (admin/config/development/performance)
  • Clear cache
  • (Clear all caches)

Enable module

• Go to "Modules" (admin/modules) and enable:
  • Colorbox
• (Save configuration)

To confirm that the Colorbox plugin is installed correctly:

• Go to "Reports => Status report" (admin/reports/status)
• The row for "Colorbox plugin" should be green

Now that we have installed Colorbox, let's edit the view.

• "Go to structure => Views => Calendar" (admin/structure/views/view/calendar)

Format

• Click "Settings"
• Click "Colorbox options"
  • [x] Open events with Colorbox
  • [x] Open events in iFrame
  • Classname or ID selector: #content (This is the selector that you can target in your CSS.)
  • Width: 80% (Sets the width of the colorbox.)
  • Height: 80% (Sets the height of the colorbox.)
• (Apply(all displays))
• (Save) (Save the view)

Click the "view Page" button to view the calendar. Simply click on an event and it will load the event in a modal popup.

In the next video, we'll take a look at how to color code the events on our calendar.