Training and Development for Drupal

Date + Calendar Screencast (Drupal 6)

FAIL (the browser should render some flash content, not this).

(If you are looking for Date + Calendar instructions for Drupal 7, look here.)

If you like this screencast, you can show it by pitching in to a special fundraising effort. (And here's why.)

Here is a fast screencast covering the Date and Calendar modules for Drupal 6. This recipe illustrates one way to let your users post their own events (like parties, appointments, meetups, etc) that include date information stored in a field. Then you can see how to display these dates on a traditional calendar layout with all the events sorted into the correct days.

The modules doing the heavy work are the Date module (for use with CCK) and Calendar module (for use with Views). Something to note is that the Calendar module provides a number of default views that display a calendar-style layout. While you can simply enable the view called "Calendar" and call it done, this screencast instead demonstrates the two to three different steps one would take to build a calendar-style view from scratch. I chose to do it this way to help you better understand how the all the date and calendar parts fit together.

There is an entirely different approach to making dated nodes, which uses the Event module, but that is not covered in this screencast.

To make the best use of this screencast it would be awesome to have some prior exposure to the Views and CCK modules for Drupal 6. You should also have working knowledge of Drupal including the installation of contributed modules.

If you find this helpful, drop me a note. Also, if you find anything incorrect that I may have overlooked the please let me know so I can correct it.

Comments

Thanks for this tutorial which I followed and it really helped me!

Anyway as few users I upgraded CCK and views and it doesn't diplay anything - the calendar table is empty. I know that it could be problem with Calendar module which renamed tables from date_star to date_start_something or something like that. The end date as well.
I don't remember it exactly but this I think causing the problem.

If anyone has a solution not only me would appreciate it.

Thanks Sean again

I've found it finally.. http://drupal.org/node/399536

thanks for posting

...and do it in others languages .. italian (for example) ?

Thanks for the screencast, unfortunately bliptv is blocked in China. Anyone know of a good workaround to get to it? Just checking

Love the screencasts!! Wish you made more :)

awesome site! thanks for sharing. very insightful. :)

Thanks for this great introduction, sweet help for a sweet CMS :-)

Thanks Sean for this screencast. Clear and informative. Watching it has me thinking how I could put the module to good use into a community based website I'm starting to develop. I'm glad I've found your site, and I'll be coming back in the future to check out your other screencasts. Keep up the good work!

Regards,

Jason

Outstanding! Love your presentation style. This screencast is a massive help to newbies such as me. Please keep them coming!

Also for anyone interested - "Using Drupal" Chapter 9 (O'Reilly) has an Event Management walk through example: http://www.doitwithdrupal.com/files/u3/UsingDrupalch09.pdf

DEMO Result: http://events.usingdrupal.com/

Thanks for outlining this. It has really opened my eyes to how powerful drupal really is.

cheers!

Great tut -
I love that you BEGIN by telling us the date that you recorded the video. Otherwise, when I'm watching a video, it's sometimes hard to know if the tutorial was recorded a week ago or 3 years ago!

Hi Sean,
I need your help on the calendar...i got the calendar working and it looks great...my problem is the month, previous and next links don't show up on my calendar can you help me with this....thank you!

Oh..and I keep getting this error I don't know if this has anything to do with it but here it is...

Duplicate entry 'd/m/Y - g:ia' for key 2 query: INSERT INTO date_format (format, type, locked) VALUES ('d/m/Y - g:ia', 'short', 1) in /home/content/html/includes/common.inc on line 3422.

Good tutorial, thanks.
Unfortunately the current calendar version 6.x-2.0 is having problems showing the back-next buttons for the month view. Otherwise your explanation is very helpful.

Good tutorial, thanks.
Unfortunately the current calendar version 6.x-2.0 is having problems showing the back-next buttons for the month view. Otherwise your explanation is very helpful.

The only thing I can't find anywhere how to do is color-code the list view with some sort of stripe or box using taxonomy I set up. I try putting div ids but no where seems to work.

Does anyone know how or where you could do this???

I followed the tutorial and used the calendar view instead of date browser view for a number of reasons. It lets you color-code each event by the type of event(taxonomy), however it will only show up in the calendar.

Thank you thank you thank you.

Hi Sean,
Thanks for taking the time to put this screencast together. I love your tutorials and to be honest don't know where you find the time to do it.

Oh and I won't be a menace either.

Fantastic tutorial!... Great teaching skills and approach!

Thank you very much! This was a very useful and clear tutorial!

Hello.. very clear screencast (I normally got bored after few minutes..).

However, after upgraded to latest (19 march 2009) date, CCK, view modules I can't get any longer the events in the calendar view.. it's like the new date fields are not recognised... anyone else did had such behaviour??

Yes, I have the same problem after the update. Not sure how to fix it...yet.

the answer is...!
http://drupal.org/node/399536

One thing that tripped me up for a while was that although I had a drupal custom content type with a Date field, and I had instances of these content types in the CMS, I could not get them to display in the calendar.
I finally got the content to display in the calendar after I added the date field to Fields in the view. I thought that Fields for the view only where used to control the display of views, however this was not the case.

Great job.

Very education and clean.

Thanks a lot :)

