Date and Calendar Module in Drupal 5: Part 2

by Marjorie Roswell | May 2009 | MySQL Content Management Drupal Open Source PHP

The previous part of the article focused on just a few modules, with an emphasis on date. We explored Date formats, Exposed filters fieldset and the Views Date Range Filter Module. We also had a chance to create some summary views. In this part by Marjorie Roswell, we shall create a Timeline, cover the Views Popup feature, create a Calendar and also make an iCal feed.

Recipe 40: Timeline

The Timeline module implements a nice interactive script developed originally by the SIMILE project at MIT. The project "graduated" in 2008, to become its own stand-alone open source project, hosted at Google Code.

  1. Log on to the host and enter the following commands. This is almost a garden-variety module installation, however, we also need to download all of the SIMILE timeline code and place it in an api subdirectory. The Timeline widget tarball expands to the timeline-1-2 directory, so in the last step we use the mv command to rename it to api.
      cd home/DRUPALACCOUNT/public_html/sites/all/modules
      wget http://ftp.drupal.org/files/projects/timeline-5.x-1.0.tar.gz
      tar xvf timeline-5.x-1.0.tar.gz
      cd timeline/
      wget http://www.miccolis.net/random/timeline-1-2.tar.gz
      tar xvf timeline-1-2.tar.gz
      mv timeline-1-2 api
  2. Enable the Timeline module.
  3. Explore the configuration settings at admin/settings/timeline. Here you may set the width, height, and initial date focus. Also note the Advanced settings for the path to the Timeline widget JavaScript. If, for some reason, you are unsuccessful making the widget available, you may temporarily try pointing to: http://simile.mit.edu/timeline/api/timeline-api.js. (This will work for as long as MIT continues to host this.)
  4. Read the README.txt file, and INSTALL.txt file (this is always a good practice when installing new modules). This is a summary of the Views field requirements for setting up a timeline in Drupal.

If present

If not present

First field

Date or Event determines location on the timeline

Defaults to Node Created Time

Second Field

Title, with clickable link

Node's default title is used

Third Field

Description

Teaser, if available. (CCK Date fields do not have timeline)

Additional Fields

Additional fields are not used by Timeline.

  1. Edit the timeline view created in Recipe 34.
  2. In the Page fieldset, change the View Type to Timeline: Horizontal.
  3. Drupal 5 Views Recipes

  4. Scroll down to the Fields fieldset. Note that in our original view, the Title is the first field followed by Date as the second field. We will reverse this. Click on the up arrow in the Date row to Move this item to the top.
  5. Drupal 5 Views Recipes

  6. Add the Text: Description (field_workshop_description) as the third field.
  7. Save the view and browse to timeline.
  8. Drupal 5 Views Recipes

    Move the cursor around the timeline. Click on the events to see the associated pop-up box. Click and drag to the left to go forward in time. Click and drag works in both the upper and lower timeline bands.

  1. Configuration settings for individual timelines are available at admin/build/timeline (these settings will override default settings at admin/settings/timeline). A particularly interesting setting is the one to enable controls.
  2. Drupal 5 Views Recipes

    With controls enabled, the user will have the opportunity to filter, or highlight the timeline based on text either in the title or the description.

    Drupal 5 Views Recipes

    Regular expressions will also work when filtering or highlighting timeline items.

    Cooking|Recipes

    Find items that contain either Cooking or Recipes in the title or description

    ^L

    Find titles that start with L

    asagna

    Find Lasagna-partial words work fine.

    hea[rl]t

    Find Health or Heart

    The searches are case-insensitive.

Recipe notes

  • For examples of basic and sophisticated SIMILE Timelines see http://simile.mit.edu/timeline/examples/.
  • More information about Timeline is available at http://code.google.com/p/simile-widgets/ including a mailing list, a wiki, and an independent issue queue for various SIMILE web widgets.
  • There is also an archived listerv available at http://www.nabble.com/SIMILE---General-f27660.html. The listserv remains active for other SIMILE projects but does not accept content regarding "graduated" projects such as Timeline. However, you may find older posts helpful.
  • If you like Timeline, try some of the other SIMILE projects as well, at http://simile.mit.edu/. (Perhaps you can write the next module to make them available in Drupal.)
  • Exposed Filters are incompatible with the Timeline module.
  • Arguments will work. For instance, if you add a Taxonomy item argument the URL: http://YOURSITE.com/timeline/Cooking would show only the workshops in the Cooking category.
  • To incorporate color coding by taxonomy, consider installing the patch at http://drupal.org/node/121298. There is also a nice patch to include icons by taxonomy term at http://drupal.org/node/104890.
  • The Timeline module integrates with the Events module.
  • If no fields are included in the timeline, the timeline displays the date the content was posted.

