To view a recording of this presentation visit: http://www.acquia.com/resources/acquia-tv/conference/build-event-calendar-drupal-hands-training-webinar-may-2-2012

1. Site building step-by-step
BUILD AN
EVENT LISTING

2. About me
• “heather” on Drupal.org
• @learningdrupal
• @hjames
• Manager of Learning Services at Acquia
• training.acquia.com - invest in your skills!

3. Who this is for
• New to Drupal?
• Want to build an event calendar?
• Want to know how to extend Drupal?
• Learn site building essentials

4. What we’ll do
• Get inspired looking at examples
• Write our specification
• Build our event calendar
• Review list of modules used
• Find out where to learn more!

5. Models and examples
Discovery

6. kilkennyevents.ie - wordpress site
http://kilkennyevents.ie a wordpress site

7. Two modes
Full
Teaser

8. Event submission
• Anonymous
submission
• Submitter details
• Event details
• Image upload

9. drupalshowcase.com

10. “Poster view”
janepickens.com/coming-attractions

11. Calendar view
janepickens.com/coming-attractions

12. Full event page
Title & date
Image
Description
Off-site links

13. Etkinlik Takvim
etkinliktakvimi.org

14. Variety of navigation
Month navigation
etkinliktakvimi.org
By category
Todayʼs events

15. Browse by date
imamuseum.org - drupal

16. Custom theming
imamuseum.org - drupal

17. Filtered list

18. Event submission

19. Approval queue

20. Depends on needs
• Frequency of events?
• Multiple days?
• Images for events?
• Who is submitting events?

21. Specification

22. Mini calendar

23. Browse events

24. Content display
• Full page
• Teaser mode in
Venue listing page
• Table showing titles
and images

25. Really local events
• Logged in users can submit events
• Associate events with a specific venue
• Show listing of event “teasers” on one page
• Filter by venue
• Show mini-calendar in block
• Display full event

26. Starting out of the box
A basic content type

28. Add content

29. Structure > Content types > Add content type

32. Add content

33. Test!

34. Published

35. Event URL
Manually
With Pathauto
Custom patterns

36. Pathauto patterns

37. Other patterns

38. Improvements
• Defaults: No comments, no menu
• Add a date field
• Add a related venue field

39. Default settings
Customizing events

40. Structure > Content types > Edit “event”

41. Hide author by default

42. Close comments by default

43. Don’t add to menu

44. Manage fields
Add a date field

45. Manage fields

46. Date module

47. Friendly reminder

48. Date settings

49. Add date field

50. Date fields in all types

51. Field only in Event content

52. Test!

53. What’s new?

54. Improvements
• Move date up in form
• Pop-up selection

55. Module: Date Popup

56. Configure fields

57. Edit field widget

58. Test!

59. Add an image field

60. Add image field

61. Default image

62. Field settings

63. Arrange in form

64. Manage display

65. Teaser settings

66. Teaser image

67. Configuration > Media > Image styles

68. Override > Scale& Crop

69. Test!
Attribution 2.0 Generic (CC BY 2.0)
By suzettesuzette
flickr.com/photos/suzettesuzette/6864436698/

70. Current state

71. Next
• Add related links
• Add related venue
• Is a field required? Why?
• OK in unstructured “body” text field?

72. Add related links field

73. Link module

74. Add link field

75. Default settings

76. Link field settings

77. Manage display

78. Test!

79. Links are visible

80. Next
• Related venue
• Select from limited options
• Internal content, not external links
• Why Drupal manage?
• Renaming venues
• Change of URL path
• Adding new venue
• Removing venues

81. Add venue

82. Related venue content type?
• Defaults:
• No comments.
• No adding to main menu.
• No author and date info.
• Not promoted to front page.
• Fields:
• Title and body.

83. Better: Vocabulary
• Vocabulary: Venue
• Description
• Terms: Controlled by administrator
• Bonus: RSS feed per venue, easy to
navigate.

84. Structure > Taxonomy > Add

85. Add terms

86. Add terms

87. Terms

88. Add as a field
• Add field
• Set global defaults
• Set content-type specific defaults
• Arrange field
• Check display

89. Term reference field

90. Field settings
Keep other defaults

91. Arrange field

92. Manage display

93. Test!

94. Teaser: Shows venue

95. Report: Field list

96. What’s next?
• Who can create events?
• Test with bulk creation of content
• Create listings
• Listing all events
• Filter by venue
• Sortable table
• Mini month in sidebar

97. Event display

98. Current layout

99. Manage display

100. Default

101. Display suite

102. View modes

106. Current layout

108. Preview

109. Change markup options

110. Hide labels