Cheers

Very nice tutorial - super clear and very well done. Thank you!

Joseph Gutwirth
Instappraisal.com

Hi Sean,

well done!!

It's a very good job, please continue recording this helpful videos!!

Bye

Sean,

You had mentioned in the screencast that it is possible to not show the actual date inside of the calendar view, just have the times in the date block. Is that done through custom themeing or is there a way to configure that in the view?

14g619y108anuq41

You actually don't configure this in the view, but you can still configure it through the administration pages in your Drupal installation.

Go to Administer › Site configuration › Date and time. You should see three tabs for "Date & time," "Formats," and "Locale Settings." You want to choose "Formats."

Inside of Formats, you'll find more options: "Configure," "Custom Formats," and "Add format." You want to go first to the Add Format area.

Once there, you're going to enter a string that describes how you want to format your date and time. There should be a link to the "PHP manual" that will show you all the options you need to make the date and time format however you want. However, to get you started, I'll give you a simple one. If you enter this string into the field:

g:i A

...then the resulting date/time format will be this:

8:47 PM.

The "g" represents the hour (without a leading zero for single-digit hours), the "i" represents minutes, and the capital-A represents "AM" or "PM". The colon and the space just get output as straight text.

Okay, so once you've created your new format string, you need to apply it to an actual new "format type." Click on "Configure."

In the fields under "Add format type," enter a nice descriptive name in the human readable field and a machine readable name in the other and click "Save configuration."

Your new format type will appear under the default format types. For your last trick, click on the drop-down menu for your new format type, and select the option that coincides with the format string you created moments earlier. Don't forget to save your configuration.

Your last step is to go back into "Views." Under "Fields", you select the Date and time field you already have there. Once you have the edit box open, find the drop-down for "Format," and choose the new format type you created. Click update, and don't forget to save your view.

If anything doesn't work along the way, you might need to clear your cache (like Views might not see your new format type until you do that). You can go to admin/settings/performance and click the "clear cached data" button whenever you notice that your changes aren't being picked up somewhere else.

Thank you so much for this detailed reply... I was scratching my head until I found this comment to show only the time and no date on calendar view.

Very helpful :-)

Hi Sean,

Thanks for taking the time to put these screencasts together. They're very clearly explained, and even though I am no slouch when it comes to technical things, being an experienced web developer, it still helps to have a system as complex as Drupal explained with clear working examples.

Keep up the good work.

Thanks
Mark.

Hail Sean! A great tutorial well demonstrated and put together. It covers a few areas of the drupal system, enough to see how the overall system works... in this tiny demo... nice one :)

I may as well ask it here.. I was trying to set up different date formats, so I could get the day separate and the full month separate.. This would allow for a list grouped under the full month name and a small amount of space allocated to the day on the block event list. I only seem able to access 4 :
As Time go By
Long
Medium
Short
Custom
I need to see at least one more custom slot... may i kindly ask how?

hwfn6jv8pddefvl6

Hi Sean,

Another great tutorial. I'm really becoming a fan!

I just want to know though, how can I create a "mini calendar" using this method? Enabling views calendar and using it instead allows me to have a ready built mini calendar, which i could place on the sidebars using blocks.

I just want to know if it's possible to recreate the mini calendar by editing the views date browser. I got interested in this when you got to mention it at the end of the video.

Thanks a bunch!

Cecille

eewl5kvf0vyja03k

Look into the other new views that are provided with the Date/Calendar modules. There is already one that provides you with a mini-calendar block though I don't remember what it is called. In a nutshell, it'd simply a block view with the display type set to calendar, and this should be all it takes to make it "mini". If you understand what I explained in the screencast then you should have enough of the basics to pick it apart and understand it.

Great Work Budy!!!!!!

Thanks for this tutorial, I have used it for a website and it works great.

This is a great site. Keep up the good work!

Great job at explaining. I'll be visiting this site again. You're very thorough and clear. Thanks so much for giving me a handle on some capabilities with these modules!

le1u9gbfa3aojqeb

Hi Sean,

Thank you very much for this lesson.

MUCHAS GRACIAS!

cristian.-

Great! Thanks very very much! With your help I created a calendar for manage policemen teams! Bye!

Thanks very very much! With your help I created a calendar for manage policemen teams! Bye!

Thank you Sean,
I followed your tutorial step by step. Well done!
Victoire

Thanks a lot, this is a great tutorial!!!
Now I just have to convert event dates to calendar - has any tried the date-copy to import events info?

Hi Sean!

Great little run through, certainly helps you get to grips with these modules!!

Tom

When I change the date argument from updated date to my created date field (as shown around 14:20) my calendar does not display anything anymore. Does anyone know what might be wrong?

My date field is displayed as: "content: - value " instead of as content: date (field_name value) as in the screencast, so that might be it... maybe...

All help appreciated!

I had the same problem.

Administer > Views > edit date-browser > Arguments Date: Date > Update > Save

Hope this helps!

The screencast was done on a mac. This is probably why it displays the field_name differently.

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

Most Recent Screencast

See video

Support the Association