Recipe 41: Views Popup

The Views Popup module displays a list of up to three fields and then, upon mouseover, displays additional fields in a pop-up box. This is not a date-specific module, but we'll use it to display a workshop description when you move the mouse over the date. We'll also take a look at the views_style_plugins hook, which in this article enabled the Date Browser, Timeline, Calendar, and now List View as Popup View Types.

  1. Install and enable the Views Popup module.
  2. Open the views_popup view at views_popup/edit.
  3. In the Page fieldset, change the View Type to List View as Popup, Show 2 Fields
  4. In the Fields fieldset, change the order of the Datestamp and Title fields so that the datestamp is first.
  5. Add the Text: Description (field_workshop_description) field.
  6. Drupal 5 Views Recipes

    The first two of these fields will display. The third will be hidden by default.

  7. Save and view the views_popup view. Note than when you mouse over the date, the description appears
  8. Drupal 5 Views Recipes

  9. Take a look at hook_views_style_plugins in the views_popup.module file:
    function views_popup_views_style_plugins() {
    return array(
    'list_hint' => array(
    'name' => t('List View as Popup, Show 1 field'),
    'theme' => 'views_view_list_hint_popup1',
    'validate' => 'views_ui_plugin_validate_list',
    'needs_fields' => true,
    'weight' => -10,
    ),
    'list_hint2' => array(
    'name' => t('List View as Popup, Show 2 fields'),
    'theme' => 'views_view_list_hint_popup2',
    'validate' => 'views_ui_plugin_validate_list',
    'needs_fields' => true,
    'weight' => -10,
    ),
    'list_hint3' => array(
    'name' => t('List View as Popup, Show 3 fields'),
    'theme' => 'views_view_list_hint_popup3',
    'validate' => 'views_ui_plugin_validate_list',
    'needs_fields' => true,
    'weight' => -10,
    )
    );

    The critical elements in this array are the name and the specified theme callback function. The function appears below in the same file and does the actual work of producing the output, in this case, creating a pop-up.

Recipe notes

  • Documentation on hook_views_style_plugins is available in the Drupal handbook at http://drupal.org/node/193448.
  • Think of the style plugin as a way to modify the output of a whole node, while the field formatters apply to a single field.

Recipe 42: Creating a Calendar

The Calendar module offers a wide variety of display options and makes three blocks available. The module comes with a helpful Default View, which we'll edit to display workshops.

Installation and configuration

  1. Complete Recipe 34, Steps 1-9
  2. Install and enable the Calendar and Calendar Popup modules.

View setup

  1. Visit admin/build/views and click on the Add link to add the calendar's default view. This pulls up the view edit form. Note that the View Type for both the Page and Block view is Calendar.
  2. Note the three arguments to the view that appear in the following order: Calendar Year, Calendar Month, and Calendar Day. Each is set to Display All Values (if you create a calendar view from scratch, be sure to replicate).
  3. Try saving the view. A warning appears noting that The Calendar View requires at least one date field. Go ahead and add the Datestamp: workshop_date field to the menu. A second warning appears noting that Calendar CCK Date fields must be set to 'Do not group multiple values'. Return to the Fields fieldset and set Datestamp: workshop_date_field to Do not group multiple values. You may also add a second date or datestamp for another content type, at this time, if you have one.
  4. Visit the calendar URL: http://YOURSITE.com/calendar
  5. Drupal 5 Views Recipes

  6. Configure the Calendar settings at admin/settings/calendar (note that these settings are only available after the first calendar view has been created). Choose your favorite time style, and turn off the display of week numbers.
  7. Drupal 5 Views Recipes

    Drupal 5 Views Recipes

  8. Explore the other settings on this page as well. Ordinarily, they will be left as the default setting. Click the Submit button.
  9. Click on the Legend tab. Note that the module can color calendar events by content type. Setting a color is a three-click process:
    • Click in the edit box for the workshop content type after the #ffffff (that's the hex code for the color white).
    • Click in the color circle. This will create a palette that blends the selected color with a range of black and white.
    • Click in the color Swatch.
    • If you have more content types that you wish to add to the calendar (they must include a date field or an event) repeat these steps for each one.

      If you select the whole #ffffff text rather than single-clicking in the edit box, the color swatch may be applied to the wrong content type depending on your browser.

      Drupal 5 Views Recipes

Installing Calendar Blocks

  1. Go to views/build/blocks and place all three calendar blocks in the sidebar

Calendar Blocks

calendar

 

Calendar Legend

 

Calendar Switcher

 

  1. Go to http://YOURSITE.com/calendar and look at the sidebar.
  2. Drupal 5 Views Recipes

    The greater-than (>) sign in the calendar, of course, will switch the mini-calendar to the next month.

      

    Notice the URL parameters for http://YOURSITE.com/calendar/2009/07?mini=calendar/2009/07/all.

    (The parameters may offer a quicker way of navigating the mini-calendar.)

    The calendar legend collapses and expands based on the number of content types shown on the page calendar.

    The List, Teasers, Nodes, and Table switch options offer navigation similar to the Date Browser View type from Recipe 39.

    Of the three blocks, two (the Legend and the Switcher) are designed to appear only on the calendar page (that is, when the URL is calendar). We will now set the mini-calendar block to NOT appear when the calendar is displayed.

  3. If you happen to be using a theme based on Zen, Basic, or Paintbrush, helpful edit block links appear when you mouse over any block.
  4. Drupal 5 Views Recipes

  5. Click on the Edit link. Alternatively, if mouseover Edit links are not available, visit admin/build/block and search for the correct block.
  6. In the Page specific visibility settings fieldset, make sure that the Show on every page except the listed pages option is selected. Set the Pages to calendar*. The asterisk ensures that the mini-calendar will be excluded on any page that has calendar in the URL, including URLs with arguments and parameters.
    • Check the handbook page on the calendar module, at http://drupal.org/handbook/modules/calendar.
    • A common practice is to create a custom sidebar block containing an attractive calendar graphic with a link to YOURSITE.com/calendar.
    • If you want some calendar items to display only for designated roles, try installing an access control module such as Taxonomy Access Control Lite, (http://drupal.org/project/tac_lite). All board meetings, for instance, could be given a taxonomy term of board-only and then the board member role could be granted access to that term. Views, including the calendar, happily honors these access controls.

      Drupal 5 Views Recipes

    • The calendar module comes with an extensive calendar.css file which can be used to customize the calendar colors and other attributes. I recommend several resources:
      1. Firebug, of course, for identifying the class names, available at http://getfirebug.com/
      2. ColorZilla, another helpful firebug extension, available at https://addons.mozilla.org/en-US/firefox/addon/271
        Click on an object on screen and the color is revealed. You may then copy the hex code and search for it in the CSS file.
      3. Another good way to identify all the configurable calendar colors is to search calendar.css for the # character.
      4. Drupal 5 Views Recipes

      5. Copy the rule changes to your theme's style.css file.
      6. If you edit the module's calendar.css file directly, consider installing the Site notes module http://drupal.org/project/sitenotes. Note your CSS changes so that next time you upgrade the calendar module, you will have a record.
  7. Recipe notes

Recipe 43: iCal feeds

    Ingredients
  • Completed Recipes 34 and 42, calendar view
  • iCal module, which comes with Calendar

iCal is a standard text format for exchanging calendar data between web sites. The Drupal Calendar module enables two-way exchange: it can import and export calendar items, that is, calendar events appearing on an external site can be displayed on the Drupal site, and events from the Drupal calendar page may appear on an external site.

Import Calendar items

  1. Enable the iCal module that comes packaged with the Calendar module.
  2. Identify the iCal feed from a web site, and copy the iCal URL. In most browsers you may right-click, and select Copy link location. Of course, this is only possible if the web site provides an iCal feed.
  3. Drupal 5 Views Recipes

  4. Configure the iCal settings at admin/settings/calendar/calendar/ical. The path to get there is Administer | Site Configuration | Calendar Setup | iCal. Enter a name for the feed, the iCal url, and a Default link.
  5. Drupal 5 Views Recipes

  6. Open the Calendar view and note the new events from the feed.
  7. Drupal 5 Views Recipes

Export Calendar items

  1. Edit the calendar view at calendar/edit. Add a fourth argument of Calendar: iCal Feed and set the Default to Display All Values.
  2. Go back to the calendar view and notice the little calendar icon.
  3. Click on the icon and download the iCal file.
  4. Go to the calendar service of your choice and upload this link. We will use Google Calendar in this example. Go to Google Calendar at calendar.google.com and click the Add link that appears below the Other calendars. Choose Import Calendar.

    Drupal 5 Views Recipes

  5. Select the iCal file (it has a .ics extension) and the calendar where the events should be saved. Your Drupal Calendar events will now appear on the Google Calendar.
  6. Drupal 5 Views Recipes

Recipe notes

Recipe 44: Upgrade Date and Calendar modules

There are some pronounced differences between 1.x and 2.x versions for both the Date and Calendar modules. The details are documented in the release notes at http://drupal.org/node/70963/release, and http://drupal.org/node/92594/release.

This recipe is applicable if you are currently using Calendar 5.x-1.x and Date 5.x-1.x and wish to upgrade to Calendar 5.x-2.x and Date 5.x-2.x. It is also more widely applicable to other module upgrades.

The general practice for upgrading Drupal and its contributed modules is to replace the old code with the new and visit http://YOURSITE.com/update.php. However, there are prerequisite steps to ensure success. Back up the web site first (including both the files and the database). Be sure that the backups are not in a web-accessible location. For instance, if your web server is located in the public_html directory, ensure that none of your backup files, especially the SQL backup are saved there or in one of its subdirectories.

The process for performing upgrades is described in UPGRADE.txt in the Drupal site directory. The guidance below follows the same steps, but provides more detail.

Backing up the Database

There are several database backup approaches. We'll now look at two approaches (capital letters signal variables that differ according to the site).

Approach 1: Backup with mysqldump

m kdir /backups
mkdir /backups/MYSITENAME
cd /backups/MYSITENAME
mysqldump --opt -u MYUSERNAME -p MYDBNAME > mysitename_backup.sql

If you have forgotten your database name, password, and/or username, check the sites/default/settings.php file. Look for the $db_url variable in the Database settings section. It will have this format: $db_url = 'mysql:// MYUSERNAME:PASSWORD@localhost/ MYDBNAME'

If you are not confident that your backup directory is secure on your server, then FTP the files to your local hard drive, and remove them from the server.

Approach 2: Backup with the Drupal Backup and Migrate module

Install the Backup and Migrate module.

The configuration options are found in the Administer | Content Management | Backup and Migrate (you may be surprised at first not to find the link in the Site Configuration area). If you choose to save the SQL file to the files directory, be sure to move it from there as soon as you are done. The module makes an effort to edit the .htaccess file of your website, to try to ensure protection, but the module's own README.txt file notes that "this is not guaranteed to work on all environments". Read the file for more security guidance.

Drupal 5 Views Recipes

Upgrading Calendar and Date

  1. Back up the database using one of the two approaches above (it never hurts to reiterate the value of backups—and they are easy to perform).
  2. Backup the sites folder and the files folder, as well as the .htaccess and robots.txt files, as follows.
      mkdir /backups
      mkdir /backups/MYSITENAME
      cd /backups/MYSITENAME
      cp -r /home/<DRUPALROOT>/public_html/sites .
      cp -r /home/<DRUPALROOT>/public_html/files .
      cp -r /home/<DRUPALROOT>/public_html/.htaccess .
      cp -r /home/<DRUPALROOT>/public_html/robots.txt .
  3. Log on to the website as the super-administrator with the user ID 1
  4. If this is a live site (rather than just a development server), place the site off-line, at admin/settings/site-maintenance.
  5. Drupal 5 Views Recipes

  6. Disable all the Date and Calendar modules at admin/build/modules(including any modules that are dependent on Date or Date API, or Calendar). Check for modules in the following fieldsets, at a minimum: CCK, Other, and Views. You may need to press the Save configuration button several times, to disable modules that are dependent on other modules.
  7. Any time you perform a Drupal update it's a good idea to switch to the Garland theme first. Change the general theme at admin/build/themes and the administration theme at admin/settings/admin.
  8. Delete the calendar and date module subdirectories, including all of its contents.
  9. Download and unpack the new calendar and date modules into sites/all/modules.
      cd /home/<DRUPALROOT>/public_html/sites/all/modules
      rm -rf date
      rm -rf calendar
      wget http://ftp.drupal.org/files/projects/date-5.x-2.3.tar.gz
      tar xvf date-5.x-2.3.tar.gz
      wget http://ftp.drupal.org/files/projects/calendar-5.x-2.3.tar.gz
      tar xvf calendar-5.x-2.3.tar.gz
  10. Implement Steps 7–8 via the following commands (determine the current module links for the wget commands by visiting http://drupal.org/project/date and http://drupal.org/project/calendar).

  11. Run update.php by visiting http://YOURSITE.com/update.php.
  12. The following screen appears. Click on the run the database upgrade script link.
  13. Drupal 5 Views Recipes

  14. In  the next screen, simply click on the Update button.

    Drupal 5 Views Recipes

    A  quick progress bar appears followed by the screen below. At first words like "attempted" and "failures" may look scary. However, upon careful reading, this screen simply offers links to the site and lets you know that "you may proceed happily". Should you run into error messages at this point (which almost never happens) you will need to restore your backup.

    Drupal 5 Views Recipes

  15. Click on the link to the Administration pages, and go to admin/logs/status. Also make a note of the PHP version you use.
  16. Go to admin/build/modules. Note that there is a new Date/Time fieldset containing the updated modules. Enable Calendar, Calendar Popup, Date, Date API, Date Popup, and other modules as desired. If you are using PHP version 5.1 or below, be sure to enable the Date PHP4 module.
  17. Drupal 5 Views Recipes

  18. Visit admin/build/themes and admin/settings/admin and set the public and administration themes back to their original settings.
  19. If this is a live site, visit admin/settings/site-maintenance and bring the site back online.

Recipe notes

Summary

This two part article focused on a few modules, with an emphasis on date and calendar. We created a view of Upcoming Workshops that served as the foundation for the next nine recipes. We explored (finally!) the Exposed filters fieldset including some special filters enabled by the Views Date Range Filter Module. We had a chance to create some summary views. In this article, we made use of four special Views Types coded in modules via thehook_views_style_plugins. These interesting View Types include the Date Browser, Timeline, List View as Popup, and Calendar. Finally, we looked in detail at the steps for upgrading from the older 5.x-1.x Calendar and Date modules to the newer, and more feature-rich, 5.x-2.x versions.

About the Author :


Marjorie Roswell

Marjorie Roswell is a web developer from Baltimore, MD. She has been building web sites that serve the community for more than a decade.

Marjorie developed a GIS system for assisting citizen callers to the Baltimore Office of Recycling, and has taught professional classes in desktop publishing, AutoCAD, and Drupal.

While in college, Marjorie received the Betty Flanders Thomson Prize for Excellence in Botany. She now brings together her love of plants and Drupal to create BaltimoreUrbanAg.org, the web site for the Baltimore Urban Agriculture Task Force.

Marjorie enjoys writing and playing music with a community of local musicians. You can hear some of her music at FriendlyCoffeehouse.org.

Books From Packt


Flash with Drupal
Flash with Drupal

Choosing an Open Source CMS: Beginner's Guide
Choosing an Open Source CMS: Beginner's Guide

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Plone 3 Theming
Plone 3 Theming

Mastering phpMyAdmin 3.1 for Effective MySQL Management
Mastering phpMyAdmin 3.1 for Effective MySQL Management

Selling Online with Drupal e-Commerce
Selling Online with Drupal e-Commerce

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
a
D
K
9
H
7
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software