Adding Calendar to a Web Site using Drupal 6

Exclusive offer: get 50% off this eBook here
Drupal 6 Site Builder Solutions

Drupal 6 Site Builder Solutions — Save 50%

Build powerful website features for your business and connect to your customers through blogs, product catalogs, newsletters, and maps

$26.99    $13.50
by Mark Noble | December 2008 | MySQL Content Management Drupal PHP Web Development

In this article by Mark Noble, we will learn about adding calendar to our web site. A calendar is a fantastic way of keeping customers coming back to your site and your business at regular intervals so that they can take advantage of specials, sales, and other time-limited events.

We will consider the example of an imaginary web site created for a restaurant called Good Eatin' Bistro. Chef Wanyama is the owner of the Good Eatin' Bistro, a popular upscale restaurant. You can check this web site at http://goodeatin.drupalbyexample.com/.

We will create a basic event calendar, which displays information about musical concerts, special events, and more, for the Good Eatin' restaurant.

Adding new events to the calendar

Good Eatin' Goal: Create an event that will be displayed on the calendar.

Additional modules needed: Event (http://drupal.org/project/event).

Basic steps

  1. In order to add an event, you must first install and activate the Event module in the Module manager as shown in the following screenshot:

    Adding Calendar to a Web Site using Drupal 6

    Activating the Event module will a create a new Event content type. There are also several settings that control how events are displayed and how time zones are handled.

  2. To modify the time zone settings, select Site configuration, then Events, and finally Timezone handling, from the Administer menu.
  3. Drupal will display a page similar to the following:

    Adding Calendar to a Web Site using Drupal 6

  4. You will want to customize these settings according to where the majority of your users live, and the types of events that you are holding. For example, if most of your users are in the U.S., 12 hour notation is probably appropriate, but if most of you users are in Europe, 24 hour notation is better. If the events are held online with a mix of users in different time zones, it would make sense to have the events displayed in the user's time zone. However, if the event is being held at a single site, it would make sense to use the local time of the event. For the Good Eatin' site, we will use the site's time zone for events, display the events in the event time zone, and use the 12 hour time notification.
  5. Before we can create an event, we must set the default time zone for the site. This is done by selecting Site configuration and then Date and time, from the Administer menu.

    Adding Calendar to a Web Site using Drupal 6

    The Good Eatin' restaurant is located in Colorado, so we will set the time zone to US/Mountain.

  6. Click Save configuration to save your changes.

  7. To add an event, select Create content and then Event, from the main Navigation menu.
  8. Enter a title and a description for the event, as shown in the following screenshot, and then set the start time and optionally the end time for the event.

    Adding Calendar to a Web Site using Drupal 6

  9. Click Save when you are happy with the event settings.

Displaying events

Good Eatin' Goal: Display events on the site in various formats including a block of upcoming events, a table of events, and a calendar of events.

Additional modules needed: Event (http://drupal.org/project/event).

Basic steps

The Event module provides several methods for allowing customers to view events. We will explore each of these in turn.

  1. The easiest way to allow visitors to browse events is by using the event page, which is accessed by at http://yoursite.com/event. The page appears as follows:

    Adding Calendar to a Web Site using Drupal 6

  2. If you want the user to be able to access this page without knowing the URL in advance, you can create a menu item for the page. Open the Menu Manager by selecting on Site building and then menus, from the Administer menu.
  3. Select the menu that you want to add to the menu item and then click the Add item tab.
  4. Enter the information about the new menu item, as shown in the following screenshot, and then click Save when you are satisfied.

    Adding Calendar to a Web Site using Drupal 6

  5. The second method of presenting events to users is by using the upcoming events block. To add this, open the Blocks Manager by selecting Site building and then Blocks, from the Administer menu.
  6. Set the region for the List of upcoming events to Right sidebar.

    Drupal 6 Site Builder Solutions

  7. The new block will appear as follows:

    Adding Calendar to a Web Site using Drupal 6

  8. The final method of displaying calendar entries is a block showing upcoming events in a calendar view. To add this block, open the Block Manager by selecting Site building and then Blocks, from the Administer menu. Set the region for Calendar to browse events to Right sidebar.

    Adding Calendar to a Web Site using Drupal 6

  9. The display for the calendar will appear as follows:

    Adding Calendar to a Web Site using Drupal 6

    You can decide which of these methods to use for your own site, based on how the user will work with your site.

Adding other content types to the event calendar

Good Eatin' Goal: Discuss how to add custom content types to the event calendar.

Additional modules needed: Event (http://drupal.org/project/event).

An easy way of adding additional content types to your existing event calendar is by modifying the content type and then setting the Event calendar options.

  1. Open the Content Manager by selecting Content management and thenContent types, from the Administer menu.
  2. Edit the type that you want to add to the event calendar.
  3. Open the Event calendar section and modify the options, as shown here:

    Adding Calendar to a Web Site using Drupal 6

    If you prefer to have a calendar just for the type, you can use the Only in views for this type option.

  4. Save the changes to your content type, and the event calendar will be automatically updated.

Creating events using CCK

Good Eatin' Goal: Build events using the CCK module and the Date module, rather than the Event module, thereby giving additional control over the events.

Additional modules needed: CCK (http://drupal.org/project/cck), Date (http://drupal.org/project/date).

Basic steps

Depending on your site, it may be more convenient to use CCK and the Date API to build dates. This strategy also gives you additional control over what information is included in the event and in the display. In addition, all required modules should be updated more quickly after each new Drupal release. However, you will need to carry out more initial setup for events and displays if you use this strategy.

  1. Install and activate the CCK and Date modules if you have not done so already.
  2. Open the Content Type Manager by selecting Content management and then Content types, from the Administer menu.
  3. Click Add content type to begin creating your new event type. We will call this type Event CCK to avoid conflicts with the Event module, as shown below:

    Adding Calendar to a Web Site using Drupal 6

  4. After you are satisfied with the information for the new content type, click Save Content Type to create the new event type.
  5. We now need to add fields to store the date and the time of the event. Click on the Add field link to begin the process.
  6. We will call the field event_time_cck and make the type a Datetime field so that we can enter both the day on which the event occurs and the time of day at which it starts, as shown in the following screenshot:

    Adding Calendar to a Web Site using Drupal 6

  7. Click Continue to save the new field. You will now need to select the display widget for the field. Text field with jQuery pop-up calendar is appropriate. Click Continue to complete the field definition. You can optionally modify various settings related to how the field is displayed. You should make the time Required. If you want to define end dates or times for the event, you should modify the To Date to Optional or Required.
  8. You can now create CCK-based events using the same techniques that we used to create other content—just select Create content and then Event CCK, from the main Navigation menu.
  9. Enter the information for the event, as shown in the following screenshot:

    Adding Calendar to a Web Site using Drupal 6

  10. When you are satisfied with the event, click Save to add the new event to the site's calendar.

 

Good Eatin' Goal: Display a calendar that gives more details than a block view on a page.

Additional modules needed: Calendar (http://drupal.org/project/calendar), Views(http://drupal.org/project/views), Date API (http://drupal.org/ project/date).

Basic steps

Now that we can create events using CCK, we need to display them on the site. We will begin by creating a page where visitors can browse all of the upcoming events using a convenient calendar.

  1. Begin by installing and activating the Views and Calendar modules if you have not done so already. Note that, some versions of Calendar released prior to June 28, 2008 require you to activate both Calendar and iCal at the same time. If you experience an error when installing the Calendar module, either upgrade to the latest development module or install both modules at the same time.
  2. The easiest way to build new views using the calendar is to clone the default calendar view and customize it to meet your needs.
  3. Go to the Views Manager by selecting Site building and then Views, from the Administer menu.
  4. Drupal will display a list of all of the views that have currently been established on the site. If you scroll the list, you will see the Default Node view: calendar as shown in the following screenshot:

    Adding Calendar to a Web Site using Drupal 6

  5. Temporarily enable the default view by clicking on the Enable link.
  6. After the view has been activated, a new set of links will appear, labeled: Edit, Export, Clone, and Disable.
  7. Click on the Clone link to make a copy of the calendar. Drupal will allow you to change the name and description of the view. Change the name to event_calendar and then click next to edit the view.
  8. The default settings for the view are shown in the following screenshot. We will edit several settings for our purposes.

    Adding Calendar to a Web Site using Drupal 6

  9. The first change we need to make is to create a new Filter by clicking on the + symbol next to the Filters label. Select the Node: Type filter, as shown in the following screenshot:

    Adding Calendar to a Web Site using Drupal 6

    In most cases, you should also select the Node: published or admin filter to prevent unauthorized access to private information.

  10. Click the Add button and set the allowable types to Event CCK.
  11. The next change we will need to make is to modify the fields by selecting Node: Updated date.
  12. Click Remove to remove this field from the view.
  13. Click the + next to the Fields label to add a new field.
  14. Select Content: Event Time for the new field to be added, as shown in the following screenshot:

    Adding Calendar to a Web Site using Drupal 6

  15. Click Add to save the changes. You will now need to configure the display of the field.

    Adding Calendar to a Web Site using Drupal 6

    In most cases, including this one, the defaults are acceptable. So we will just click Update to continue. You will also need to update the settings for the end time (value 2), as described above.

  16. The final change we need to make to the view is in the Arguments. Select the Date:Date link in the Arguments section.
  17. Drupal will display a list of parameters that you can use to customize the arguments.

    Adding Calendar to a Web Site using Drupal 6

    We will need to change this to use our Content Event time fields, and then click Update to save the changes.

  18. Now that all of the required changes have been made, click Save to finish building the View.
  19. We can now return to the list of all views by clicking on the List link, and disable the default calendar view by selecting the Disable link for the default calendar view.
  20. Now that our view has been completely set up, we can use it to browse our events. The calendar view, which we used as a starting point, provides several methods of displaying the content as shown below:

    Adding Calendar to a Web Site using Drupal 6

    You may use any of these views, or you can add more views according to your site's needs. If you do not want to use a display type, you can delete it. If you click on the Calendar Page display type and review the Page settings, you will see that a Page is provided, which can be accessed using the path http://yoursite.com/calendar. No menu is provided. You can either add a menu link here, or use the Menu Manager if desired. If you open the calendar page, the display appears as follows:

    Adding Calendar to a Web Site using Drupal 6

  21. The calendar view also provides several block displays that can be activated and added to your site via the Block Manager. These blocks include a Calendar block that is similar to the display provided by the event block, and a Legend block that can be used to allow visitors to understand the information in the calendar more easily.

Summary

Congratulations! You have now added calendar and events to your sites. These will provide valuable ways of communicating with your customers to ensure that they keep coming back to your web site and, more importantly, to your business.

 

Drupal 6 Site Builder Solutions Build powerful website features for your business and connect to your customers through blogs, product catalogs, newsletters, and maps
Published: December 2008
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Mark Noble

Mark Noble has worked in software development and website design for over 13 years in a variety of capacities including development, quality assurance, and management. He takes pride in developing software and websites to make businesses run more effectively and delights in helping users to get their jobs done more easily.

Mark currently works developing websites to help libraries manage their books. He also does occasional contract work for clients in a variety of industries.

When he isn’t in front of a computer, Mark enjoys playing with his family, photography, and geocaching.

Books From Packt

Drupal 6 Social Networking
Drupal 6 Social Networking

Drupal 6 Themes
Drupal 6 Themes

Building Websites with Joomla! 1.5
Building Websites with Joomla! 1.5

Joomla! Web Security
Joomla! Web Security

OpenCms 7 Development
OpenCms 7 Development

Drupal Multimedia
Drupal Multimedia

Building Powerful and Robust Websites with Drupal 6
Building Powerful and Robust Websites with Drupal 6

Learning Drupal 6 Module Development
Learning Drupal 6 Module Development

Your rating: None Average: 4 (6 votes)
Indeed a real good tutorial by
Indeed a real good tutorial.
thanks but.... by
thank you for your excellent tutorial but I have a problem with the upcoming events block that it it doesn't show any of the events that I have created. the calendar block is working fine and by the way i'm using drupal 6 so I use the dev version of event module . iwoll be grsteful if you tell me what is wrong. best regards A.J
Need Some Help!!!!!!!!!!!!!!! by
Hi! I need some help from you.I need your help in the following cases 1. How can I add a such feature to my website that when some body search for some thing a page containing related products appear as 1234.... as when i search for software at CNet as for [URL=http://download.cnet.com/1770-20_4-0.html?query=norton+antivirus&tag=srch&searchtype=downloads&filterName=platform%3DWindows%2CWebware&filter=platform%3DWindows%2CWebware]Norton Antivirus [/URL] ? 2. How Can I add more menu into my website using different ways like HTML etc? 3. How can I add a Privacy Page in website Footer? Please solve these Problems.I need your urgent help. "Send these information at my Private email Address rawalbaig@gmail.com"
Excellent by
I Havnt tried yet but the way u explained it is really wonderful.Everybody will understand this.I always this type of explnation.Thank u

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
w
w
M
s
5
E
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