111. Labels inline

112. Preview

113. Markup mixup

114. Fences?

115. Fences?

116. DS: Extras
Structure > Display Suite > Extras

117. Minimal

118. Override field

119. Override field
field field-label-inline clearfix field-type-taxonomy-term-reference

120. Preview

121. Lost classes

122. Override field

123. Preview

124. Cleaner markup

125. Improvements
• Adjust remaining fields - consistent
• What classes are needed?
• Add CSS to style new markup

129. Improvements
• Add CSS styling to your theme.
• In this case we’re using “Bartik” core theme.
This would require making a sub-theme.
• Don’t edit a core theme.

130. Who can add events?
Content editing

131. Who can edit events?
• All users?
• Authenticated users?
• Only administrators?
• How do people become “authenticated”?

132. People > Permissions > Role

133. People > Permissions > “Node”

134. Account settings

135. Test!

136. Login as testuser

137. Improvement
• Link in main menu + Add an event

138. Structure > Menus

139. Add a link

140. Order links

141. Test!
Not logged in
Logged in

142. Improvements
• Should items be published automatically?
• Should we make an approval queue?
• Use Views Bulk Operations
• Test with real content editors and REAL
content.

143. Add sample content

144. Developer module
Configuration > Development > Generate content

145. Generate content in Latin!

146. Lots of content

147. Content editing
• Make sure a couple of events are in the same
month.
• Edit some titles so they fit with the content (if
you’re testing with users).

148. Filter by venue
Create listing page

149. What do we have now?

150. Views module
+ Any dependencies

151. Structure > Views > + Add

152. Add menu link

153. Event listing

154. Views configuration

155. Add fields

156. Configure each

157. Image display

158. Venue display

159. Preview

160. Improvements
• Default sort for date
• Sortable columns for Venue and date
• Image first

161. Arrange fields

162. Column sorting

163. Preview!

164. Improvement
• Add filter to allow user to select one venue
• Filter out past events for this listing

165. Add exposed filter

166. Expose filter

167. Preview!

168. Add date filter

171. Preview!

172. Event listing

173. Calendar page

174. Date views

175. Template options

176. Rename view

177. Defaults

178. Preview defaults

179. Default by month

180. By week

181. By day

182. By year

183. Customize

184. Structure > Blocks

185. Block: Upcoming

186. View: Event calendar

187. Preview

188. Improvements?
• “Share this” button.
drupal.org/project/sharethis
• “Bookmark” option.
drupal.org/project/flag

189. What’s next?
Learn more

190. Training in May-June
training.acquia.com/events

191. Site building - May & June
Drupal in a Day Site Building
Leuven, Belgium Vancouver, Canada
Alexandria, VA Portland, OR
Vancouver, Canada Cincinnati, OH
Portland, OR Leuven, Belgium
Cincinnati, OH Amherst, MA,
Toronto, CA Geneva, Switzerland
Amherst, MA, New York, NY
Geneva, Switzerland Schaumburg, IL
New York, NY Bordeaux, France
Bordeaux, France Charlotte, NC
Charlotte, NC Washington, DC
Washington, DC Dallas, TX
Dallas, TX San Francisco, CA
Paris, France Paris, France
Montreal, Canada Montreal, Canada
training.acquia.com/events

192. j.mp/datesD7
Available now

193. j.mp/fullcalendar-course
May 17th

194. Styling
j.mp/calendar-theme

195. udemy.com/learn-drupal

196. Site building - May & June
Drupal in a Day Site Building
Leuven, Belgium Vancouver, Canada
Alexandria, VA Portland, OR
Vancouver, Canada Cincinnati, OH
Portland, OR Leuven, Belgium
Cincinnati, OH Amherst, MA,
Toronto, CA Geneva, Switzerland
Amherst, MA, New York, NY
Geneva, Switzerland Schaumburg, IL
New York, NY Bordeaux, France
Bordeaux, France Charlotte, NC
Charlotte, NC Washington, DC
Washington, DC Dallas, TX
Dallas, TX San Francisco, CA
Paris, France Paris, France
Montreal, Canada Montreal, Canada
training.acquia.com/events

197. What modules appeared?
Cast & Credits

198. Date entry
drupal.org/project/date

199. Related links
drupal.org/project/link

200. Filterable event list
drupal.org/project/views

201. Calendar grid display
drupal.org/project/calendar

202. What fields appear where
drupal.org/project/ds

203. Markup control
drupal.org/project/fences

204. Supporting cast
• Token
• Pathauto - Human friendly URLs
• CTools - Magic for Views
• Devel - Bulk creation of content for testing

205. Any questions?