Colorbox is a light-weight, customizable lightbox plugin for jQuery, and the Colorbox module integrates the Colorbox library with Drupal. In this video, I will show you how to install and enable the Colorbox module, and configure the calendar to show event details when an event is clicked.

Currently, when you click on an event in the calendar, you are taken to that event's node page. Let's configure Colorbox to display the event information in a modal popup instead of taking the user to the node page.

Install modules

Now, that we've installed the modules, we need to download and install the colorbox plugin

Install Colorbox Plug-in

  • Download the latest version of the Colorbox Plug-in
  • Unpack the file and rename it to "colorbox"
  • Copy the file to "sites/all/libraries" directory (If installed correctly, "sites/all/libraries/colorbox/jquery.colorbox-min.js will exist.)
  • Clear the cache
    • Go to "Configuration => Development => Performance" (admin/config/development/performance)
    • Clear cache
    • (Clear all caches)

Enable modules

Now, we can enable the modules.

  • Go to "Modules" (admin/modules) and enable:
    • Colorbox
    • Entity API
    • Libraries
  • (Save Configuration)

To confirm that the Colorbox Plug-in is installed correctly:

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

Now we need to enable the colorbox settings for the calendar templates.

  • Go to "Configuration => Date API => Calendar" (admin/config/date/calendar)
  • Add Colorbox settings to Node calendar templates
    • [x] Yes
  • (Save configuration)

Alright, now we can modify the Calendar view. Let's display the full rendered node in a colorbox.

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

Fields

Let's add the rendered node as a field so that we can display it in the colorbox.

  • Click "Add"
  • [x] Content: Rendered Node
  • (Apply(all displays))
  • [ ] Create a label
  • [x] Exclude from display
  • Display
    • Choose "Show complete entity"
  • (Apply(all displays))

Now, we'll add the title as the colorbox trigger.

  • Click "Add"
  • [x] Colorbox: Colorbox trigger
  • (Apply(all displays))
  • [ ] Create a label
  • Trigger field
    • Choose "Title"
  • Popup
    • [rendered_entity]
  • (Apply(all displays))

Since we're displaying the title as the colorbox trigger, we can hide the original title from display.

  • Click "Content: Title" link
  • [x] Exclude from display
  • [ ] Link this field to the original piece of content
  • (Apply(all displays))

Lastly, let's rearange the fields so that the date is after the title (the colorbox trigger).

  • Click the triangle next to "Add"
  • Select "Rearrange"
  • Drag "Content: Event Date" to the bottom of the list
  • (Apply (all displays))
  • (Save)(Save the view)

Now, when we got to the calendar page, we can click any calendar items and see that instead of being redirected to the node page a modal box appears containing the rendered content. This can be configured using the default node display options. (Remember, we used the full display format for this field.)

Now, let's move on to color coding events on our calendar.