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

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.