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:

   

   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:

   

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.

   

   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.

   

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:

   

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.

   

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.

   

7. The new block will appear as follows:

   

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.

   

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

   

   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:

   

   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:

   

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:

   

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:

   

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:

   

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.

   

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:

   

   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:

    

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

    

    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.

    

    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:

    

    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:

    

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.